Next.js＋Docker環境をAzureにデプロイ

案件でAzureのデプロイに対応する必要が出てきた。
Next.jsで作成したアプリケーションをDockerコンテナで管理し、それをデプロイする形にする必要が出てきそうなのでそれに対応するためNext.js＋DockerによるAzureデプロイ。加えて、github actionsを使用した自動デプロイ環境の構築手順を残すことにした。

他の従量課金制ホスティングサービス（AWS、GCP等）と比べて使いやすさはどれほど違ってくるのか話せたら良いなと思う。

ContainerRegistryの構築

ContainerRegistryとは

Dockerコンテナのイメージを管理しておくためのサービス。
AWSで言うところのECRに近いものっていうイメージでいいと思います。
AzureでDockerコンテナを使用するためにはこのContainerRegistryでイメージを管理する必要がある。

ContainerRegistryの作成

• レジストリ作成
  レジストリ情報を入力して作成
  
  レジストリのアクセスキーで管理者ユーザーを選択。
  アクセスキーを使用してGitリポジトリ内のイメージをレジストリに送るので、リポジトリで必要になる。
  

ContainerRegistry使用準備

• GithubActions用のyml作成
  ymlファイルは下記のような形になります。

name: Build & Push to Azure Container Registry
on:
  push:
    branch: main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout repository
      uses: actions/checkout@main

    - name: Login to Azure Container Registry
      uses: azure/docker-login@v1
      with:
        login-server: ${{ secrets.ACR_ENDPOINT }}
        username: ${{ secrets.ACR_USERNAME }}
        password: ${{ secrets.ACR_PASSWORD }}

    # AzureContainerRegistryへのイメージのビルドとプッシュ
    - name: Build & Push
      uses: docker/build-push-action@v2
      with:
        push: true
        tags: ${{ secrets.ACR_ENDPOINT }}/setchnextjsapp:latest
        file: ./Dockerfile

GitリポジトリにContainerRegistry情報登録

GitのリポジトリとContainerRegistryの紐付けを行う必要があるためリポジトリの設定でシークレットキーの登録などのContainerRegistry情報登録が必要となります。
GithubActions用のymlで使用する

ACR_ENDPOINT
ACR_USERNAME
ACR_PASSWORD

をここで設定します。

• キーの登録
  キー登録はリポジトリのSettings > Secrets and variables > New repository secret から登録できる

DockerイメージのPush

• Dockerfile作成
  まずはDokcerfileを下記のように作成

FROM node:20-alpine

WORKDIR /usr/app

COPY . .

RUN npm ci

RUN npm run build

CMD [ "npm", "start" ]

Dockerfileを作成したらGitのリポジトリにPushします。
この時点でGithubActionsの確認するとジョブが走っているのが確認できます。

• DockerイメージがPushされているか確認
  AzureのContainerRegistory管理画面でイメージが問題なくPushされているか確認します。
  Registory > レジストリ に移動して下記画像のようになってればOKです。
  

WebAppの作成

• アプリの新規作成
  ここまでいけたらAppの作成を行います。
  サービスからWebAppを選択し、公開設定はDockerコンテナを選択してAppを作成します。
  

• DeployCenterの作成
  Appの作成のみではデプロイは完了されないのでDeployCenterの作成を行う。
  WebApp > デプロイセンター で下記のように設定を行う。

ソース：ContainerRegistry
レジストリソース：AzureContainerRegistry
レジストリ：対象となるレジストリを選択
イメージ：対象となるイメージを選択
タグ：対象となるタグを選択
継続的デプロイ：オン

これで自動デプロイに対応できます。

デプロイ完了

デプロイセンター内からログを確認し、デプロイが完了したらOKです。

デプロイ先URL：https://next-container-deploy-app.azurewebsites.net/

Azureの良いなと思ったポイント

• そこそこ調べながら進める必要はあるが、GUIでポチポチするだけでデプロイが完了するのでわかりやすいかも
• 全てのサービスでは無いが、メインとなるサービスであるWebAppなどには無料プランも用意されているので動作検証や学習する際のハードルが低い
• Dockerコンテナを使用する場合、フリープランでもデプロイがそこそこ早いと感じた（Gitのリポジトリから直接デプロイする方式だと遅いけど。。。）
• FAQページが充実している。

Azureの悪いと思ったポイント

• サービスの種類が多く、どのサービスを選定すれば良いのかわかりにくい。
• GUIの数が多く、利用したい機能がどのボタンを辿ればいいのかわかりにくい。
• AWSに比べて情報量が少ない

Gitのリポジトリです
https://github.com/monomonosu/azure-next-container-deploy

参考資料
https://www.youtube.com/watch?v=xm14u2_YY9E