Azure App Service に Next.js をデプロイする方法
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
の中にある)を書き換える
# 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が表示されているのでクリック
いつものやつが表示されたら完成!👏
参考
Discussion