SvelteKitアプリをGitHubリポジトリから各種PaaSへデプロイ

by bills · 2025年7月25日

以下のPaaSプラットフォームにデプロイする際のメモ。

AWS Amplify
AWS Elastic Beanstalk
Azure App Service
Vercel

留意事項：この記事は実施結果について何ら保証するものではありません。参考にしたことによる責任は負いませんので、各自の判断で御利用ください

当記事での前提・おことわり

GitHubリポジトリでソース管理。
SvelteKitアプリをデフォルト構成で作成済。
Nodeモジュール管理にpnpmを使用（使用しなくても可能）。
特にNodeモジュールインストールpnpmコマンドのオプション指定が同一目的でもPaaSによってブレているが、実作業時ベースで記録。
全般的に設定において実際のファイルや画面では存在するが記載していない項目については任意。

AWS Amplify

Amplifyはランタイムが特殊であり、アプリが使用しているNodeモジュールによっては動作しない場合があるため、その場合はAWS Beanstalkやその他サービスの利用の検討が必要。

ソース資産対応

Nodeモジュール導入

pnpm install amplify-adapter

svelte.config.js

import adapter from '@sveltejs/adapter-auto';

↓

import adapter from 'amplify-adapter'

AWS Amplify / GitHub連携（GitHub Actionsワークフロー生成）

AWS Amplify側

AWS Amplify画面「新しいアプリを作成」
- ソースコードプロバイダーを選択
  - Amplifyを使用して構築を開始
    - アプリケーションをデプロイ
      - 「GitHub」を選択
  - 「次へ」
- リポジトリとブランチを追加
  - （初回の場合はGitHub画面（後述「GitHub側」参照）がポップアップして設定を行い、2回目以降の場合は「GitHubのアクセス許可をアップデート」で設定変更可能）
  - リポジトリを選択：（対象リポジトリを選択）
  - ブランチを選択：（対象ブランチを選択）
  - 私のアプリケーションはモノレポです：（複数のプロジェクト／サービス（Amplifyデプロイ対象以外資産も含まれる）を単一リポジトリで管理している「モノレポ」でなければチェック不要）
- アプリケーションの設定
  - アプリケーションの名前：（変更は任意）
  - ビルドの設定
    - 自動検出されたフレームワーク
      - フロントエンドビルドコマンド：pnpm run build（変更なし）
      - 出力ディレクトリをビルド：build（→デフォルトのdistから変更）
    - 「YMLファイルを編集」：（修正内容は後述。前述のフレームワーク設定に連動するため設定変更後に行うこと）
    - 自分のサイトをパスワードで保護：（任意）
    - 詳細設定：（任意）
  - 「次へ」
- 確認
  - 「保存してデプロイ」

YMLファイル編集内容

操作（フレームワーク設定や再編集など）によってはインデント空白文字数やシングルクォート囲みの有無が異なる場合があるが、それらは最終結果に影響しない。

修正前

version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'pnpm install'
        build:
            commands:
                - 'pnpm run build'
    artifacts:
        baseDirectory: build
        files:
            - '**/*'
    cache:
        paths:
            - 'node_modules/**/*'

修正後

version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm install -g pnpm'
                - 'pnpm install'
        build:
            commands:
                - 'pnpm run build'
                - 'cd build/compute/default/'
                - 'pnpm i --production'
    artifacts:
        baseDirectory: build
        files:
            - '**/*'
    cache:
        paths:
            - 'node_modules/**/*'

GitHub側

Amplifyアプリ作成のGitHubリポジトリ設定画面でポップアップされるGitHub画面で認証すると以下の画面に遷移（またはGitHubリポジトリ画面で自ら操作）

GitHubアカウント設定画面（アカウント Settings）
- Integrations
  - Applications
    - AWS Amplify設定画面
      - Repository access
        
        「All repositories」または「Only select repositories」を選択
        
        後者の場合は「Select repositories」プルダウンから対象リポジトリを選択し「Save」
- （Amplify画面からポップアップされた場合はGitHubウィンドウを閉じる）

カスタムドメイン設定

AWS Amplify側

カスタムドメインがRoute53管理であるか否かによって操作は異なる（Route53管理の場合は自動設定されるなど）。

AWS Amplify
- （アプリを選択）
  - ホスティング
    - カスタムドメイン
      - 「ドメインを追加」
        
        （ルートドメインを入力：サブドメインを設定したい場合も後のステップで行うため、ここではルートドメインを指定）
        
        （ドメインがAWS Route53管理の場合）「ドメインを設定」
        
        （ドメインがAWS Route53管理ではない場合）「ドメインの可用性を確認」
      - （以下ドメインがAWS Route53管理の場合で記述）
        
        サブドメイン
        
        （ルートドメイン）：サブドメイン設定の場合は「ルートを除外」（除外しないとAWS Route53管理ドメインの場合はルートドメインの設定がこのアプリケーションを指すよう自動変更されるので注意）
        
        （サブドメイン）：任意のサブドメイン名を変更入力（ルートドメイン設定の場合はデフォルト値「www」のままか削除）
        
        カスタムSSL証明書
        
        以下から任意選択（ここではAmplifyマネージド証明書を選択）
        
        Amplifyマネージド証明書
        
        カスタムSSL証明書：（AWS Certificate Manager利用）
        
        「ドメインを追加」
      - （Amplifyマネージド証明書の場合）SSL作成・設定・ドメインのアクティベーション（最長30分程度の時間を要する）が逐次実行され、完了すると「ステータス」が「使用可能」となる。
      - （AWS Route53管理ドメインの場合）

DNS側

Route53管理でない場合にはDNS側で設定を行う。以下はRoute53管理ドメイン設定で自動設定されたカスタムドメインの「アクション」＞「DNSレコードを表示」からの参考情報。Route53管理でなく、かつ手動設定とした場合は設定ステップ中に相当する情報が提示されると思われる。

レコード種別	名前	値
CNAME	<検証レコードのホスト名：****.指定ルートドメイン>	<****.acm-validations.aws.>
CNAME	<サブドメインレコードのホスト名（指定値）>	<****.cloudfront.net>

AWS Elastic Beanstalk

当手順ではEC2セキュリティグループを事前に作成しているが、Beanstalkアプリ作成ウィザード中で作成することも可能。

AWS Elastic Beanstalk / GitHub連携（GitHub Actionsワークフロー生成）

AWS Elastic Beanstalk側

EC2画面
- ネットワーク＆セキュリティ
  - セキュリティグループ
    - 「セキュリティグループを作成」
      - 基本的な詳細
        
        セキュリティグループ名：（任意）
        
        説明：（任意）
        
        VPC：（デフォルトVPCを選択するなどセキュリティ要件に応じて任意）
      - インバウンドルール
        
        「ルールを追加」
        
        （1つ目）
        
        タイプ：「HTTP」選択
        
        ソース：「Anywhere-IPv4」選択
        
        （2つ目）
        
        タイプ：「HTTPS」選択
        
        ソース：「Anywhere-IPv4」選択
      - アウトバウンドルール：（デフォルト設定）
      - 「セキュリティグループを作成」
Elastic Beanstalk画面
- アプリケーション
  - 「アプリケーションを作成」
    - 新しいアプリケーションを作成
      - アプリケーション情報
        
        アプリケーション名：（任意）
      - 「作成」
        
        （作成アプリケーション画面に遷移）
- （作成アプリケーション画面）
  - 「新しい環境を作成」
    - 環境を設定
      - 環境枠
        
        「ウェブサーバー環境」選択
      - アプリケーション情報：（任意）
      - 環境情報
        
        環境名：（任意：デフォルトは<アプリケーション名>-env）
        
        ドメイン：（任意）
      - プラットフォーム
        
        プラットフォームタイプ：「マネージドプラットフォーム」選択
        
        プラットフォーム：「Node.js」選択
        
        プラットフォームブランチ：（任意選択）
        
        プラットフォームのバージョン：（任意選択）
      - アプリケーションコード
        
        「サンプルアプリケーション」選択
        
        （履歴にサンプルが残るのを避けたいのであれば空のNode.jsアプリを作成して「コードをアップロード」）
      - プリセット
        
        設定プリセット：「単一インスタンス（無料利用枠の対象）」など任意選択
      - 「次へ」
    - サービスアクセスの設定
      - サービスアクセス
        
        サービスロール
        
        （初回）「ロールを作成」
        
        （Webブラウザの新規タブで「IAM > ロール > ロールを作成」画面）
        
        信頼されたエンティティを選択
        
        信頼されたエンティティタイプ：「AWSのサービス」選択
        
        ユースケース
        
        サービスまたはユースケース：「Elastic Beanstalk」選択
        
        ユースケース：「Elastic Beanstalk – Environment」選択
        
        「次へ」
        
        許可を追加
        
        許可ポリシー：（デフォルトで以下が指定）
        
        AWSElasticBeanstalkEnhancedHealth
        
        AWSElasticBeanstalkManagedUpdatesCustomerRolePolicy
        
        許可の境界を設定：（「許可の境界なしでロールを作成」を選択するなどセキュリティ要件に応じて任意）
        
        「次へ」
        
        名前、確認、および作成
        
        ロールの詳細
        
        ロール名：（任意：デフォルトで設定されているもので可）
        
        「ロールを作成」
        
        （元のWebブラウザタブのElastic Beanstalk画面でサービスロールのリロードアイコンを押すと作成したロールが設定される）
        
        EC2インスタンスプロファイル
        
        （初回）「ロールを作成」
        
        （Webブラウザの新規または開いているタブで「IAM > ロール > ロールを作成」画面）
        
        信頼されたエンティティを選択
        
        信頼されたエンティティタイプ：「AWSのサービス」選択
        
        ユースケース
        
        サービスまたはユースケース：「Elastic Beanstalk」選択
        
        ユースケース：「Elastic Beanstalk – Compute」選択
        
        「次へ」
        
        許可を追加
        
        許可ポリシー：（デフォルトで以下が指定）
        
        AWSElasticBeanstalkMulticontainerDocker
        
        AWSElasticBeanstalkWebTier
        
        AWSElasticBeanstalkWorkerTier
        
        許可の境界を設定：（「許可の境界なしでロールを作成」を選択するなどセキュリティ要件に応じて任意）
        
        「次へ」
        
        名前、確認、および作成
        
        ロールの詳細
        
        ロール名：（任意：デフォルトで設定されているもので可）
        
        「ロールを作成」
        
        （元のWebブラウザタブのElastic Beanstalk画面でサービスロールのリロードアイコンを押すとロールが設定される）
        
        EC2キーペア：（任意：セキュリティ要件に応じて）
        
        「次へ」
      - ネットワーキング、データベース、およびタグをセットアップ
        
        仮想プライベートクラウド（VPC）
        
        VPC：（デフォルトの”-“選択でアカウントのデフォルトVPCを使用するなどセキュリティ要件に応じて任意）
        
        インスタンスの設定
        
        パブリックIPアドレス
        
        有効化：チェック（セキュリティ要件に応じロードバランサーを利用する場合などはチェックしない）
        
        「次へ」
      - インスタンスのトラフィックとスケーリングを設定
        
        インスタンス
        
        EC2セキュリティグループ：（事前に作成したセキュリティグループをチェック）
        
        容量
        
        Auto Scalingグループ
        
        環境タイプ：（任意：「単一インスタンス」または複数台（可能）構成の「負荷分散」）
        
        インスタンスタイプ：（任意：高性能インスタンスタイプを削除して最小インスタンスタイプのみにするなど）
        
        「次へ」
      - 更新、モニタリング、ログ記録を設定
        
        マネージドプラットフォームの更新
        
        週次更新ウィンドウ：（任意：特に単一サーバ運用では可用性要件に応じてメンテナンス曜日・時刻を指定するなど）
        
        「次へ」
      - レビュー
        
        「作成」
- （以上によりアプリケーション実行環境や関連リソースが作成され、（サンプル）アプリケーションが起動する。）
IAM画面
- アクセス管理
  - ユーザーグループ
    - 「グループを作成」
      - ユーザーグループを作成
        
        グループに名前を付ける
        
        ユーザーグループ名：（任意）
        
        許可ポリシーを添付
        
        （以下のマネージドポリシーを選択）
        
        AWSElasticBeanstalkManagedUpdatesCustomerRolePolicy
        
        AWSElasticBeanstalkWebTier
        
        「ユーザーグループを作成」
  - ユーザー
    - 「ユーザーの作成」
      - ユーザーの詳細を設定
        
        ユーザー名：（任意）
        
        「次へ」
      - 許可を設定
        
        許可のオプション：「ユーザーをグループに追加」を選択
        
        ユーザーグループ：（前段で作成したユーザーグループを選択）
        
        「次へ」
      - 確認して作成
        
        「ユーザーの作成」
    - （作成したユーザーのリンクを選択）
      - 「セキュリティ認証情報」タブ
        
        アクセスキー
        
        「アクセスキーを作成」
        
        主要なベストプラクティスと代替案にアクセスする
        
        ユースケース：「AWSの外部で実行されるアプリケーション」選択
        
        「次へ」
        
        説明タグを設定
        
        「次へ」
        
        アクセスキーを取得
        
        （以下をコピーしてセキュアな保管場所に控える）
        
        アクセスキー
        
        シークレットアクセスキー

GitHub側

GitHubリポジトリ設定画面で、Actions処理からAWS Elastic Beanstalkへのデプロイのために必要な認証シークレットを設定する。

GitHubリポジトリ画面
- Settings
  - Security
    - Secrets and variables
      - Actions
        
        Actions secrets and variables
        
        「Secrets」タブ
        
        Repository secrets
        
        （1つ目）
        
        Name：AWS_ACCESSKEY_ID
        
        Secret：（AWS IAMで作成したアクセスキー）
        
        （2つ目）
        
        Name：AWS_SECRET_ACCESS_KEY
        
        Secret：（AWS IAMで作成したシークレットアクセスキー）

ソース資産対応

Nodeモジュール変更

@sveltejs/adapter-autoを@sveltejs/adapter-nodeに入れ替え

pnpm install @sveltejs/adapter-node
pnpm uninsatll @sveltejs/adapter-auto

.ebextensions/00-install-pnpm.config

Elastic Beanstalk環境でpnpmを導入するためのディレクトリおよびファイルを作成する。

    packages:
      yum:
        git: []
    commands:
      install-pnpm:
        command: "npm install -g pnpm"

.platform/hooks/prebuild/00_pnpm_build.sh

Elastic Beanstalk環境でビルドするためのディレクトリおよびファイルを作成する。またファイルに実行権を付与する。pnpmが導入されていなかった場合に備えて存在しない場合にpnpmを導入している。

#!/bin/sh
set -e
if ! command -v pnpm > /dev/null; then
  npm install -g pnpm
fi
pnpm install
pnpm run build

package.json

.scripts配下に追記（最終行への追加の場合、従来の最終行の行末にカンマを追加）

"start": "node build/index.js"

svelte.config.js

import adapter from '@sveltejs/adapter-auto';

↓

import adapter from '@sveltejs/adapter-node';

修正前

import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
};
export default config;

修正後

import adapter from '@sveltejs/adapter-node';
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      out: 'build'
    }),
    prerender: {
      entries: []
    }
  }
};
export default config;

.github/workflows/deploy.yml

GitHub ActionsにてビルドおよびElastic Beanstalk環境へのデプロイのためのディレクトリおよびファイルを作成する。

NodeのバージョンはElastic Beanstalkアプリケーション作成時のプラットフォーム設定で指定したバージョンに合わせる。
ebコマンドのパラメタはElastic Beanstalkで作成したアプリケーション名、リージョン名、環境名を指定する。

name: Deploy to AWS Elastic Beanstalk
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '22'
      - name: Install pnpm
        run: npm install -g pnpm
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: SvelteKit sync
        run: pnpm run prepare
      - name: Build
        run: pnpm build
      - name: Zip files for deployment
        run: zip -r deploy.zip . -x "*.git*" "node_modules/*"
      - name: Install EB CLI
        run: pip install awsebcli
      - name: Deploy via EB CLI
        run: |
          eb init <Elastic Beanstalkアプリケーション名> --region <Elastic Beanstalkアプリケーション作成リージョン 例：us-east-1> --platform node.js
          eb deploy <Elastic Beanstalk環境名>
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

カスタムドメイン設定

Elastic BeanstalkではHTTPS（TLS/SSL）設定に関する支援機能がありません。HTTPS（TLS/SSL）設定に関しては以下のドキュメントを参照してください。

Elastic Beanstalk環境設定における「サービスアクセスの設定」＞「インスタンスのトラフィックとスケーリングを設定」＞「容量」＞「Auto Scalingグループ」＞「環境タイプ」の選択
- 「単一インスタンス」の場合
  - https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/https-singleinstance-nodejs.html
- 「負荷分散」の場合
  - https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/configuring-https-elb.html

HTTPS（TLS/SSL）設定を行わない場合は以下になります。

DNS側（AWS Route53等）

レコード種別	名前	値
CNAME	<サブドメインのホスト名>	Azure App Service画面の概要＞プロパティ＞ドメイン＞既定のドメインに表示されているFQDN

参考

実行環境停止での費用抑制方法

Elastic Beanstalkではアプリケーションの停止機能が無いため、Beanstalkアプリケーション環境の設定で以下の設定を行うことにより、費用の比較的多くを占めるインスタンス（仮想サーバ）の起動を抑止する。

（アプリケーション環境設定画面）
- インスタンスのトラフィックとスケーリングを設定
  - 容量
    - Auto Scalingグループ
      - 環境タイプ：「負荷分散」選択
    - インスタンス（環境タイプで「負荷分散」を選択すると表示される）
      - 最小値：0
      - 最大値：0

ただし「負荷分散」を選択するとロードバランサーが作成されるため、その費用は単一インスタンスとの比較ではあまり抑制とならない可能性が高い。

一度「負荷分散」を設定すると、「単一インスタンス」に戻してもロードバランサーは存在したまま費用が発生するため注意（別途個別に要削除）。

Azure App Service

ソース資産対応

Nodeモジュール変更

@sveltejs/adapter-autoを@sveltejs/adapter-nodeに入れ替え

pnpm add -D @sveltejs/adapter-node
pnpm remove @sveltejs/adapter-auto

→package.jsonの.devDependencies配下およびpnpm-lock.yamlの対応箇所が変更される。

svelte.config.js

import adapter from '@sveltejs/adapter-auto';

↓

import adapter from '@sveltejs/adapter-node';

package.json

.scripts配下に追記（最終行への追加の場合、従来の最終行の行末にカンマを追加）

"start": "node buid"

Azure App Service / GitHub連携（GitHub Actionsワークフロー生成）

Azure App Service側

Azure App Serviceでのアプリ作成が初回の場合と2つ目以降で画面遷移が異なるため注意

Azure画面の左側メニューにて、「リソースグループ」を選択
- 「作成」
  - 名前：（任意）
  - リージョン：（任意）
Azure画面の左側メニューにて、「App Services」を選択
「＋作成」＞「＋Webアプリ」→「Webアプリの作成」画面
- 「基本」タブ
  - プロジェクトの詳細
    - リソースグループ：（任意：作成したリソースグループを選択）
  - インスタンスの詳細
    - 名前：（任意：Webアプリ名）
    - ランタイムスタック：Node（バージョンは任意）
    - オペレーティングシステム：Linux
    - リージョン：（任意：リソースグループと同一）
  - 価格プラン
    - （任意：無料(Free)プランだとカスタムドメインが構成できないため注意）
- 「確認および作成」＞「作成」
  - デプロイ画面に遷移し、デプロイが完了後にWebアプリリソースに移動
Webアプリ画面
- 左側メニューの「設定」配下にある「構成」を選択
  - 「全般設定」タブ
    - プラットフォームの設定
      - SCM基本認証の発行資格情報：「オン」選択
  - 「保存」＞「続行」
- 左側メニューの「デプロイ」配下にある「デプロイセンター」を選択
  - 「設定」タブ
    - ソース：「GitHub」選択
    - GitHub設定
      - サインインユーザー名：「認可」リンク選択
      - （GitHubドメイン画面ポップアップ：一定時間で自動的に閉じるので注意）
        
        Azure App Serviceに対する認可範囲確認が表示されるので「Authorize AzureAppService」を選択
        
        （2段階認証等）
      - 組織：認証認可したGitHubアカウント名を選択
      - リポジトリ：デプロイ対象GitHubリポジトリ名を選択
      - ブランチ：デプロイ対象GitHubリポジトリのブランチ名を選択
      - ワークフローオプション：「ワークフローの追加」を選択
    - 認証の設定
      - 認証の種類：「基本認証」を選択
  - 「保存」

https://learn.microsoft.com/ja-jp/azure/app-service/deploy-continuous-deployment?tabs=github

GitHub側

GitHubリポジトリ設定画面でAzureパブリッシュプロファイルが連携登録されていることを確認

GitHubリポジトリ画面
- Settings
  - Security
    - Secrets and variables
      - Actions
        
        Actions secrets and variables
        
        「Secrets」タブ
        
        Repository secrets

後述のActions定義内にも同内容の記述あり。

手動設定する場合は、Azureで以下の画面からダウンロードしたファイルの内容をGitHub設定画面に設定。

App Service
- （アプリを選択）
  - 概要
    - 画面上部「発行プロファイルのダウンロード」

Azure App ServiceによってGitHubリポジトリに生成されたActions定義を修正。

リポジトリ中のActions定義ファイルの所在：.github/workflows/<ブランチ名>_<App Serviceアプリ名>.yml

修正前

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App - <アプリ名>

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read #This is required for actions/checkout

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '22.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip
      
      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'gq-title2'
          slot-name: 'Production'
          package: .
          publish-profile: ${{ secrets.<シークレットのID> }}

修正後

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App - <アプリ名>

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read #This is required for actions/checkout

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '22.x'

      - name: npm install, build, and test
        run: |
          npm install -g pnpm
          pnpm install
          pnpm run build 
          pnpm run test 

      - name: Zip artifact for deployment
        run: zip -r release.zip build

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip
      
      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'gq-title2'
          slot-name: 'Production'
          package: ./build
          publish-profile: ${{ secrets.<シークレットのID> }}

カスタムドメイン設定

Azure App Service側

App Service
- （アプリを選択）
  - 概要
    - 「プロパティ」タブ
      - ドメイン
        
        既定のドメイン：（Azureで割り当てられたユニークなドメイン名）
        
        カスタムドメイン：（リンクを選択またはメニューの設定＞カスタムドメイン）
        
        「＋カスタムドメインの追加」（価格プランが無料(Free)プランだと不可）
        
        ドメインプロバイダー：「その他のすべてのドメインサービス」を選択
        
        TLSまたはSSL証明書：「App Serviceマネージド証明書」を選択
        
        TLS/SSLの種類：「SNI SSL」を選択
        
        ドメイン：（割り当てたいカスタムドメインを入力）

DNS側（AWS Route53等）

サブドメインの場合の設定は以下

レコード種別	名前	値
CNAME	<サブドメインのホスト名>	Azure App Service画面の概要＞プロパティ＞ドメイン＞既定のドメインに表示されているFQDN
CNAME	Azureのカスタムドメイン追加時に提示されたCNAMEの「ホスト」（ht<サブドメインのホスト名>）	Azureのカスタムドメイン追加時に提示されたCNAMEの「値」（既定のドメインに表示されているFQDNと同じ）
TXT	Azureのカスタムドメイン追加時に提示されたTXTの「ホスト」（asuid.ht<サブドメインのホスト名>）	Azureのカスタムドメイン追加時に提示されたTXTの「値」（16進数文字列）

Azure画面でのTXTの検証がエラーになってもCNAME検証がOKであればよい（アプリ再起動で解消する可能性あり）

参考としてルートドメインに割り当てる場合は以下のDNS設定となる。

レコード種別	名前	値
A	@	Azure提示のIPアドレス
TXT	@	Azure提示のカスタムドメインの検証ID

以上によりAzure側にDNS設定が認識されると、カスタムドメインの所有権が検証された登録完了する。

サーバ証明書もAzureのApp Service Managed Certificate (Let’s Encrypt)で発行される（「設定」＞「証明書」）。

参考

実行環境停止での費用抑制方法

デプロイによる費用の比較的多くを占めるのがWebアプリインスタンス（仮想サーバ）となる。Webアプリ停止中でもその費用が発生するため、費用を抑制するためにはWebアプリインスタンスの価格プランを無料にする必要がある。ただし価格プランを無料にするためにはカスタムドメインの設定も解除する必要がある。

Vercel

GitHubリポジトリからVercelへのデプロイ連携設定

Vercel側

Team画面
- Overview（Project一覧画面）
  - 「Add New…」
    - 「Project」
      - Import Git Repository
        
        Adjust GitHub App Permissionsリンク（GitHub画面ポップアップ）

GitHub側

ポップアップされるGitHub画面で認証すると以下の画面に遷移

GitHub設定画面
- Integrations
  - Applications
    - Vercel設定画面
      - Repository access
        
        「All repositories」または「Only select repositories」を選択
        
        後者の場合は「Select repositories」プルダウンから対象リポジトリを選択し「Save」
        
        「GitHub Installation Completed」の画面に遷移（放っておくと自動的にクローズしてVercel側の「Import Git Repository」画面に選択リポジトリが表示される）

Vercel側

Import Git Repository画面
- 対象リポジトリを「Import」
  - New Project画面で各種項目を適宜確認し「Deploy」：Project Nameに大文字は使用できない（URLに展開されるため）ので注意
  - Congratulations!画面で「Continue to Dashboard」

カスタムドメイン設定

Vercel側

プロジェクト画面
- Settings
  - Domains
    - 「Add Domain」で画面ポップアップ
      - 入力項目にカスタムドメインFQDNを入力して「Save」
    - 入力ドメインが追加され、ドメイン付近に表示される「Invalid Configuration」の隣にある「Learn more」を展開
    - 「DNS Records」タブにDNS設定例が提示されるのでDNSを設定する。

DNS側（AWS Route53等）

レコード種別	名前	値
CNAME	Vercel Domains画面のDNS設定例に表示されているNameの値	Vercel Domains画面のDNS設定例に表示されているValueの値

少し時間をおくと自動的にVercel Domains画面の「Invalid Configuration」が「Valid Configurations」に変わり完了。

Comments

Join the conversation on Bluesky

SvelteKitアプリをGitHubリポジトリから各種PaaSへデプロイ

当記事での前提・おことわり

AWS Amplify

ソース資産対応

Nodeモジュール導入

svelte.config.js

AWS Amplify / GitHub連携（GitHub Actionsワークフロー生成）

AWS Amplify側

YMLファイル編集内容

修正前

修正後

GitHub側

カスタムドメイン設定

AWS Amplify側

DNS側

AWS Elastic Beanstalk

AWS Elastic Beanstalk / GitHub連携（GitHub Actionsワークフロー生成）

AWS Elastic Beanstalk側

GitHub側

ソース資産対応

Nodeモジュール変更

.ebextensions/00-install-pnpm.config

.platform/hooks/prebuild/00_pnpm_build.sh

package.json

svelte.config.js

修正前

修正後

.github/workflows/deploy.yml

カスタムドメイン設定

DNS側（AWS Route53等）

参考

実行環境停止での費用抑制方法

Azure App Service

ソース資産対応

Nodeモジュール変更

svelte.config.js

package.json

Azure App Service / GitHub連携（GitHub Actionsワークフロー生成）

Azure App Service側

GitHub側

修正前

修正後

カスタムドメイン設定

Azure App Service側

DNS側（AWS Route53等）

参考

実行環境停止での費用抑制方法

Vercel

GitHubリポジトリからVercelへのデプロイ連携設定

Vercel側

GitHub側

Vercel側

カスタムドメイン設定

Vercel側

DNS側（AWS Route53等）

Comments

おすすめ

WordPressプラグインAutoblue導入メモ

シェルスクリプト実装版Bluesky CLI (Bluesky in the shell)公開

Windows標準コマンドによるハードディスク情報消去

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル