概要

Azure App Serviceのデプロイスロットを使用し、運用環境とステージング環境を使い分けられるようにする。以下の操作ができるようになることを目指す。

デプロイスロットを使用した、固有ホスト名を持つアプリのデプロイ
運用環境とステージング環境のスワップ

デプロイスロットとは

デプロイスロットは、固有のホスト名を持つライブアプリです。アプリのコンテンツと構成の要素は、運用スロットを含む 2 つのデプロイスロットの間でスワップすることができます。

1つのApp Serviceに複数の環境をデプロイすることが出来る機能。これにより、本番環境のリソース上にステージング環境を配置することが出来る。

デプロイスロットを使用する場合は、使用しているApp Serviceプランのサービスレベルが Standard、Premium、または Isolatedである必要があります。

参考：MS Learn ステージング環境を設定する

デプロイスロットを使用してみる

準備

Azure上でApp Serviceの構築

まずはPremiumでリソースを作成

Nuxtアプリケーションのデプロイ

続いてローカル上でNuxtアプリケーションを作成、App Serviceにデプロイ

アクセスを確認

デプロイスロットの作成

Azure Portalから[デプロイスロット] > [追加]でスロット追加ドロワーを表示、
下記の項目を入力して作成

項目	説明
Name	スロットを識別する名前。本スロット上のサイトはホスト末尾にNameが追加される。
Clone settings from:	デプロイするソース。今回はオリジナルのソースをそのまま流用した。

作成後、スロット一覧に作成したステージング用デプロイが追加される

ステージング用デプロイを押下するとApp Serviceのリソースページが表示される

ソースコードを一部修正しデプロイ

今回GitHub Actionsを使用し継続的デプロイの設定をしていたため、
本番用ワークフローを元にステージング用ワークフローを作成

ステージング用ワークフロー (長いため省略)

staging-deploy.yml

name: Build and deploy Node.js app to Azure Web App

on:
  push:
    branches:
      - staging # ステージングスロットにデプロイする用のブランチを指定
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

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

      - name: npm install, build, and test
        run: |
          npm install
          npm run build
  
      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: .output
          include-hidden-files: true

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'staging' # デプロイ先をstagingに修正
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'sample-app'
          slot-name: 'staging' # 同様にデプロイ先をstagingに修正
          package: .
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX }} # デプロイ先のprofileに修正

実際に表示されていることを確認

雑に作成したページがステージング用URLに表示されていることが確認できる

スワッピングをしてみる

Portal操作

Azure Portalのデプロイスロットのページから[Swap]を選択し、ドロワーを表示
Sourceにステージング用スロットを、Targetに本番用スロットを設定し、[Start Swap]を押下

入れ替わっている事を確認

本番用のURLに雑ページが、ステージング用のURLにデフォルトページが表示されていることを確認

まとめ

少し前まで検証用のサーバーとして別リソースを作成していたため、今回デプロイスロットという便利な機能を知ることが出来て良かったです。
アプリケーション設定等も環境別に使い分けられそうなので、更に調べていきたいです。