Skip to content

Commit 35645e4

Browse files
soranjirosoranjiro
authored
Merge pull request #106 from soranjiro/feat/dev-environment
dev環境の整備
2 parents c6f815a + 4c050e2 commit 35645e4

5 files changed

Lines changed: 234 additions & 0 deletions

File tree

‎.github/workflows/cleanup-preview.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: Cleanup Preview Environment
2+
3+
on:
4+
pull_request:
5+
types: [closed]
6+
7+
permissions:
8+
contents: read
9+
10+
jobs:
11+
cleanup-preview:
12+
runs-on: ubuntu-latest
13+
env:
14+
CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
15+
CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
16+
PR_NUMBER: ${{ github.event.pull_request.number }}
17+
steps:
18+
- name: Checkout
19+
uses: actions/checkout@v4
20+
21+
- name: Setup PNPM
22+
uses: pnpm/action-setup@v4
23+
24+
- name: Setup Node.js
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: 22
28+
cache: pnpm
29+
30+
- name: Install dependencies
31+
run: pnpm install --frozen-lockfile
32+
33+
- name: Delete Preview API Worker
34+
working-directory: apps/api
35+
run: |
36+
WORKER_NAME="tabitabi-api-preview-pr-${PR_NUMBER}"
37+
pnpm wrangler delete --name "${WORKER_NAME}" || echo "Worker may not exist"
38+
continue-on-error: true
39+
40+
- name: Cleanup Pages preview deployments
41+
run: |
42+
echo "Pages preview deployments are automatically managed by Cloudflare"
43+
echo "No manual cleanup needed for PR ${PR_NUMBER}"

‎.github/workflows/preview.yml‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
name: Preview Environment
2+
3+
on:
4+
issue_comment:
5+
types: [created]
6+
workflow_dispatch:
7+
inputs:
8+
pr_number:
9+
description: "PR number to deploy"
10+
required: true
11+
type: number
12+
13+
permissions:
14+
contents: read
15+
pull-requests: write
16+
17+
concurrency:
18+
group: preview-${{ github.event.issue.number || inputs.pr_number }}
19+
cancel-in-progress: true
20+
21+
jobs:
22+
deploy-preview:
23+
runs-on: ubuntu-latest
24+
if: |
25+
(github.event_name == 'issue_comment' &&
26+
github.event.issue.pull_request &&
27+
contains(github.event.comment.body, '/deploy-preview')) ||
28+
github.event_name == 'workflow_dispatch'
29+
env:
30+
CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
31+
CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
32+
CLOUDFLARE_DATABASE_ID: ${{ secrets.CLOUDFLARE_DATABASE_ID }}
33+
PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.issue.number }}
34+
steps:
35+
- name: Add reaction to comment
36+
if: github.event_name == 'issue_comment'
37+
uses: actions/github-script@v7
38+
with:
39+
script: |
40+
github.rest.reactions.createForIssueComment({
41+
owner: context.repo.owner,
42+
repo: context.repo.repo,
43+
comment_id: context.payload.comment.id,
44+
content: 'rocket'
45+
});
46+
47+
- name: Get PR branch
48+
id: pr-branch
49+
uses: actions/github-script@v7
50+
with:
51+
script: |
52+
const pr = await github.rest.pulls.get({
53+
owner: context.repo.owner,
54+
repo: context.repo.repo,
55+
pull_number: process.env.PR_NUMBER
56+
});
57+
core.setOutput('ref', pr.data.head.ref);
58+
core.setOutput('sha', pr.data.head.sha);
59+
60+
- name: Checkout PR branch
61+
uses: actions/checkout@v4
62+
with:
63+
ref: ${{ steps.pr-branch.outputs.sha }}
64+
65+
- name: Setup PNPM
66+
uses: pnpm/action-setup@v4
67+
68+
- name: Setup Node.js
69+
uses: actions/setup-node@v4
70+
with:
71+
node-version: 22
72+
cache: pnpm
73+
74+
- name: Install dependencies
75+
run: pnpm install --frozen-lockfile
76+
77+
- name: Generate wrangler.toml from example
78+
run: |
79+
cp wrangler.toml.example wrangler.toml
80+
sed -i "s/PLACEHOLDER_DATABASE_ID/${CLOUDFLARE_DATABASE_ID}/g" wrangler.toml
81+
82+
- name: Generate API wrangler.toml from example
83+
working-directory: apps/api
84+
run: |
85+
cp wrangler.toml.example wrangler.toml
86+
sed -i "s/PLACEHOLDER_DATABASE_ID/${CLOUDFLARE_DATABASE_ID}/g" wrangler.toml
87+
88+
- name: Deploy API to preview environment
89+
working-directory: apps/api
90+
run: |
91+
WORKER_NAME="tabitabi-api-preview-pr-${PR_NUMBER}"
92+
pnpm wrangler deploy --name ${WORKER_NAME} --env preview
93+
94+
- name: Get API preview URL
95+
id: api-url
96+
run: |
97+
echo "url=https://tabitabi-api-preview-pr-${PR_NUMBER}.oranda.workers.dev/api/v1" >> $GITHUB_OUTPUT
98+
99+
- name: Build web with preview API URL
100+
run: pnpm run build
101+
env:
102+
VITE_API_URL: ${{ steps.api-url.outputs.url }}
103+
104+
- name: Deploy Web to Pages preview
105+
id: pages-deploy
106+
working-directory: apps/web
107+
run: |
108+
BRANCH_NAME="preview-pr-${PR_NUMBER}"
109+
OUTPUT=$(pnpm wrangler pages deploy .svelte-kit/cloudflare --project-name=tabitabi --branch=${BRANCH_NAME})
110+
echo "$OUTPUT"
111+
URL=$(echo "$OUTPUT" | grep -oP 'https://[a-z0-9-]+\.tabitabi\.pages\.dev' | head -1)
112+
echo "url=${URL}" >> $GITHUB_OUTPUT
113+
114+
- name: Comment PR with preview URLs
115+
uses: actions/github-script@v7
116+
with:
117+
script: |
118+
const apiUrl = '${{ steps.api-url.outputs.url }}';
119+
const webUrl = '${{ steps.pages-deploy.outputs.url }}';
120+
121+
const comment = `## 🚀 Preview Environment Ready
122+
123+
Your preview environment has been deployed:
124+
125+
- **Web App**: ${webUrl}
126+
- **API**: ${apiUrl}
127+
128+
The Web app is configured to access the preview API automatically.
129+
To update this preview, comment \`/deploy-preview\` again.
130+
131+
> **Note**: Preview environments share the same database as production.`;
132+
133+
github.rest.issues.createComment({
134+
issue_number: process.env.PR_NUMBER,
135+
owner: context.repo.owner,
136+
repo: context.repo.repo,
137+
body: comment
138+
});

‎CONTRIBUTING.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ pnpm dev
2020
pnpm test
2121
```
2222

23+
## プレビュー環境
24+
25+
Pull Requestで変更内容を確認したい場合、PRのコメント欄に `/deploy-preview` と投稿してください。
26+
プレビュー環境がデプロイされ、PRコメントにURLが投稿されます。
27+
2328
## コミットメッセージ
2429

2530
Conventional Commits に従ってください：

‎apps/api/wrangler.toml.example‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,17 @@ binding = "DB"
2828
database_name = "tabitabi"
2929
database_id = "PLACEHOLDER_DATABASE_ID"
3030
migrations_dir = "./migrations"
31+
32+
[env.preview]
33+
34+
[env.preview.vars]
35+
ALLOWED_ORIGINS = "*"
36+
37+
[env.preview.observability]
38+
enabled = true
39+
40+
[[env.preview.d1_databases]]
41+
binding = "DB"
42+
database_name = "tabitabi"
43+
database_id = "PLACEHOLDER_DATABASE_ID"
44+
migrations_dir = "./migrations"

‎docs/developer/getting-started.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,40 @@
1111
- バンドルサイズを意識する
1212
- 遅延読み込み（lazy loading）を活用する
1313

14+
## プレビュー環境
15+
16+
PRで変更内容を確認したい場合、コメントでプレビュー環境をデプロイできます。
17+
18+
### デプロイ方法
19+
20+
PRのコメント欄に以下を投稿：
21+
22+
```
23+
/deploy-preview
24+
```
25+
26+
または、GitHub ActionsのUIから手動実行も可能。
27+
28+
### 仕組み
29+
30+
- コメントトリガーでGitHub Actionsの`.github/workflows/preview.yml`が実行される
31+
- Cloudflare WorkersとPagesに`preview-pr-{番号}`環境が作成される
32+
- PRのコメントにプレビューURLが投稿される
33+
34+
### アクセス
35+
36+
デプロイ後、以下のURLでアクセス可能：
37+
38+
- **Web**: `https://preview-pr-{番号}.tabitabi.pages.dev`
39+
- **API**: `https://tabitabi-api-preview-pr-{番号}.oranda.workers.dev/api/v1`
40+
41+
### 注意事項
42+
43+
- データベースは本番環境と同じものを共有
44+
- PRをクローズすると自動的にクリーンアップされる
45+
- プレビュー環境は開発・検証用途のみ
46+
- 必要な時だけデプロイすることで、リソースを節約できる
47+
1448
## 開発の進め方
1549
### ディレクトリ構成
1650

0 commit comments

Comments
 (0)