87 lines
2.9 KiB
Markdown
87 lines
2.9 KiB
Markdown
|
# Posimai Static App Template
|
|||
|
|
|
|||
|
|
新しい静的 PWA アプリを作るときのボイラープレート。
|
|||
|
|
|
|||
|
|
## 使い方
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 1. テンプレートをコピー
|
|||
|
|
cp -r _template posimai-[new-app-name]
|
|||
|
|
cd posimai-[new-app-name]
|
|||
|
|
|
|||
|
|
# 2. APP_NAME / APP_ID / APP_DESCRIPTION を置換
|
|||
|
|
# APP_NAME → 表示名 (例: "Posimai Timer")
|
|||
|
|
# APP_ID → 識別子 (例: "posimai-timer")
|
|||
|
|
# APP_DESCRIPTION → 説明文
|
|||
|
|
|
|||
|
|
# 3. Git 初期化
|
|||
|
|
git init && git add . && git commit -m "init: APP_NAME"
|
|||
|
|
|
|||
|
|
# 4. Gitea にリポジトリを作成（★ Web UI で先に行う）
|
|||
|
|
# http://100.76.7.3:3000 にアクセス
|
|||
|
|
# → 「+」→「新しいリポジトリ」→ 名前: APP_ID → 作成
|
|||
|
|
# ※ この手順を飛ばすと git push gitea が 404 で失敗する
|
|||
|
|
|
|||
|
|
# 5. GitHub にリポジトリ作成（gh CLI）
|
|||
|
|
gh repo create posimai/APP_ID --private
|
|||
|
|
|
|||
|
|
# 6. リモートを追加して初回 push
|
|||
|
|
git remote add gitea http://100.76.7.3:3000/mai/APP_ID.git
|
|||
|
|
git remote add github https://github.com/posimai/APP_ID.git
|
|||
|
|
npm run deploy # = git push gitea main && git push github main
|
|||
|
|
|
|||
|
|
# 7. Vercel と GitHub を連携（1アプリにつき1回だけ）
|
|||
|
|
# --yes では対話が消えないため echo パイプで GitHub を選択させる
|
|||
|
|
echo "https://github.com/posimai/APP_ID.git" | vercel git connect
|
|||
|
|
|
|||
|
|
# 8. 初回本番デプロイをトリガー（1回だけ必要）
|
|||
|
|
# vercel git connect だけでは本番反映されないため、空コミットで push する
|
|||
|
|
git commit --allow-empty -m "ci: trigger initial Vercel deployment"
|
|||
|
|
npm run deploy
|
|||
|
|
# Vercel ダッシュボードで "Production" デプロイが完了したら以降は不要
|
|||
|
|
# ※ 通常運用では vercel --prod は実行しない（GitHub push で自動）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
以降の更新はすべて：
|
|||
|
|
```bash
|
|||
|
|
git add .
|
|||
|
|
git commit -m "feat/fix/chore: 変更内容"
|
|||
|
|
npm run deploy
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## デプロイフロー（全体像）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
npm run deploy
|
|||
|
|
│
|
|||
|
|
├─► git push gitea main → Synology NAS (ローカルバックアップのみ)
|
|||
|
|
│
|
|||
|
|
└─► git push github main → GitHub
|
|||
|
|
│
|
|||
|
|
│ Webhook (push 検知)
|
|||
|
|
▼
|
|||
|
|
Vercel
|
|||
|
|
└─ ビルド → 本番反映
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- **Gitea** はバックアップ専用。Vercel とは無関係。
|
|||
|
|
- **GitHub push** が Vercel の唯一のトリガー。
|
|||
|
|
- `vercel --prod` の直接実行は禁止（初回トリガー用の空コミット push で代替）。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## デザイントークン（変更禁止）
|
|||
|
|
|
|||
|
|
| トークン | 値 | 用途 |
|
|||
|
|
|---------|-----|------|
|
|||
|
|
| `--bg` | `#0D0D0D` | ページ背景 |
|
|||
|
|
| `--surface` | `#1A1A1A` | カード背景 |
|
|||
|
|
| `--surface2` | `#252525` | ネスト要素 |
|
|||
|
|
| `--border` | `#2D2D2D` | ボーダー |
|
|||
|
|
| `--text` | `#F3F4F6` | 主テキスト |
|
|||
|
|
| `--text2` | `#9CA3AF` | 副テキスト |
|
|||
|
|
| `--accent` | `#6EE7B7` | アクセント |
|
|||
|
|
| `--radius` | `12px` | 角丸 |
|