Azure への JavaScript アプリのデプロイの概要

JavaScript ベースのアプリを Azure にデプロイするには、HTTP エンドポイント経由で提供されるファイルまたはファイルのセットを Azure に移動します。 ファイルを移動するプロセスをデプロイと呼びます。

前提 条件

• Azure サブスクリプション - 無料アカウントを作成します。
• Node.js LTS
• GitHub リポジトリからデプロイする予定の場合は、GitHub アカウント。

デプロイ ツール

Azureには、さまざまなニーズに合ったさまざまな展開ツールが用意されています。 一般的な方法を次に示します。

特定のサービスに基づいて、他のデプロイ ツールが存在します。 たとえば、Azure App Service では、さまざまな展開ツールがサポートされています。

• ZIP ファイルから
• FTP を使用
• Dropbox または OneDrive
• ローカル Git
• cURL
• SSH

最初にデプロイするためにそのメソッドを使用しなかった場合でも、指定された任意のメソッドを使用して App Service に再デプロイできます。 メソッドを切り替える場合は、再デプロイする前に何らかの構成が必要になる場合があります。

JavaScript アプリ用の Azure ホスティング サービス

まず、アプリに最適なホスティング サービスを選択します。 サービスを選択したら、推奨されるデプロイ パスを使用して、適切なチュートリアルにすばやくアクセスします。

適切なホスティング サービスの選択の詳細については、「 Azure でのアプリケーションのホスティング」を参照してください。

ツールを使用した展開方法

ホスティング サービスを選択したら、作業方法に合ったデプロイ方法を選択します。

• デプロイ前のビルド : 複雑なビルドまたは長いビルドの場合は、アプリケーションを zip ファイルにパッケージ化してデプロイします。 デプロイ パッケージを使用すると、デプロイ前にビルドを制御およびテストできます。
• デプロイ時のビルド: より単純なビルドの場合は、デプロイ時に Azure 提供の環境変数 SCM_DO_BUILD_DURING_DEPLOYMENT=true を使用してアプリをビルドします。

App Service にデプロイする場合は、他のデプロイ方法も使用できます。

Azure App Service で デプロイ スロットを使用すると、ステージング環境と運用環境用に個別の環境を作成できます。 スロットを使用すると、運用スロットとスワップする前にステージング環境でアプリをテストできるため、スムーズでエラーのないデプロイが保証されます。 デプロイ スロットの詳細を確認します。

デプロイの目的を組み合わせてデプロイ スロットを使用しないでください。 すべてのデプロイ スロットは App Service を共有するため、トラフィック パターンとすべてのスロットの意図された使用が同じであることを確認する必要があります。 必要に応じて、テスト環境またはステージ環境をホストする場合、それは別個のアプリサービスであるべきです。

Azure Developer CLI を使用したデプロイ

Azureリソースをプロビジョニングしてアプリをデプロイするための最も高速なエンド ツー エンド パスについては、Azure Developer CLI (azd) から始めます。

Azure Developer CLI を使用すると、アプリをAzureにデプロイするプロセスが簡略化されます。 次の手順に従います。

1. Azure Developer CLI インストールします。

2. プロジェクトで 使用するのと同じリソースの多くを使用する既存のプロジェクトを検索します。

3. 独自のプロジェクトのインフラストラクチャ テンプレートとして使用するために、プロジェクトのローカル バージョンを初期化します。

4. リソースを作成し、コードを Azure にデプロイします。

   azd auth login
   azd init --template <template-name>
   azd up
   

インフラストラクチャ、デプロイ、反復可能な環境に 1 つのワークフローが必要な場合は、このパスを使用します。

Visual Studio Code を使用したデプロイ

エディターでガイド付きデプロイ フローが必要な場合は、Visual Studio CodeのAzure拡張機能を使用します。

Visual Studio Codeを使用して App Service アプリをデプロイまたは再デプロイするには、次の手順を実行します。

1. Azure App ServiceやAzure Functionsなど、関連するAzure拡張機能をインストールします。

2. Azure エクスプローラーを開きます。 プライマリ サイド バーの Azure アイコンを選択するか、キーボード ショートカット ([Shift] + Alt + A) を使用します。

3. リソース グループで、サブスクリプションとサービスを選択します。

4. サービスを右クリックし、[Deploy to Web App]\(Web アプリにデプロイする\)選択します。.

   

サービス固有の次の手順

ホスティング サービスとデプロイ方法を選択したら、アプリに一致するサービス固有のパスに進みます。

Azure Static Web Apps へのデプロイ

Azure Static Web Apps は、JavaScript フレームワークで構築された最新の Web アプリケーションに最適です。 デプロイするには:

1. Visual Studio Code 用 の Azure Static Web Apps 拡張機能 をインストールします。
2. アプリケーションをローカルにビルドして、期待どおりに動作するようにします。
3. Visual Studio Codeで、Azure エクスプローラーを開き、Azure Static Web Appsを見つけます。
4. サブスクリプションを右クリックし、[ 静的 Web アプリの作成] を選択します。
5. プロンプトに従って GitHub リポジトリに接続します。 Azure によって GitHub Actions ワークフローが自動的に作成されます。
6. リポジトリに変更をプッシュして、自動デプロイをトリガーします。

詳細については、「 Web アプリを Azure Static Web Apps にデプロイする」を参照してください。

Azure App Service へのデプロイ

Azure App Serviceは、Web アプリまたは API のマネージド ホスティングが必要な場合に適しています。 azd、Visual Studio Code、Azure CLI、またはGitHub Actionsを使用してデプロイできます。

最初にデプロイするためにそのメソッドを使用しなかった場合でも、使用可能な任意のメソッドを使用して App Service に再デプロイできます。 メソッドを切り替える場合は、再デプロイする前に何らかの構成が必要になる場合があります。

サービス固有のデプロイ パスについては、次のいずれかのチュートリアルから始めます。

• Node.js および MongoDB Web アプリを Azure App Service にデプロイする
• GitHub Actions を使用して App Service にデプロイする
• ZIP パッケージから App Service にデプロイする

Azure CLI でのデプロイ

Azure CLIを使用して JavaScript アプリをデプロイするには、次の手順に従います。

1. まだインストールしていない場合は、Azure CLIをインストールします。

2. Azure アカウントにサインインします。

   az login
   

3. 既存の App Service プランと App Service を作成または使用します。

   az appservice plan create --name <plan-name> --resource-group <resource-group> --sku B1 --is-linux
   az webapp create --resource-group <resource-group> --plan <plan-name> --name <app-name> --runtime "NODE|20-lts"
   

4. ZIP ファイルまたはローカル Git リポジトリからアプリケーション コードをデプロイします。

   ZIP デプロイの場合:

   az webapp deployment source config-zip --resource-group <resource-group> --name <app-name> --src <path-to-zip>
   

   ローカル Git デプロイの場合:

   az webapp deployment source config-local-git --resource-group <resource-group> --name <app-name>
   az webapp config appsettings set --resource-group <resource-group> --name <app-name> --settings DEPLOYMENT_BRANCH='main'
   git remote add azure <git-url>
   git push azure main
   

GitHub Actions を使用したデプロイ

GitHub Actionsは、GitHub リポジトリに変更をプッシュするたびにデプロイ プロセスを自動化します。 Azure展開のGitHub Actionsを設定するには:

1. GitHub リポジトリに、.github/workflows/ ディレクトリが存在しない場合は作成します。

2. デプロイ手順を定義するワークフロー ファイル ( azure-deploy.yml など) を作成します。

3. Azureで認証するには、Azure ログイン アクションを使用します。 推奨： 資格情報をシークレットとして格納する代わりに、セキュリティを強化するために OpenID Connect (OIDC) を使用します。

   オプション A: OpenID Connect (推奨)

   permissions:
     id-token: write
     contents: read
   
   - name: Azure Login
     uses: azure/login@v2
     with:
       client-id: ${{ secrets.AZURE_CLIENT_ID }}
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

   セットアップ手順については、「GitHub Actionsを使用して OpenID Connect を構成する」を参照してください。

   オプション B: 資格情報ベースの認証 (レガシ)

   - name: Azure Login
     uses: azure/login@v2
     with:
       creds: ${{ secrets.AZURE_CREDENTIALS }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

4. ホスティング サービス (App Service、Static Web Apps、または Container Apps) に適したデプロイ手順を追加します。

5. ワークフロー ファイルをコミットしてリポジトリにプッシュし、自動デプロイをアクティブにします。

詳細なガイダンスについては、「GitHub Actionsを使用したデプロイ」を参照してください。

Azure Functionsにデプロイする

Azure Functionsは、イベントドリブン JavaScript アプリとサーバーレス API に適しています。

Visual Studio Codeからデプロイするには:

1. Azure Functions拡張機能をインストールします。
2. Azure エクスプローラーを開き、Azure サブスクリプションを選択します。
3. 関数アプリを作成または選択します。
4. 拡張機能コマンドを使用して、ローカル プロジェクトを発行します。

サービス ガイダンスについては、Azure Functionsドキュメントと Functions の概要を参照してください。

Azure Container Apps へのデプロイ

Azure Container Apps は、JavaScript アプリケーション用のサーバーレス コンテナー ホスティングを提供します。 デプロイするには:

1. Docker を使用してアプリケーションをコンテナー化します。 プロジェクト ルートに Dockerfile を作成します。
2. コンテナーをローカルでビルドしてテストします。
3. コンテナー イメージを Azure Container Registry にプッシュします。
4. Azure Container Apps 拡張機能または Azure CLI を使用して、コンテナー アプリを作成してデプロイします。

完全なガイドについては、 Azure Container Apps の JavaScript の概要に関するページを参照してください。

ビルド ステップ

サービスとデプロイのパスを選択したら、ビルドを実行するタイミングを決定します。

アプリケーションの複雑さとデプロイのニーズに応じて、デプロイの前またはデプロイ中に JavaScript アプリをビルドすることを選択できます。

• デプロイ前のビルド : 複雑なビルドまたは長いビルドの場合は、アプリケーションを zip ファイルにパッケージ化してデプロイします。 デプロイ パッケージを使用すると、ビルド プロセスを制御でき、デプロイ前にテストできます。
• デプロイ時のビルド: ビルドを簡単にするには、Azure提供される環境変数SCM_DO_BUILD_DURING_DEPLOYMENT=trueを使用して、デプロイ時にアプリをビルドします。

デプロイ スロット

App Service アプリを実行し、より安全なリリース プロセスが必要になった後は、デプロイ スロットを使用します。

Azure App Service で デプロイ スロットを使用すると、ステージング環境と運用環境用に個別の環境を作成できます。 スロットを使用すると、運用スロットとスワップする前にステージング環境でアプリをテストし、スムーズでエラーのないデプロイを実現できます。

デプロイの目的を組み合わせてデプロイ スロットを使用しないでください。 すべてのデプロイ スロットは App Service を共有するため、トラフィック パターンとすべてのスロットの意図された使用方法が同じであることを確認する必要があります。 ホストされたテスト環境またはステージ環境が必要な場合は、別の App Service を使用します。

Azure でホストされている環境に接続する

• ホストされた環境に手動でまたは不定期にアクセスする場合は、Azure でホストされている環境でファイルを表示する方法を参照してください。
• 自動または一貫性のあるアクセス については、デプロイ方法の 1 つを設定する手順を実行することを検討してください。

Azure でホストされている環境でファイルを表示する

ホストされている Azure Web アプリまたは関数アプリでファイルをすぐに表示するには、いくつかの方法があります。 ホストされているリソースでスロットを使用している場合は、ファイルを表示する前に、正しいスロットにいることを確認する必要があります。

• Azure portal でファイルを表示するには、ホスティング リソースの開発ツール の下にある コンソールを選択します。

• VS Code 拡張機能でファイルを表示する - アクティビティ バーのAzure アイコンを選択します。 [リソース] セクションで、サブスクリプションとサービスを選択します。 Files ノードには、リモート ファイルのビューが表示されます。

  • Azure App ServiceとAzure Functionsの両方の拡張機能は、リモート ファイルのビューを提供します。

  

Azure portal で HTTP エンドポイントを表示する

Azure portal のサービスの [概要] ページから HTTP エンドポイントを表示します。

関連コンテンツ

• Visual Studio Code を使用した配置のチュートリアル
• Azure でのアプリのホスティング
• Azure Static Web Apps のドキュメント
• Azure Container Apps のドキュメント
• Azure App Service のドキュメント
• Azure Functions のドキュメント