Skip to content

Commit d18d0bb

Browse files
weizwzweizwz
committed
配置部署项
1 parent c9758da commit d18d0bb

File tree

15 files changed

+1134
-4
lines changed

15 files changed

+1134
-4
lines changed

‎.cloudflare/README.md‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
# Cloudflare Pages 配置文件说明
2+
3+
本项目已配置好 Cloudflare Pages 部署，以下是相关配置文件的说明。
4+
5+
## 配置文件列表
6+
7+
### 核心配置
8+
9+
#### `wrangler.toml`
10+
Wrangler CLI 的配置文件，用于命令行部署。
11+
12+
```toml
13+
name = "weiz-nav" # 项目名称
14+
compatibility_date = "2024-11-18" # 兼容性日期
15+
pages_build_output_dir = "out" # 构建输出目录
16+
```
17+
18+
#### `public/_redirects`
19+
Cloudflare Pages 的重定向规则，用于支持客户端路由。
20+
21+
```
22+
/* /index.html 200
23+
```
24+
25+
这确保所有路由都指向 index.html，支持 SPA 模式。
26+
27+
#### `public/_headers`
28+
自定义 HTTP 响应头，用于优化性能和安全性。
29+
30+
包含：
31+
- 安全头（X-Frame-Options, X-Content-Type-Options 等）
32+
- 缓存策略（静态资源长期缓存，HTML 不缓存）
33+
34+
### 部署脚本
35+
36+
#### `scripts/deploy-cloudflare.sh`
37+
一键部署脚本，执行完整的构建和部署流程。
38+
39+
使用方法：
40+
```bash
41+
./scripts/deploy-cloudflare.sh
42+
```
43+
44+
功能：
45+
- 检查依赖
46+
- 清理旧构建
47+
- 安装依赖
48+
- 运行 lint
49+
- 构建项目
50+
- 部署到 Cloudflare Pages
51+
52+
### CI/CD
53+
54+
#### `.github/workflows/cloudflare-pages.yml`
55+
GitHub Actions 工作流，用于自动部署。
56+
57+
触发条件：
58+
- 推送到 `main` 分支
59+
- 创建 Pull Request
60+
61+
需要配置的 Secrets：
62+
- `CLOUDFLARE_API_TOKEN`
63+
- `CLOUDFLARE_ACCOUNT_ID`
64+
65+
配置说明：[.github/CLOUDFLARE_SETUP.md](../.github/CLOUDFLARE_SETUP.md)
66+
67+
### Next.js 配置
68+
69+
#### `next.config.ts`
70+
Next.js 配置，启用静态导出。
71+
72+
```typescript
73+
{
74+
output: 'export', // 启用静态导出
75+
images: {
76+
unoptimized: true, // 禁用图片优化（静态导出需要）
77+
},
78+
trailingSlash: true, // URL 添加尾部斜杠
79+
}
80+
```
81+
82+
### 部署配置
83+
84+
#### `vercel.json`
85+
Vercel 部署配置（备选方案）。
86+
87+
#### `package.json`
88+
包含部署相关的 npm scripts：
89+
90+
```json
91+
{
92+
"deploy": "pnpm deploy:cloudflare",
93+
"deploy:cloudflare": "wrangler pages deploy out --project-name=weiz-nav",
94+
"deploy:vercel": "vercel --prod"
95+
}
96+
```
97+
98+
## 部署方式
99+
100+
### 1. Git 集成（推荐）
101+
102+
最简单的方式，零配置：
103+
104+
1. 推送代码到 GitHub
105+
2. 在 Cloudflare Dashboard 连接仓库
106+
3. 自动部署
107+
108+
### 2. Wrangler CLI
109+
110+
适合快速测试：
111+
112+
```bash
113+
pnpm build
114+
pnpm deploy
115+
```
116+
117+
### 3. GitHub Actions
118+
119+
适合需要自定义 CI/CD 流程：
120+
121+
1. 配置 Secrets（见 `.github/CLOUDFLARE_SETUP.md`）
122+
2. 推送代码自动触发部署
123+
124+
### 4. 部署脚本
125+
126+
一键完成所有步骤：
127+
128+
```bash
129+
./scripts/deploy-cloudflare.sh
130+
```
131+
132+
## 环境变量
133+
134+
如需配置环境变量：
135+
136+
1. 在 Cloudflare Pages 项目设置中添加
137+
2. 或在 `wrangler.toml` 中配置：
138+
139+
```toml
140+
[env.production.vars]
141+
NEXT_PUBLIC_API_URL = "https://api.example.com"
142+
```
143+
144+
**注意**：只有 `NEXT_PUBLIC_` 开头的变量才能在浏览器中访问。
145+
146+
## 自定义域名
147+
148+
1. 在 Cloudflare Pages 项目中添加自定义域名
149+
2. 如果域名在 Cloudflare，自动配置 DNS
150+
3. 如果不在，添加 CNAME 记录指向 `weiz-nav.pages.dev`
151+
152+
## 性能优化
153+
154+
项目已配置：
155+
156+
- ✅ 静态资源长期缓存（1年）
157+
- ✅ HTML 不缓存（确保更新及时）
158+
- ✅ 安全响应头
159+
- ✅ 全球 CDN 分发
160+
161+
## 故障排查
162+
163+
### 构建失败
164+
```bash
165+
# 本地测试构建
166+
pnpm build
167+
168+
# 检查错误
169+
pnpm lint
170+
```
171+
172+
### 部署失败
173+
```bash
174+
# 检查 Wrangler 登录状态
175+
wrangler whoami
176+
177+
# 重新登录
178+
wrangler login
179+
```
180+
181+
### 路由 404
182+
- 确认 `public/_redirects` 文件存在
183+
- 确认 `trailingSlash: true` 在 `next.config.ts` 中
184+
185+
## 相关文档
186+
187+
- [快速开始](../../QUICKSTART.md)
188+
- [完整部署指南](../../DEPLOYMENT.md)
189+
- [GitHub Actions 配置](../.github/CLOUDFLARE_SETUP.md)
190+
191+
## 支持
192+
193+
- [Cloudflare Pages 文档](https://developers.cloudflare.com/pages/)
194+
- [Wrangler CLI 文档](https://developers.cloudflare.com/workers/wrangler/)
195+
- [Next.js 静态导出](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)

‎.github/CLOUDFLARE_SETUP.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Cloudflare Pages GitHub Actions 配置指南
2+
3+
如果你想使用 GitHub Actions 自动部署到 Cloudflare Pages，需要配置以下 Secrets。
4+
5+
## 获取 Cloudflare API Token
6+
7+
1. 登录 [Cloudflare Dashboard](https://dash.cloudflare.com)
8+
9+
2. 进入 **My Profile** → **API Tokens**
10+
11+
3. 点击 **Create Token**
12+
13+
4. 选择 **Create Custom Token**
14+
15+
5. 配置权限：
16+
- **Token name**: `GitHub Actions - weiz-nav`
17+
- **Permissions**:
18+
- Account - Cloudflare Pages - Edit
19+
- **Account Resources**:
20+
- Include - Your Account
21+
22+
6. 点击 **Continue to summary** → **Create Token**
23+
24+
7. 复制生成的 Token（只显示一次）
25+
26+
## 获取 Cloudflare Account ID
27+
28+
1. 在 [Cloudflare Dashboard](https://dash.cloudflare.com) 首页
29+
30+
2. 右侧可以看到 **Account ID**
31+
32+
3. 复制 Account ID
33+
34+
## 配置 GitHub Secrets
35+
36+
1. 进入你的 GitHub 仓库
37+
38+
2. 进入 **Settings** → **Secrets and variables** → **Actions**
39+
40+
3. 点击 **New repository secret**
41+
42+
4. 添加以下两个 Secrets：
43+
44+
### CLOUDFLARE_API_TOKEN
45+
- Name: `CLOUDFLARE_API_TOKEN`
46+
- Value: 粘贴你的 API Token
47+
48+
### CLOUDFLARE_ACCOUNT_ID
49+
- Name: `CLOUDFLARE_ACCOUNT_ID`
50+
- Value: 粘贴你的 Account ID
51+
52+
## 完成
53+
54+
配置完成后，每次推送到 `main` 分支或创建 Pull Request 时，GitHub Actions 会自动：
55+
1. 构建项目
56+
2. 部署到 Cloudflare Pages
57+
3. 在 PR 中显示预览链接
58+
59+
## 注意事项
60+
61+
- API Token 请妥善保管，不要泄露
62+
- 如果不想使用 GitHub Actions，可以直接使用 Cloudflare Pages 的 Git 集成
63+
- GitHub Actions 方式适合需要自定义构建流程的场景

‎.github/workflows/cloudflare-pages.yml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
name: Deploy to Cloudflare Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
branches:
9+
- main
10+
11+
jobs:
12+
deploy:
13+
runs-on: ubuntu-latest
14+
permissions:
15+
contents: read
16+
deployments: write
17+
name: Deploy to Cloudflare Pages
18+
steps:
19+
- name: Checkout
20+
uses: actions/checkout@v4
21+
22+
- name: Setup Node.js
23+
uses: actions/setup-node@v4
24+
with:
25+
node-version: '20'
26+
27+
- name: Setup pnpm
28+
uses: pnpm/action-setup@v2
29+
with:
30+
version: 10
31+
32+
- name: Get pnpm store directory
33+
shell: bash
34+
run: |
35+
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
36+
37+
- name: Setup pnpm cache
38+
uses: actions/cache@v4
39+
with:
40+
path: ${{ env.STORE_PATH }}
41+
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
42+
restore-keys: |
43+
${{ runner.os }}-pnpm-store-
44+
45+
- name: Install dependencies
46+
run: pnpm install --frozen-lockfile
47+
48+
- name: Build
49+
run: pnpm build
50+
51+
- name: Publish to Cloudflare Pages
52+
uses: cloudflare/pages-action@v1
53+
with:
54+
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
55+
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
56+
projectName: weiz-nav
57+
directory: out
58+
# Optional: Enable this if you want to add a commit message
59+
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
60+
# Optional: Change the branch name if needed
61+
branch: main

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ yarn-error.log*
3131
# vercel
3232
.vercel
3333

34+
# cloudflare
35+
.wrangler
36+
wrangler.toml.bak
37+
3438
# typescript
3539
*.tsbuildinfo
3640
next-env.d.ts

0 commit comments

Comments
 (0)