（PWA + Laravel / Windows+WSL2 開発）セットアップ続き
追加でセットアップした内容まとめ
ここでは、Windows 上で PWA(React/Vite) と Laravel(API) を並走させるために追加で行った設定・トラブル対応を、再現できるように整理します。最終的に http://localhost:5173 で Vite+React の初期画面、http://localhost:8000 で Laravel の初期画面が表示できる状態まで構築済みです。
1) Windows機能の有効化と WSL2 起動
- 「Windows の機能」で Linux 用 Windows サブシステム と Virtual Machine Platform を ON。
- 管理者 PowerShell で機能を有効化 → 再起動：
dism /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
- WSL & Ubuntu の導入・既定化・確認：
wsl --install -d Ubuntu
wsl --set-default-version 2
wsl --status
wsl -l -v # NAME/STATE/VERSION を確認
wsl -d Ubuntu # Ubuntu を起動
補足：「wsl: command not found」は入力ミス（wsl: と打っていた）。正しくは wsl。
2) WSL(Ubuntu) 側の Node LTS + pnpm 導入
sudo apt update
curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.nvm/nvm.sh
nvm install --lts
corepack enable
corepack prepare pnpm@9 --activate
node -v && pnpm -v
作業ディレクトリは Linux 側（例：~/src）に置くと高速です。
3) Vite + React/TS プロジェクト作成と PWA 化
mkdir -p ~/src && cd ~/src
npm create vite@latest pwa-app -- --template react-ts
cd pwa-app
pnpm i
pnpm add -D vite-plugin-pwa workbox-window
アイコン作成（簡易）：
mkdir -p public/icons
sudo apt -y install imagemagick
convert -size 192x192 xc:"#0ea5e9" public/icons/icon-192.png
convert -size 512x512 xc:"#0ea5e9" public/icons/icon-512.png
vite.config.ts に PWA 設定と API プロキシ（Laravel:8000）を追加：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
manifest: {
name:'GPX/Video Uploader', short_name:'Uploader',
start_url:'/?source=pwa', display:'standalone',
background_color:'#ffffff', theme_color:'#0ea5e9',
icons:[
{src:'icons/icon-192.png',sizes:'192x192',type:'image/png'},
{src:'icons/icon-512.png',sizes:'512x512',type:'image/png'}
]
},
workbox:{
navigateFallback:'/index.html',
runtimeCaching:[{urlPattern:/^\/api\//,handler:'NetworkFirst'}]
},
devOptions:{enabled:true}
})
],
server:{ host:true, proxy:{ '/api':{ target:'http://localhost:8000', changeOrigin:true } } }
})
起動確認：
pnpm dev
# → http://localhost:5173 で Vite+React 初期画面（表示済み）
4) PHP 8.3 + Composer + Laravel プロジェクト
PHP 8.3 系を導入（不足拡張が出たら適宜追加）。
sudo apt update
sudo apt install -y php8.3-cli php8.3-common php8.3-mbstring php8.3-xml \
php8.3-curl php8.3-zip php8.3-sqlite3 php8.3-mysql php8.3-gd php8.3-intl
Composer を導入：
sudo apt install -y curl unzip git
php -r "copy('https://getcomposer.org/installer','composer-setup.php');"
php composer-setup.php --install-dir=/usr/local/bin --filename=composer
rm composer-setup.php
composer -V
Laravel プロジェクト作成 & 依存解決：
cd ~/src
composer create-project laravel/laravel laravel-app
cd laravel-app
composer install
cp .env.example .env
php artisan key:generate
5) DB設定（SQLiteで最短 or PostgreSQLで本番寄り）
A. 最速：SQLite
mkdir -p database
: > database/database.sqlite
# .env は DB_CONNECTION=sqlite のまま
php artisan migrate
B. PostgreSQL を使う場合
SSLエラー（Unsupported SSL request）が出たため、ローカルは SSL 無効で接続。
# .env（抜粋）
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=yourdb
DB_USERNAME=youruser
DB_PASSWORD=yourpass
DB_SSLMODE=disable
sudo apt install -y php8.3-pgsql
php artisan config:clear
php artisan migrate
6) Laravel 開発サーバ起動と確認
php artisan serve --host=0.0.0.0 --port=8000
# → http://localhost:8000 で Laravel 初期画面（表示済み）
もし「Could not open input file: artisan」→ そのディレクトリが Laravel ルートではない。
「vendor/autoload.php が無い」→ composer install を未実行。
7) フロントから API を叩く準備（最小）
PWA 側の簡易アップロード画面（動画+GPX+meta）を src/App.tsx に実装し、/api/v1/runs へ FormData 送信。Laravel 側はルート・コントローラを用意して 202（受領）を返す。
// 例：フロント送信
const fd = new FormData();
fd.append('video', fileVideo);
fd.append('gpx', fileGpx);
fd.append('meta', JSON.stringify(meta));
await fetch('/api/v1/runs', { method:'POST', body: fd });
Laravel 側は routes/api.php に POST /api/v1/runs を追加し、受領→保存→キュー投入の骨格を作る想定。
8) 実機(Android)テストのための ADB 逆ポート
adb devices
adb reverse tcp:5173 tcp:5173 # Vite
adb reverse tcp:8000 tcp:8000 # Laravel
# 端末のChromeで http://localhost:5173 → ホームに追加でPWA起動
9) よくあったエラーと解決メモ
- wsl: command not found：PowerShell以外で実行 or 文字列ミス。
wslを PowerShell で。 - artisan が無い：Laravel ルート外。
find . -name artisanで場所を確認。 - vendor/autoload.php が無い：
composer install未実行。 - PostgreSQL Unsupported SSL request：
.envにDB_SSLMODE=disableを追加、php artisan config:clear。 - PWAアイコンが無い：
public/icons/icon-192.png/512.pngを自作配置（パスをコマンド実行しない）。
10) 次にやること（本実装へ）
- Laravel：
POST /api/v1/runsの本実装（動画/GPX保存→ジョブ投入）。 - キュー（Redis）導入、推論サービス連携（Python/FastAPI）。
- PWA：IndexedDB 送信キュー、S3 Multipart or tus で大容量/レジューム対応。
- POI可視化：Leaflet/MapLibre で事前確認 UI。
ここまでで「フロント/Vite起動」「API/Laravel起動」「WSL2での開発動線」が整いました。次は仕様通りのエンドポイントと非同期パイプラインを入れていけばOKです。©株式会社ビー・ナレッジ・デザイン
