|
1 | | -# Cloudflare Pages PR Preview Deployment Guide |
| 1 | +# Cloudflare Pages PR Preview Deployment |
2 | 2 |
|
3 | | -This guide explains how to set up and use Cloudflare Pages for automatic PR preview deployments of the Nova Spektr application. |
| 3 | +Automatic PR preview deployments for the Nova Spektr renderer application using Cloudflare Pages. |
4 | 4 |
|
5 | | -## Overview |
| 5 | +## Quick Reference |
6 | 6 |
|
7 | | -The PR preview system automatically builds and deploys the renderer application to Cloudflare Pages whenever a pull request is opened or updated. This allows developers and reviewers to test changes in a live environment before merging. |
8 | | - |
9 | | -### Architecture |
10 | | - |
11 | | -- **Build Process**: The GitHub Actions workflow builds the renderer using `pnpm renderer:staging` |
12 | | -- **Deployment**: Static assets are deployed to Cloudflare Pages using Wrangler CLI |
13 | | -- **Project-per-PR**: Each PR gets its own Cloudflare Pages project: `nova-spektr-pr-{pr_number}` |
14 | | -- **Serving**: Cloudflare Pages serves the static files with proper caching and security headers automatically |
15 | | -- **URL Format**: Each PR gets a unique preview URL based on the project name |
| 7 | +- **Workflow Files**: |
| 8 | + - [Deploy Workflow](/.github/workflows/pr-preview-deploy.yml) |
| 9 | + - [Cleanup Workflow](/.github/workflows/pr-preview-cleanup.yml) |
| 10 | +- **Triggers**: PR opened, updated, or reopened (deploy) | PR closed (cleanup) |
| 11 | +- **Project Naming**: `nova-spektr-pr-{pr_number}` |
| 12 | +- **Build Output**: `release/build/` |
16 | 13 |
|
17 | 14 | ## How It Works |
18 | 15 |
|
19 | | -### Build Process |
20 | | - |
21 | | -The workflow runs the following steps: |
22 | | - |
23 | | -```bash |
24 | | -pnpm clean:build # Clean previous builds |
25 | | -pnpm renderer:staging # Build renderer with staging config |
26 | | -pnpm postbuild:staging # Run post-build scripts |
27 | | -``` |
28 | | - |
29 | | -The build output is placed in `release/build/` directory, which contains: |
30 | | -- `index.html` - Main HTML file |
31 | | -- JavaScript bundles (`.js`, `.mjs`) |
32 | | -- CSS files |
33 | | -- Static assets (images, fonts, etc.) |
34 | | - |
35 | | -### Deployment Process |
36 | | - |
37 | | -1. **Pages Deployment**: Uses `wrangler pages deploy` command with: |
38 | | - - Project name: `nova-spektr-pr-{pr_number}` (unique per PR) |
39 | | - - Static assets: Served from `release/build/` directory |
| 16 | +### Deployment Flow |
40 | 17 |
|
41 | | -2. **Automatic Serving**: Cloudflare Pages automatically: |
42 | | - - Serves static files with correct MIME types |
43 | | - - Handles SPA routing (serves `index.html` for non-file paths) |
44 | | - - Applies security headers |
45 | | - - Caches static assets efficiently |
| 18 | +1. **Build**: Runs `pnpm clean:build`, `pnpm renderer:staging`, and `pnpm postbuild:staging` |
| 19 | +2. **Project Creation**: Creates Cloudflare Pages project if it doesn't exist |
| 20 | +3. **Deploy**: Deploys `release/build/` to Cloudflare Pages |
| 21 | +4. **Notification**: Posts preview URL as PR comment |
46 | 22 |
|
47 | | -### URL Structure |
| 23 | +### Cleanup Flow |
48 | 24 |
|
49 | | -Each PR gets its own Cloudflare Pages project: |
50 | | -- **Project Name**: `nova-spektr-pr-{pr_number}` (e.g., `nova-spektr-pr-123`) |
51 | | -- **Preview URL**: Automatically generated by Cloudflare Pages for the project |
52 | | -- The URL is automatically commented on the PR after successful deployment |
53 | | -- URL format: `https://nova-spektr-pr-{pr_number}.pages.dev` or similar |
| 25 | +When a PR is closed (merged or closed): |
| 26 | +- Automatically deletes the Cloudflare Pages project `nova-spektr-pr-{pr_number}` |
| 27 | +- Removes all associated deployments and builds |
| 28 | +- Runs silently (no PR comment) |
54 | 29 |
|
55 | | -### Cleanup Process |
| 30 | +## Project Details |
56 | 31 |
|
57 | | -When a PR is closed (merged or closed without merging): |
58 | | -1. A cleanup job automatically runs |
59 | | -2. The entire Cloudflare Pages project `nova-spektr-pr-{pr_number}` is deleted |
60 | | -3. This removes all deployments, builds, and project data associated with the PR |
61 | | -4. The cleanup job completes silently (no PR comment needed) |
| 32 | +- **Project Name Format**: `nova-spektr-pr-{pr_number}` (e.g., `nova-spektr-pr-123`) |
| 33 | +- **Preview URL**: Automatically generated by Cloudflare Pages (e.g., `https://nova-spektr-pr-123.pages.dev`) |
| 34 | +- **URL Delivery**: Posted as a comment on the PR after successful deployment |
| 35 | +- **SPA Support**: Cloudflare Pages automatically handles SPA routing |
62 | 36 |
|
63 | | -## Usage |
| 37 | +## Monitoring |
64 | 38 |
|
65 | | -### Automatic Deployment |
66 | | - |
67 | | -The workflow runs automatically when: |
68 | | -- A new pull request is opened |
69 | | -- New commits are pushed to an existing PR |
70 | | -- A PR is reopened |
71 | | - |
72 | | -### Automatic Cleanup |
73 | | - |
74 | | -The workflow automatically cleans up when: |
75 | | -- A PR is closed (merged or closed without merging) |
76 | | -- All deployments for the PR branch are deleted |
77 | | - |
78 | | -## Maintenance |
79 | | - |
80 | | -### Automatic Cleanup |
81 | | - |
82 | | -PR preview projects are automatically deleted when PRs are closed. No manual intervention is required. |
| 39 | +- **GitHub Actions**: Check workflow runs for deployment status |
| 40 | +- **PR Comments**: Preview URLs are automatically posted |
| 41 | +- **Cloudflare Dashboard**: View projects at Workers & Pages → Pages |
83 | 42 |
|
84 | | -### Manual Cleanup (if needed) |
| 43 | +## Manual Operations |
85 | 44 |
|
86 | | -If you need to manually clean up a project: |
| 45 | +### Delete a Project Manually |
87 | 46 |
|
88 | | -1. Go to Cloudflare Dashboard → **Workers & Pages** → **Pages** |
89 | | -2. Find the project named `nova-spektr-pr-{pr_number}` |
90 | | -3. Delete the project manually if needed |
| 47 | +**Via Cloudflare Dashboard:** |
| 48 | +1. Go to **Workers & Pages** → **Pages** |
| 49 | +2. Find project `nova-spektr-pr-{pr_number}` |
| 50 | +3. Delete the project |
91 | 51 |
|
92 | | -Or use Wrangler CLI: |
| 52 | +**Via Wrangler CLI:** |
93 | 53 | ```bash |
94 | 54 | wrangler pages project delete nova-spektr-pr-{pr_number} |
95 | 55 | ``` |
96 | 56 |
|
97 | | -### Monitoring |
| 57 | +## Troubleshooting |
98 | 58 |
|
99 | | -- **Cloudflare Dashboard**: View Pages projects, deployments, and logs |
100 | | -- **GitHub Actions**: Check workflow runs for deployment status |
101 | | -- **PR Comments**: Preview URLs are automatically posted to PRs |
| 59 | +**Deployment fails:** |
| 60 | +- Check GitHub Actions workflow logs |
| 61 | +- Verify `CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ACCOUNT_ID` secrets are set |
| 62 | +- Ensure build completes successfully |
102 | 63 |
|
103 | | -Each PR appears as a separate project in Cloudflare Dashboard, making it easy to identify and monitor individual PR previews. |
| 64 | +**Preview URL not working:** |
| 65 | +- Wait a few minutes for DNS propagation |
| 66 | +- Check Cloudflare Dashboard for deployment status |
| 67 | +- Verify the project exists in Cloudflare Pages |
0 commit comments