amplify v2のStorage機能を使ってS3に配置した記事データを配信するまで

はじめに

ポートフォリオ予定地作りました。
作って2か月放置しちゃったんですが最近エンジニアらしい業務がないので開発を再開したいとは...
本番（仮）：https://zoe-chin.com/
開発：https://dev.zoe-chin.com/

ディレクトリ

特定のディレクトリ配下のmdファイルをそっくりS3にアップロードして、記事一覧画面や記事詳細画面で表示したい。
その機能検証という感じ。

root
├ public 
│  └ markdowns // この配下にmdを配置する
├ src // nextjsの中身
以下略

機能の概要

• リポジトリのpublicフォルダ配下にmdファイルを配置する
  • 同じディレクトリ構造でS3にも配置し、画面に表示する際はS3経由で表示する
    • [未検証]アップロードは、publicフォルダに変更がある場合のCD時に実行する

使用技術

• nextjs v14.2.4
• amplify Gen2
  • バックエンド連携機能のうち、Storage機能を使ってS3と連携していきます

手順

既存のnextjsプロジェクトにAmplfy Gen2を連携していきます。
AWSのクレデンシャルが必要です。いい感じに設定ください。

• amplify Gen2の初期設定
  • プロジェクトルートでnpm create amplify@latest
    • amplifyという名前のフォルダが作成されます。
• Storage設定
  • 基本的にはドキュメントに書いてある通りで良い。
• S3から取れるようにする
  • Storageのアクセス設定はguestなユーザーにread権限付与
  • mdは以下でダウンロード
    • パスの組み立てで
• 記事一覧画面では静的なファイル（JSON）を読み込んでいます。これで記事の一覧取得にAPIを使わず済みます。JSONの生成はS3にアップロード・更新するタイミングで行います。

詰まった点

amplify.yml更新するのを忘れてた

背景として、amplifyでCDするプロジェクトのルートにamplify.ymlを配置してCD時の処理を記述できます。
私の場合は既存のAmplifyプロジェクトにバックエンド連携機能を追加したので、上記のStorage設定をデプロイする記述が不足していました。
npx ampx pipeline-deploy ......(略)を追加したら反映された

Amplify.configureするベストな箇所がわからない!!

結局今もベストプラクティスはわかってなく、動くようにしただけなことは注意が必要。

【状況】

• Amplify.configureはルートエントリポイントに記述するもので、App router以降のnextjsならルートのlayout.tsxがそれにあたる認識だった。
• ただ、上記の箇所だと、CSRな画面（'use client';）でAmplify.configureが実行されないぽい

【対策】

• 'use client;'な画面のルートのlayout.tsxにも個別に書く