こんにちは!オルターブースの清島です。
今回は「オルターブース Advent Calendar 2023」14日目の投稿として、Next.js 14をAzureにデプロイするための情報をお届けしたいと思います! adventar.org
前提
Next.jsはメジャーバージョン13から「App Router」と呼ばれるルーティング機能を設計しました。
これまでの「Page Router」からファイルパスやレンダリングなどの仕組みが大きく変わり、より効果的にアプリケーションを開発することができるようになります。
このApp Routerを採用したNext.jsを使ってアプリケーションを開発・デプロイしたいですよね?
私の場合ですが、Next.jsをAzureにデプロイすることを考えたとき、Azure Static Web Appsを使うことを最初に検討しました。(公式ドキュメントにもデプロイできるとの記載があります)
learn.microsoft.com
実際にデプロイも試してみたのですが、どうやら2023/12時点では「Page Router」にしか対応していないようです。
そこで「App Router」を使った(せっかくなら最新の)Next.jsアプリケーションをAzureで動かせないかと思い、Azure Web Appsを使ったデプロイ方法を以下にまとめました!
必要なもの
- Node.js(今回は2023/12時点のLTSバージョン v20.10.0を使います)
- Azureサブスクリプション
Next.js 14アプリケーションの作成
ターミナルにて、任意のディレクトリで以下のコマンドを実行しましょう。
npx create-next-app@latest
「どんなプロジェクト名にしますか?」や「TypeScriptを使いますか?」といったプロジェクトの設定をいくつか質問されますが、今回は以下の通りにしました。
プロジェクトの作成が完了すると、入力したプロジェクト名のディレクトリが追加され、その中にNext.jsアプリケーションのひな型が自動で作成されます!(バージョンは2023/12時点で最新のv14.0.4です。)
試しに以下のコマンドを実行し、出力されたURLにアクセスしてみましょう!Next.jsのページが表示されたら成功です!
npm run dev
早速デプロイしてみる
ローカルで動くことがわかったので、このままAzureにデプロイしてみましょう!
今回はGitHubリポジトリを用いたデプロイを行いますので、先ほど作成したアプリケーションを任意のGitHubリポジトリにpushします。
続いて、Azure Portalから「Web アプリ」で検索し、Azure Web Appsリソースの作成を行います。
今回は下記の設定で作成しました。
- 公開:コード
- ランタイム スタック:Node 20 LTS
(Next.js 14はNode 18.17以降でないと動作しないので注意!) - オペレーティング システム:Linux
- 地域:Japan East
- Linux プラン:新規作成
- 価格プラン:Free F1
リソース作成後、そのリソースの「デプロイセンター」に移動します。
「デプロイセンター」ではGitHubなどに上げているソースコードを指定することで、そのコードをデプロイする仕組みをよしなに作ってくれます!
今回は、先ほどGitHubリポジトリにpushしたソースコードをポチポチと選びます。
設定できたら忘れずに「保存」を押しましょう!(保存しないと何も起きません)
すると、選んだGitHubリポジトリにソースコードをデプロイするためのワークフローファイルが追加され、GitHub Actionsが起動します。
完了すると緑色のチェックマークがつきます。
これでデプロイされたはずなので、早速デプロイ先のURLにアクセスしてみると...
そうなんです、これだけではうまく動いてくれません。
Azure Web Appsにデプロイするための追加設定
Azure Web Apps上でもアプリケーションが動くようにするため、以下の変更を行いましょう。
Azure Web Appsリソースの設定を変更
Azure Web Appsリソースの「構成」から、下記の設定を行います。
- 「アプリケーション設定」で次の環境変数を追加
- NODE_ENV: production
- PORT: 3000
- 「全般設定」で次のスタートアップコマンドを入力
node server.js
設定できたら「保存」を押しましょう。
next.config.jsにoutput: 'standalone'
を追加
次はソースコードの設定ファイルを編集します。
プロジェクトフォルダの直下にnext.config.jsというファイルがあると思います。これを下記のコードに書き換えましょう。
/** @type {import('next').NextConfig} */ const nextConfig = { output: 'standalone' } module.exports = nextConfig
ワークフローファイルで実行する処理を編集
また、git pull origin main
で最新のリモートmainブランチをプルすると、.github/workflowsディレクトリにワークフローファイル(main_{Azure Web Appsのリソース名}.yml
)が追加されると思います。
このワークフローファイルを少し編集します。
- ➀「npm install, build, and test」ステップの後に下記を追加
- name: Copy artifact for deployment job run: | mkdir deploy cp -r ./.next/standalone/. ./deploy cp -r ./public ./deploy cp -r ./.next/static/. ./deploy/.next/static
インデントに気をつけつつ、以下のように追加してみてください。
- ➁「Zip artifact for deployment」ステップの
run: zip release.zip ./* -r
をrun: zip release.zip ./deploy -r
に変更 - ➂「Deploy to Azure Web App」ステップの
package: .
をpackage: ./deploy
に変更
最終的に下記のような内容になっていればOKです!
# 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 - next14-on-azure20231211 on: push: branches: - main 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 --if-present npm run test --if-present - name: Copy artifact for deployment job # 変更点➀ run: | mkdir deploy cp -r ./.next/standalone/. ./deploy cp -r ./public ./deploy cp -r ./.next/static/. ./deploy/.next/static - name: Zip artifact for deployment run: zip release.zip ./deploy -r # 変更点➁ - name: Upload artifact for deployment job uses: actions/upload-artifact@v3 with: name: node-app 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@v3 with: name: node-app - name: Unzip artifact for deployment run: unzip release.zip - name: 'Deploy to Azure Web App' id: deploy-to-webapp uses: azure/webapps-deploy@v2 with: app-name: 'next14-on-azure20231211' slot-name: 'Production' package: ./deploy # 変更点➂ publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_hogehoge }}
再びAzure Web Appsにデプロイ
以上の変更をリモートのmainブランチにpushすると、自動でビルド・デプロイの処理がGitHub Actions上で実行されます。
処理が完了したのを確認し、再びデプロイ先のURLにアクセスすると...
無事Next.js 14(App Router)のページが表示されました!
まとめ
Next.js 14(App Router)アプリケーションをAzureにデプロイするためには以下の対応が必要です。
- 2023/12時点でAzure Static Web AppsはPage Routerのみ対応しているようなので、App Routerを使用したNext.jsアプリケーションをデプロイしたい場合はAzure Web AppsのNode.js環境を使う
- 作成したAzure Web Appsリソースの構成から以下の設定を追加する
- 「アプリケーション設定」で次の環境変数を追加
- NODE_ENV: production
- PORT: 3000
- 「全般設定」で次のスタートアップコマンドを入力
node server.js
- 「アプリケーション設定」で次の環境変数を追加
- next.config.jsに
output: 'standalone'
を追加 - ワークフローファイルに次の変更を追加
- 「npm install, build, and test」ステップの後に下記を追加
- name: Copy artifact for deployment job run: | mkdir deploy cp -r ./.next/standalone/. ./deploy cp -r ./public ./deploy cp -r ./.next/static/. ./deploy/.next/static
- 「Zip artifact for deployment」ステップの
run: zip release.zip ./* -r
をrun: zip release.zip ./deploy -r
に変更 - 「Deploy to Azure Web App」ステップの
package: .
をpackage: ./deploy
に変更
サービス一覧 www.alterbooth.com cloudpointer.tech www.alterbooth.com