個人的備忘録：GitHub Actionsで行うNext.jsの「本番・開発」ビルドの自動化メモ

はじめに

本記事では、GitHub Actions を使って Next.js アプリをビルドするステップの内容について解説します。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

特に、環境変数を条件によって切り替えながらビルドする構成に焦点を当てて自分へ解説しています。

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環でこのようなビルド処理を組み込んだため、忘れないように備忘録として記事にまとめています。

チームメンバーの方に作成いただいたものが素晴らしかったので、自分も忘れないようにまとめています。

チームメンバーの方、本当にありがとうございました。

解説

以下は、GitHub Actions の中で実行される Next.js のビルドステップです。

- name: Build Next.js
  working-directory: frontend
  run: |
    NEXT_PUBLIC_API_URL="${{ github.event_name != 'pull_request' && secrets.PROD_API_URL || secrets.DEV_API_URL }}" \
    NEXT_PUBLIC_ADMIN_PIN="${{ secrets.ADMIN_PIN }}" \
    NODE_ENV="${{ github.event_name != 'pull_request' && 'production' || 'development' }}" \
    npm run build

ポイント

• frontend ディレクトリで npm run build を実行。
• PR（pull_request）の場合は DEV_API_URL と development モード、
  それ以外は PROD_API_URL と production モードに切り替える。
• 環境変数 NEXT_PUBLIC_ADMIN_PIN も secrets から注入。

これにより、環境に応じた設定で自動的に適切なビルドが行われます。

まとめ

このように GitHub Actions 上で環境に応じたビルドを行うことで、本番環境と開発環境を明確に切り分けられ、セキュアかつ効率的なCI/CDの実現につながります。

ハッカソン開発では特にスピードが求められるため、こうした自動化の工夫がとても役立ちました...！