katasu.me

🪴 「じぶん」のための、インターネットのかたすみ

開発環境

ローカル環境でのドメイン設定

1. hostsファイルの編集

# macOS/Linux
sudo nano /etc/hosts

# 以下を追加
127.0.0.1    local.katasu.me

2. 証明書の生成

# mkcertのインストール
brew install mkcert  # macOS
choco install mkcert # Windows

# 証明書の生成
mkcert -install
mkcert local.katasu.me

3. アクセス確認

# 開発サーバー起動後
open http://local.katasu.me:3000

初期環境構築

1. Cloudflareへのログイン

pnpm wrangler login

2. wrangler設定ファイルの作成

cd apps/service
cp wrangler.develop.toml wrangler.toml

以降の手順で作成したリソースのIDを wrangler.toml 内のプレースホルダー（<DEVELOPMENT_...>）に設定します。

3. D1データベースの作成

# 開発環境用D1データベース作成
pnpm wrangler d1 create katasu-me-dev

出力された database_id を wrangler.toml の <DEVELOPMENT_DATABASE_ID> に設定します。

4. KV Namespaceの作成

# キャッシュ用KV作成
pnpm wrangler kv namespace create CACHE_KV

出力された id を wrangler.toml の <DEVELOPMENT_CACHE_KV_ID> に設定します。

5. R2バケットの作成

# Next.js インクリメンタルキャッシュ用
pnpm wrangler r2 bucket create katasu-me-dev-inc-cache

# 画像保存用
pnpm wrangler r2 bucket create katasu-me-dev-images

6. 環境変数の設定

cp .env.example .env.local

Google OAuthのAPIキーなど、必要な環境変数を .env.local に設定します。

upload-worker用の環境変数

cd apps/upload-worker
cp .env.example .env.local

7. データベースマイグレーション

# apps/service ディレクトリで実行
pnpm db:migrate

8. シードデータの投入

pnpm db:seed

起動

pnpm install
pnpm run dev