Skip to main content

🚀 開発環境セットアップ

前提条件​

必要なツール​

  • Node.js: v18.0.0以上
  • npm: v9.0.0以上
  • Git: v2.30.0以上
  • Cloudflare CLI: 最新版
  • Firebase CLI: 最新版

推奨エディタ​

  • VS Code: 推奨拡張機能付き
  • IntelliJ IDEA: WebStorm等

🛠️ ツールインストール​

1. Node.js & npm​

# macOS (Homebrew)
brew install node

# Windows (Chocolatey)
choco install nodejs

# Linux (Ubuntu)
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

2. Cloudflare CLI​

npm install -g wrangler

3. Firebase CLI​

npm install -g firebase-tools

4. その他のツール​

# pnpm (推奨パッケージマネージャー)
npm install -g pnpm

# Expo CLI
npm install -g @expo/cli

# Next.js
npm install -g create-next-app

📁 プロジェクトクローン​

1. リポジトリクローン​

git clone https://github.com/koji-yamaguchi2596/contentsprint.git
cd contents-print

2. 依存関係インストール​

# ルートディレクトリで
pnpm install

# 各アプリケーションで
cd apps/neko-web && pnpm install
cd ../neko-mobile && pnpm install
cd ../admin && pnpm install

# サービスで
cd ../../services/bff-workers && pnpm install

🔐 環境変数設定​

1. 環境変数ファイル作成​

# ルートディレクトリで
cp .env.example .env.local

2. 必要な環境変数​

# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id

# Cloudflare
CLOUDFLARE_ACCOUNT_ID=your_account_id
CLOUDFLARE_API_TOKEN=your_api_token

# Shopify
SHOPIFY_STOREFRONT_TOKEN=your_storefront_token
SHOPIFY_ADMIN_TOKEN=your_admin_token
SHOPIFY_SHOP_DOMAIN=your_shop.myshopify.com

# その他
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000

🚀 プロジェクト起動​

1. 開発サーバー起動​

# ルートディレクトリで（全サービス同時起動）
pnpm dev

# 個別起動
cd apps/neko-web && pnpm dev
cd ../neko-mobile && pnpm start
cd ../admin && pnpm dev

2. アクセスURL​

🔧 開発ツール設定​

1. VS Code設定​

.vscode/settings.jsonを作成：

{
  "typescript.preferences.importModuleSpecifier": "relative",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": [
    "apps/*",
    "services/*"
  ]
}

2. 推奨拡張機能​

  • ESLint: コード品質チェック
  • Prettier: コードフォーマット
  • Tailwind CSS IntelliSense: Tailwind CSS補完
  • GitLens: Git履歴表示
  • Thunder Client: APIテスト

📱 モバイル開発環境​

1. Expo開発環境​

# Expo CLIインストール
npm install -g @expo/cli

# プロジェクト起動
cd apps/neko-mobile
expo start

# iOSシミュレータ起動
expo start --ios

# Androidエミュレータ起動
expo start --android

2. 実機テスト​

  • iOS: Expo GoアプリをApp Storeからダウンロード
  • Android: Expo GoアプリをGoogle Playからダウンロード

🧪 テスト環境​

1. テスト実行​

# 全テスト実行
pnpm test

# 特定のテスト実行
pnpm test:unit
pnpm test:integration
pnpm test:e2e

# テストカバレッジ
pnpm test:coverage

2. テスト環境変数​

# .env.test
NODE_ENV=test
DATABASE_URL=file:./test.db

🚀 デプロイ環境​

1. Cloudflare Pages設定​

# ビルド設定
pnpm build

# デプロイ
pnpm deploy

2. 環境別設定​

# 開発環境
pnpm dev

# ステージング環境
pnpm build:staging
pnpm deploy:staging

# 本番環境
pnpm build:production
pnpm deploy:production

🔍 トラブルシューティング​

よくある問題​

1. 依存関係エラー​

# node_modules削除して再インストール
rm -rf node_modules
pnpm install

2. ポート競合​

# 使用中のポート確認
lsof -i :3000

# プロセス終了
kill -9 <PID>

3. 環境変数エラー​

# 環境変数確認
echo $NODE_ENV
cat .env.local

📚 次のステップ​

環境構築が完了したら、以下のドキュメントを参照してください：

🆘 サポート​

問題が発生した場合は、以下を確認してください：

  1. GitHub Issues: 既存のIssueを検索
  2. ドキュメント: 関連するセクションを確認
  3. チーム: 開発チームに相談

開発環境のセットアップで問題が発生した場合は、チームに相談してください。