プロジェクト

全般

プロフィール

その他 #1549

未完了

【基本情報】環境構築について

岡田 明日香 さんが約2ヶ月前に追加. 約2ヶ月前に更新.

ステータス:
新規
優先度:
担当者:
-
開始日:
2024/12/04
期日:
進捗率:

0%

予定工数:

説明

総合環境構築手順

概要

Dockerはpostgresとminio(S3の互換)のみ使用し、ローカルのNode.jsでNext.jsを起動する

メールは未実装
Vercelにデプロイする場合はResendを使うことになると思いますが
EC2などデプロイし自前でメールサーバー動かす場合はNode.jsでnodemailerなども利用可能です
その場合はmailpitなどのコンテナを増やす必要あり

最近はAWS amplifyもいいみたいです
https://blog.ashcolor.jp/blog/programming/vercel-vs-amplify

Node.js

Node.js 20.11.0
pnpm 8.15.5

Volta

Voltaインストール済みの場合は自動で切り替わるためこの手順をスキップする

Macの方向け(Volta未インストールの場合)

パッケージ管理マネージャーとしてVoltaを利用する
もしnodebrewやローカルにNode.jsをインストールしている場合、アンインストールしてから下記を実行
(この機会に乗り換えたほうが良いと思います、プロジェクトによってNodeやnpm、yarnのバージョン切り替えが自動化出来ます)

※ローカルにインストールしている場合(Mac)の削除コマンド

sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

Voltaのセットアップ

brew install volta
volta setup
volta install node@20.11.0
volta install pnpm@8.15.5
volta install npm

npmは今回は使いませんが、nodebrewやローカルnodeから乗り換えた人用に一応npmのinstallも一緒に書いています
他プロジェクトでもVoltaを使うことでバージョンの切り替えが簡単になるため、この機会に乗り換えを推奨

Git Clone

起動

### postgres起動
docker compose up -d

### node_modulesインストール
pnpm install

### seederを実行
pnpm db:seed

### 起動
pnpm dev

アクセス

http://localhost:3000

デモユーザーでログイン

メールアドレス パスワード
Demo1234

詳細情報

server actionを用いたNext.jsフルスタックで開発(App router)

全てにおいて最もネット上で情報が多い王道なライブラリのみ選定
そのため、AIによるコーディングが非常に効率が良い
コーディング時はClaude3.5 sonnetのAI利用を推奨
※AIに質問する際は必ずプロンプトに「Next.js14 app router TypeScript shadcn Prismaを利用しています」のワードを含めること

ライブラリ/フレームワーク バージョン
TypeScript 5.5.4
Next.js 14
React 18
Node.js 20.11 LTSの最新が20.11のためこのバージョンを利用。バージョン管理はVoltaを推奨(自由なツールでOK)
Prisma 5.18.0 TypeScript用のORMです。SQLを簡単な記述で型安全に記述が可能
Auth.js 5@beta20 現状betaしかNext.js14では動かない
Jotai 状態管理ライブラリ
react-hook-form フォーム用のライブラリ
Zod バリデーション用ライブラリ
tailwindcss
shadcn/ui スタイル:new york テーマ:Zinc
PostgreSQL 15

他の形式にエクスポート: Atom PDF