Alternative Architecture DOJO

オルターブースのクラウドネイティブ特化型ブログです。

トップ > Azure App Service > Next.js 14をAzureにデプロイする！

Next.js 14をAzureにデプロイする！

Azure App Service アドベントカレンダー2023 Next.js

こんにちは！オルターブースの清島です。

今回は「オルターブース 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