情報システム室の進地@日比谷です。
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
を例示します。
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ファイルを作ります。
amplify.yml
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モジュールで環境変数にアクセスできます。