AWS Amplify HostingでホストしたSSRアプリでSecretの値を利用する

目次

はじめに

AWS Amplify HostingにNext.jsで実装したAPIをDeployしようとした際に、 APIで使用するDBのSecretを設定しようとしたところ少し調べないと方法が分からなかっとのでメモを残します。

Next.jsのデプロイ先としてのAmplify

Next.jsで実装したアプリをDeployするとなると、まずはNext.jsの開発元であるVercelが候補に上がると思います。 Hobby用途だとVercelは無料で使用できますし、Next.jsとの親和性が高いのでこれを選ぶのが一番簡単だと思います。

しかし、営利目的で使用しようとすると有償プランを選ぶ必要があり安いとは言い難いとおもいます。

AWS Amplify Hostingはフロントエンドエンジニア向けのホスティング環境を提供しており、Next.jsなどのSSRアプリのDeployも可能です。 課金体系は従量課金ですし、他のAWSのサービスとSSRアプリを連携させようと思うとレイテンシの観点から有利です。

環境変数をServer Siedeで利用する

環境変数をServer Sideで使用する方法は公式ドキュメントに記述があります。

Amplify HostingはServer Sideで使用する環境変数を直接設定する機能はないので、build時に.env.productionとして書き出しておくことでServer Sideから利用できます。

- env | grep -e DB_HOST -e DB_USER -e DB_PASS >> .env.production

しかし、組織のセキュリティーポリシーによってはパスワードなどの情報は暗号化して保存することが求められる場合があります。

SecretをServer Siedeで利用する

Amplify HostingにはSecretを設定する機能があります。

詳しい設定方法は公式ドキュメントに譲るとして、ここでSecretを設定するとAWS Systems Manager Parameter StoreにSecretが保存されます。 この値をServer Sideで利用したい場合はbuild時にこの値をAWS CLIで取得し、.env.productionに設定すれば良いです。

例えばmain branchからデプロイする環境のDB_PASSを設定する場合は amplify.ymlを以下のように設定すればよいです。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline
    build:
      commands:
        - echo DB_PASS=$(aws ssm get-parameter --name "/amplify/main/${AWS_APP_ID}/DB_PASS" --with-decryption --query "Parameter.Value" --output text) >> .env.production
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*