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` | 角丸 |
|