【Amplify・Next.js】SSRの環境変数を設定する

はじめに

Next.jsでSSR用に設定した環境変数（NEXT_PUBLIC_ で始まらないもの）をAmplifyにデプロイする際に、つまずいたので解消法をご紹介します。

今回は、GITHUB_TOKENやMICROCMS_API_KEYなど。

事象

通常ではデプロイ時やサイドバーのホスティング→環境変数から設定できます。

ただ、SSR用の環境変数はここで設定するだけでは、コード内で使用できません。

Amplify の環境変数には、アプリでは不要なシークレットなどが含まれる場合もあるため、直接は参照できない仕様になっているようです。

https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/ssr-environment-variables.html

解消方法

Amplify の環境変数を .env.production に書き出す

SSR アプリをモノレポにデプロイしていて、特定の環境変数が Next.js にアクセスできるようにする場合は、.env.production ファイルのプレフィックスにアプリケーションルートを付ける必要があります。

とのことなので、Amplify設定画面サイドオバーの「ビルドの設定」からビルド設定の管理ファイルである amplify.yml を変更します。

以下の画面に追記します。

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm ci --cache .npm --prefer-offline
        build:
          commands:
            - env | grep -e GITHUB_TOKEN >> .env.production //追加
            - env | grep -e MICROCMS_API_KEY >> .env.production　//追加
            - env | grep -e USER_POOL_ID >> .env.production　//追加
            - env | grep -e CLIENT_ID >> .env.production　//追加
            - npm run build
      artifacts:
        baseDirectory: .next
        files:
          - '**/*'
      cache:
        paths:
          - .next/cache/**/*
          - .npm/**/*
    appRoot: xxxxxxxxxx

env
現在の環境変数一覧を表示するコマンド。
grep -e GITHUB_TOKEN
環境変数一覧から "GITHUB_TOKEN" を含む行だけを絞り込む。

>> .env.production
出力結果を .env.production ファイルの末尾に追記する。

この設定をすれば、デプロイしたNext.jsから環境変数が参照できるようになりました。
再デプロイを忘れずに。