Contentful + Nuxt.js + AmplifyでつくったサイトのAPIキーの隠蔽を試みる 🥷

先日、Contentful + Nuxt.jsでつくったサイトのAPIキーの隠蔽を試みましたが、今回はそのサイトをAmplifyを使って公開する際の.envの作成方法をまとめておきます。

公式サイトに書いてある通りの方法です。

docs.aws.amazon.com

❶ 環境変数を設定

1. Amplifyコンソールにアクセス
2. アプリの設定 > 環境変数 から環境変数を登録

先日の例だと、

CTF_SPACE_ID=HOGEHOGE
CTF_CDA_ACCESS_TOKEN=FUGAFUGA

を登録するので、

CTF_SPACE_IDにHOGEHOGEを、CTF_CDA_ACCESS_TOKENにFUGAFUGAを登録します。

❷ ビルド設定を変更

1. Amplifyコンソールにアクセス
2. アプリの設定 > ビルドの設定 からamplify.ymlを編集

ビルドする際に、echoで.envファイルに環境変数を書き込みます。
先日の例だと

- echo "CTF_SPACE_ID=$CTF_SPACE_ID" >> .env
- echo "CTF_CDA_ACCESS_TOKEN=$CTF_CDA_ACCESS_TOKEN" >> .env

といった感じです。


これだけで、Amplify側の設定は完了です。
これでフロント側ではAPIキーを隠蔽しつつ運用することができます。