amplify v2のStorage機能を使って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は以下でダウンロード
    • パスの組み立てで

詰まった点

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にも個別に書く