🧶

Azure App Service に Next.js をデプロイする方法

2023/03/19に公開

AzureでNext.jsを動かしたい!Static Web Appsが簡単そう!
え、100MBのサイズ制限に引っかかてデプロイできないんだけど😂

な人向けに App Service にNext.jsをデプロイする方法 を共有します

Next.jsアプリをGitHubへpush

npx create-next-app でNext.js with TypeScriptの雛形を作成

% npx create-next-app

What is your project named? … my-app
Would you like to use TypeScript with this project? … Yes
Would you like to use ESLint with this project? … Yes
Would you like to use `src/` directory with this project? … Yes
Would you like to use experimental `app/` directory with this project? … No
What import alias would you like configured? … @/*
.
.
.
Success! Created my-app at ./my-app



npm run build && npm run start で下記ページが表示されていればOK
GitHubに my-app をpushする

Azure App ServiceへNext.jsをデプロイ

App Serviceの作成

App Service へアクセスして作成をクリック

ランタイムスタックNode 16 LTS とし、それ以外の項目は適宜入力
次: デプロイ をクリック



継続的デプロイ を有効化し、 組織 リポジトリ ブランチ を先ほどpushした my-app となるよう選択。(これやるだけでGitHub Actionsファイルが自動生成されるが、一癖あり...(詳細は後述))
GitHub アカウントを連携してない場合は、 アカウントの... をクリックして連携する
入力できたら 確認および作成 をクリック



問題なければ 作成 をクリック



こんな感じの画面に遷移



しばらく待つと...

と表示されてデプロイが完了するので リソースへ移動 をクリック

GitHub Actionsの設定

ここで、GitHubのmy-appのリポジトリへ行き、Actionsを覗くと...

うまく動いてそうに見える
が、これ実はデプロイ完了にめちゃくちゃ時間かかります😭(40分ぐらい?)
原因はファイル数が多すぎるかららしいので、ここを参考にzip化してデプロイする方式に切り替える
というわけでデプロイをキャンセルし自動生成されたyamlファイル(.githubの中にある)を書き換える

.github/workflows/xxx.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 - my-app

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

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

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
+         rm -rf ./.next/cache

+     - name: Zip artifact for deployment
+       run: zip release.zip ./* .next -qr

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

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

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

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'my-app'
          slot-name: 'Production'
          publish-profile: ${{ secrets.hoge }}
-         package: .
+         package: release.zip

+     - name: Delete zip file
+       run: rm release.zip



zip方式でやる場合、 SCM_DO_BUILD_DURING_DEPLOYMENT=true で環境変数を設定しないと module not found エラーが発生するらしいので設定する

構成 -> アプリケーション設定 -> 新しいアプリケーション設定



名前 -> SCM_DO_BUILD_DURING_DEPLOYMENT
値 -> true
OK を押す



ついでに スタートアップコマンドnpm run start に設定し、保存して再起動する



ここまでの変更内容をpushするとGitHub Actionsが走り出すので待つ。大体5-10分ぐらいで完了する

GitHub Actionsのデプロイが完了すると、URLが表示されているのでクリック
いつものやつが表示されたら完成!👏

参考

https://zenn.dev/reifujimura/articles/deploy-nextjs-to-azure-appservice
https://qiita.com/kurab/items/46352a65ee946eee9c76
https://fwywd.com/tech/deployment-by-azure-app-service-for-nodejs

Discussion