[Remix] Remix+Amplifyにてサーバサイドで環境変数を使う（Cognito認証アクセストークン取得例）

情報システム室の進地＠日比谷です。

Remixで構築したアプリケーションをAmplifyで稼働させる時に、process.envで環境変数にアクセスする方法について記述します。 Cognito認証に対するアクセストークンをRemixで得るサンプルにもなっていますのでご活用ください。

RemixをAmplifyで動かす

Deploy Remix apps with SSR to AWS Amplify
https://richdevelops.dev/how-to-deploy-remix-apps-with-ssr-to-aws-amplify

の通り進めてください。

サーバサイドで環境変数を使うために必要なこと

サーバサイドで環境変数を使うために、いくつか必要なことがあります。

dotenvをインストールする

$ npm i dotenv

環境変数を使いたい.serverモジュールでdotenvをインポートする

環境変数を使いたい.serverモジュールの冒頭でdotenvをインポートします。 ここでは、Cognito認証に使うtokenを取得するメソッドgetCognitoAccessTokenを記述したapp/.server/cognito.tsを例示します。

import 'dotenv/config';
import axios from 'axios';

export async function getCognitoAccessToken(): Promise<string> {
  // リクエストボディ
  const payload = {
    AuthFlow: 'USER_PASSWORD_AUTH',
    ClientId: process.env.COGNITO_USER_POOL_CLIENT_ID,
    AuthParameters: {
      USERNAME: process.env.COGNITO_USERNAME,
      PASSWORD: process.env.COGNITO_PASSWORD,
    }
  };
  // リクエストヘッダー
  const headers = {
    'Content-Type': 'application/x-amz-json-1.1',
    'X-Amz-Target': 'AWSCognitoIdentityProviderService.InitiateAuth'
  }
  // リクエストオプション
  const options = {
    'headers' : headers
  }

  const response = await axios.post(process.env.COGNITO_URL, JSON.stringify(payload), options);
  const content = response.data;
  return content.AuthenticationResult.IdToken;
}

amplify.ymlで.envを作る

amplify.ymlで使いたい環境変数を書き込んだ.envファイルを作ります。

version: 1
baseDirectory: .amplify-hosting
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - echo "COGNITO_URL=$COGNITO_URL" >> .env
        - echo "COGNITO_USER_POOL_CLIENT_ID=$COGNITO_USER_POOL_CLIENT_ID" >> .env
        - echo "COGNITO_USERNAME=$COGNITO_USERNAME" >> .env
        - echo "COGNITO_PASSWORD=$COGNITO_PASSWORD" >> .env
        - npm run build
        - mv build .amplify-hosting
        - mv .amplify-hosting/client .amplify-hosting/static
        - mkdir -p .amplify-hosting/compute
        - mv .amplify-hosting/server .amplify-hosting/compute/default
        - npm ci --omit dev
        - cp .env .amplify-hosting/compute/default
        - cp package.json .amplify-hosting/compute/default
        - cp -r node_modules .amplify-hosting/compute/default
        - cp server.js .amplify-hosting/compute/default
        - cp deploy-manifest.json .amplify-hosting/deploy-manifest.json
  artifacts:
    files:
      - "**/*"
    baseDirectory: .amplify-hosting

Amplifyで環境変数を設定する

後はAmplifyの当該アプリのコンソールで環境変数を設定して、アプリをビルドすれば.serverモジュールで環境変数にアクセスできます。