App Service にGithubActionsでNext.jsをデプロイする

はじめに

Next.js と Functions, document DB を利用するシステムを検討する際にCI/CDでシステムをデプロイしたいと考えました。Azure App Service, GithubActions を利用してCD/CD環境を構築した際のメモです。この環境選定に特に拘りはないですが、認証規格を含めたセキュリティの確保や規模の拡張性を含めた運用性を考慮し、Azure API Management + FaaSを利用できる構成としました。

とはいいつつ個人の検証段階においては無料でできる範囲で環境構築したのでタイトルにもある通り、この記事の手順では以下の3点を記載しています。

• Next.js をPaaS (Azure App Service) で起動する
• API は FaaS (Azure Function) で作成する
• Github Actions でビルド・デプロイする

同じような記事は他の方も作成されているのですが、ソフトウェアバージョンの更新などの影響なのか、私の環境ではそのままでは動作しなかったのでメモとして残しています。

その他メモ

• 拡張性や柔軟性という観点では kubernetes や仮想マシンを利用する方が利がありますが、IaaS部分の運用や設計は今回負荷軽減の観点から避けたいという思いからApp Service, Functions にしています。
• App Service のCI/CD 設定はコード管理をgithubで行いたいという理由でGithub Actions を選択しています。
• ローカルでの作業環境は WSL2(ubuntu)です。

構築手順

1. Node のバージョンを Azure App Service 稼働のものに合わせる
   • 2025年8月時点では App Service ではNode 22 が稼働しているので、Node 22 をインストールし、選択する。
     • sudo npm install -g n
     • n ls-remote --all
     • sudo n 22.18.0
2. Node.js がインストールされた環境でNext.js プロジェクトを作成する。
   • Next.js Installation ページを参考にプロジェクトを作成します。
     • npx create-next-app@latest
     • pnpm i react@latest react-dom@latest
3. next.js プロジェクトが正しく作成され、サンプルページが開けることを確認します。
   • cd [プロジェクト名]
   • pnpm run dev
   • ブラウザで 起動URL(defaultの場合: http://localhost:3000) を開き、問題なく作成できていることを確認します。
4. Github にリポジトリを作成し、初期コードをコミットします。

1. Azure のメニューから App Service を選択しWeb アプリを作成します。
   • App Service > 作成 > Webアプリ
   • ランタイムスタック には Node22 LTS を選択します。
   • アプリ名等は適当なものを入力しますが、無料の範囲で作成する場合は、価格プランからFree F1 を選択します。
2. 作成した Webアプリ を開き、CI/CDの設定を実施します。
   • デプロイ > デプロイセンター から、ソース にGitHub を選択します。
   • Github 認証を実施し、 利用する組織、リポジトリ、ブランチを選択します。
   • ワークフローオプション から “ワークフローの追加：選択したリポジトリとブランチに新しいワークフローファイル [xxxxxx].yml を追加します” を選択します。
   • [保存] ボタンから保存し、デプロイ設定を実施します。

1. Next.js プロジェクトの .github/workflows 配下に作成されている、yml ファイルをgit pull することでローカルに取得します。
   • vscode を利用している場合は、git メニューから 変更の同期を実施するか、リモートからフェッチ／プルしてください。
   • 以下のgist を参考にyml ファイルを修正、保存、commit する。
     https://gist.github.com/hashihei/c4a58809aa52634efe6694823265be31
     ※ secrets 情報は自動生成された情報をそのまま利用してください。

上記の設定でビルド～デプロイが自動化できます。github actions のyml を編集する理由として、github 側でbuild してデプロイが必須なものだけを Azure Web Apps へデプロイしています。

デフォルトの設定でデプロイしているとnode_modules が肥大化するにつれて、デプロイ時間が数十分単位で大きくなり、ついにはデプロイに失敗します。このエラーを避けるために、[SCM_DO_BUILD_DURING_DEPLOYMENT=true] を設定し、ビルド後のファイルのみをAzure Web Apps へ連携し、npm run start から起動しています。

https://fwywd.com/tech/deployment-by-azure-app-service-for-nodejs

https://learn.microsoft.com/ja-jp/azure/app-service/deploy-best-practices