浅井ブログ

Nuxt3で何か作りたいと思い、簡易的なブログのようなものを作ってみました。
Githubリポジトリは下記になります。

https://github.com/acaibawl/acai-blog

とは言え、リポジトリを見るとすぐにわかってしまうのですが、記事の一覧画面と詳細表示画面しかまだありません。
投稿機能がないからDBに直接データをインサートして記事を作る必要があります。
業務言葉で言うと、エンジニア作業ってやつですね。
これから投稿機能も作っていきたいなとは思っていますが、管理者ログイン機能が必要になるので難易度高そう。

構成

• アプリ構成
  • フレームワーク：Nuxt3
  • DB操作用ORM：Prisma
  • 記事部分：marked.js
• インフラ構成
  • 開発環境：Docker
  • 本番環境：AWS App Runner
  • DB：PostgreSQL（Supabase）

こういうの書くの憧れてたんですけど、何を書けばいいのかあんまり思いつかず。。。

ひとまず、今回は本番環境を用意して記事公開まで持ってこれただけでも良かった！
ちなみに、ここまでは着手から5日くらいでできました。

途中からとり始めた作業メモ

• 本番環境構築
  • ECRのライフサイクルポリシーを設定
  • DBとしてsupabaseプロジェクトの作成
    • table plusから接続してみる
  • github actionsでprismaのmigrateを実行して、テーブルを用意する
    • workflowsのファイルを作成
      • working-directory: ./app を入れないとpackage.jsonが見つからない
      • supabaseへのconnection stringはTransaction model（ポートが6543）ではなく、Session model（ポートが5432）のほうを使う
  • app runnerにDB接続用の環境変数を用意する
  • route 53で独自ドメインを設定
  • ogタグ設定
  • GA4設定
  • スマホ向けのfavicon用意