サービスアイディア基盤

🌐 WSL開発環境でのドメイン設定対応¶

estate.3dwork.jp ドメインでの開発に伴い、WSL環境での開発設定を追加します：

1. 開発環境ドメイン設定¶

ローカル開発環境設定¶

• hosts ファイル設定

  # /etc/hosts (WSL)
  127.0.0.1 dev.estate.3dwork.jp
  127.0.0.1 dev-api.estate.3dwork.jp
  

• Vite 開発サーバー設定

  // vite.config.ts
  export default defineConfig({
    server: {
      host: 'dev.estate.3dwork.jp',
      port: 3000,
      proxy: {
        '/api': 'http://dev-api.estate.3dwork.jp:8000'
      }
    }
  });
  

2. Express API開発設定¶

• Express サーバー設定

  // apps/api/src/server.ts
  const app = express();
  
  // CORS設定（開発環境）
  app.use(cors({
    origin: [
      'http://dev.estate.3dwork.jp:3000',
      'https://dev.estate.3dwork.jp'
    ],
    credentials: true
  }));
  
  app.listen(8000, () => {
    console.log('API Server running on dev-api.estate.3dwork.jp:8000');
  });
  

3. 環境変数設定¶

• 開発環境用環境変数

  # .env.development
  VITE_APP_DOMAIN=dev.estate.3dwork.jp
  VITE_API_BASE_URL=http://dev-api.estate.3dwork.jp:8000/api
  VITE_WEB_BASE_URL=http://dev.estate.3dwork.jp:3000
  
  # API側
  NODE_ENV=development
  CORS_ORIGINS=http://dev.estate.3dwork.jp:3000
  COOKIE_DOMAIN=.estate.3dwork.jp
  

4. 多言語リソース設定¶

• i18n URL設定

  // packages/i18n/src/config.ts
  export const i18nConfig = {
    baseUrl: process.env.NODE_ENV === 'development' 
      ? 'http://dev.estate.3dwork.jp:3000'
      : 'https://estate.3dwork.jp',
    // ...
  };
  

5. 外部API開発設定¶

• Google Maps API設定

  • 開発用API キー設定
  • HTTP リファラー許可: dev.estate.3dwork.jp

• LINE Bot開発設定

  • 開発用 Webhook URL設定
  • ngrok使用時の設定: https://xxxx.ngrok.io/line/webhook

6. SSL証明書（開発環境）¶

• mkcert による自己署名証明書

  # WSL環境でmkcert インストール・設定
  mkcert -install
  mkcert "*.estate.3dwork.jp" localhost 127.0.0.1
  
  # Vite HTTPS設定
  server: {
    https: {
      key: fs.readFileSync('localhost+2-key.pem'),
      cert: fs.readFileSync('localhost+2.pem'),
    }
  }
  

7. 開発用Docker Compose設定¶

• docker-compose.dev.yml

  version: '3.8'
  services:
    web:
      build: ./apps/web
      ports:
        - "3000:3000"
      environment:
        - VITE_APP_DOMAIN=dev.estate.3dwork.jp
      extra_hosts:
        - "dev.estate.3dwork.jp:127.0.0.1"
        
    api:
      build: ./apps/api  
      ports:
        - "8000:8000"
      environment:
        - CORS_ORIGINS=http://dev.estate.3dwork.jp:3000
      extra_hosts:
        - "dev-api.estate.3dwork.jp:127.0.0.1"
  

これらの設定により、本番環境に近い開発環境でestate.3dwork.jpドメインでの開発が可能になります。