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 を以下のように修正します。

amplify.yml

    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 で実行ログを見ることができます。