aws amplifyとNextJSを触る

とにもかくにもdevcontainerを立てる。
そしてNextJSのサンプルアプリを立てる。

npx create-next-app@latest

言われるがままyesを連打。プロジェクト名はmy-appにしておく。
GitHubに置いておこう。

https://github.com/Ykeigo/lambda-nextjs-sample

gyana

ローカルで立ち上がったので次はデプロイ。
aws amplifyにアクセスして、コンソールの指示通り進み、モノレポを選んでディレクトリはmy-app/を選択。サービスロールがどうのと言っていたので新規作成を選ぶ。
すぐデプロイできて動いた。うれしい。

gyana

amplifyの構成をコードで管理したい。

amplify cliというものがあるのか。これを使おう。

npm install -g @aws-amplify/cli
amplify configure
cd my-app
amplify init

Gen 1は新規プロジェクトにお勧めしないけど、Gen 1を使う？と確認された。当然No。
CLIが終了した。Gen 2は違うコマンドを使うんだな。ampxというコマンドらしいからそっちを入れよう。

gyana

公式ドキュメントを読む。

どうやらGen 2では以下のように進めるらしい。

awsコンソールからGitHubを接続
GitHub内に構成情報を追加（CDKみたいな構文で）
githubにコミットすれば勝手にその変更が反映される

というわけで構成情報を書けるようにしていく。必要なのは以下らしい。

npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest typescript
npm create amplify@latest
y
.

gyana

これで入ったのかな？sandboxを立ててみよう。

npx ampx sandbox
npm run dev

一旦ローカルでNext.jsの画面は表示された。amplifyのコンソールにもsandboxが存在している。

gyana

次にログイン機能を追加してみよう。amplifyにauthという名前で作られているので、cognitoを設定したりしなくても簡単に作れるっぽい。

GitHub Copilot Agentにやってもらったらこんな編集が来た。

sandboxにデプロイしてログイン機能が使えるか確認。

npx ampx sandbox
npm run dev

ログイン画面が出てきた。すごい。

gyana

ではこれをGitHubにpushしてみる。これが勝手にamplifyに反映されるはず。

デプロイに失敗している。

エラーログはこんな感じ。

Module not found: Can't resolve '../amplify_outputs.json'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./src/app/page.tsx
> Build failed because of webpack errors

amplify_outputs.jsonがないらしい。ローカルではnpx ampx sandboxで勝手に作られたけど、amplify上では作られないのか。どうやって作ればいいんだ？

gyana

ググったらこの記事が出てきた。

どうやらamplifyのデプロイはamplify.ymlというのを書けば自分で手順を決められるらしい。（作ってなければデフォルトのまま）
その中で以下のコマンドを実行して作れとのことだ。やってみよう。
npx ampx pipeline-deploy --branch $BRANCH --app-id $APP_ID

amplify.ymlはこんな感じになった。他の部分はGitHub Copilotが作ったわけではなく、awsコンソールのamplifyのページで今デプロイしているアプリ -> ホスティング -> ビルドの設定　からコピペした。

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm ci --cache .npm --prefer-offline
            - npx ampx pipeline-deploy --branch $BRANCH --app-id $APP_ID
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: .next
        files:
          - '**/*'
      cache:
        paths:
          - .next/cache/**/*
          - .npm/**/*
    appRoot: my-app

gyana

作ったamplify.ymlをプロジェクトルートに置いてコミット。デプロイは成功しない。なんで？

ログを見てみる。cdk bootstrapの権限がないらしい。

[BootstrapDetectionError] Unable to detect CDK bootstrap stack due to permission issues.
 ∟ Caused by: [_ToolkitError] amplify-d2htgjmzomf13u-main-branch-e2b0aa7c70: This CDK deployment requires bootstrap stack version '6', but during the confirmation via SSM parameter /cdk-bootstrap/hnb659fds/version the following error occurred: AccessDeniedException: ...
Resolution: Ensure that AWS credentials have an IAM policy that grants read access to 'arn:aws:ssm:*:*:parameter/cdk-bootstrap/*' SSM parameters.
!!! Build failed

amplify.ymlができるまでそんなこと言ってなかったやん。pipeline-deployがcdkの機能を使ってるからか。

gyana

とにかく権限を与えよう。でも誰に？ググってみよう。

最初のほうで作ったサービスロールというやつに与えるらしい。

https://github.com/aws-amplify/amplify-hosting/issues/4038#issuecomment-2803056045
ではawsコンソールからIAMを確認し、サービスロールの許可ポリシーに許可を追加 -> AmplifyBackendDeployFullAccessを与える。

そしたらamplifyのコンソールから再度デプロイ。
デプロイ先のURLでもちゃんとログインを要求されるようになった。すばらしい。

次やる気が出たらauthに続いてdataを使ってみよう。dynamoとS3っぽい。