はじめに

ポートフォリオ予定地作りました。
作って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.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にも個別に書く