AWS Amplifyは、GitリポジトリにソースコードをプッシュするだけでNext.jsアプリをデプロイしてくれる便利なホスティングサービスです。今回は、Next.jsとPrismaで作成したアプリをAmplify上で動かしてみます。
RDSの準備
RDSでMySQLサーバーを立ち上げる手順は割愛します。
ファイアウォールの設定
EC2からRDSに接続するのは簡単ですが、AmplifyからRDSに接続する方法は公式ではサポートされていません。少々トリッキーな方法が必要です。
セキュリティグループを新規作成し、インバウンドでTCP/3306 (MySQL)を許可します。
AmplifyのIPアドレスが不明なので一旦すべての接続元 0.0.0.0/0
を許可していますが、これだと誰でも接続できてしまいますので、AmplifyのIPアドレスが判明したら接続元は制限しておくべきです。
データベースの作成
適当なMySQL接続ツールで CREATE DATABASE
文を流してください。
Amplifyの準備
Amplifyを選択して、「ウェブアプリケーションをホスト」を選んで必要情報を入力してください。
設定が終わると自動的にデプロイが始まります。
環境変数(.env)の設定
環境変数は管理コンソールから設定できますが、実はこれだけでは動きません。ここで設定した環境変数はビルド時に有効ですが、アプリ起動時には有効にはならないためです。アプリ起動時にも有効にするには一手間必要です。
amplify.yml
の build → command を以下のように修正します。
build:
commands:
- echo "SLACK_CLIENT_ID=$SLACK_CLIENT_ID" >> .env
- echo "SLACK_CLIENT_SECRET=$SLACK_CLIENT_SECRET" >> .env
- echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
- echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env
- echo "DATABASE_URL=$DATABASE_URL" >> .env
- npm run build
- npx prisma migrate deploy
- npx prisma db seed
トリッキーな方法ですが、公式で案内されている方法です……
ここで修正した amplify.yml
はGitリポジトリのルートディレクトリに置いておくのがおすすめです。
再デプロイ
「このバージョンを再デプロイ」というボタンを押すとデプロイが始まります。
以降、Gitリポジトリにプッシュするだけでデプロイできるようになります。
デプロイしたアプリがうまく動かない場合
CloudWatch で実行ログを見ることができます。