|
1 | 1 | # Cloudflare Deployment Guide |
2 | 2 |
|
3 | | -This guide explains how to deploy the Evolution Simulation to Cloudflare Workers. |
| 3 | +This guide explains how to deploy the Evolution Simulation to Cloudflare Pages. |
4 | 4 |
|
5 | 5 | ## Prerequisites |
6 | 6 |
|
7 | 7 | 1. **Cloudflare Account**: Sign up at [cloudflare.com](https://cloudflare.com) |
8 | | -2. **Wrangler CLI**: Install the Cloudflare Workers CLI |
9 | | -3. **Domain**: A domain name (optional, you can use the default workers.dev subdomain) |
| 8 | +2. **Wrangler CLI**: Install the Cloudflare Workers/Pages CLI |
| 9 | +3. **Rust Toolchain**: Nightly toolchain with WASM support (see README.md) |
10 | 10 |
|
11 | | -## Setup |
| 11 | +## Deployment Steps |
12 | 12 |
|
13 | | -### 1. Install Wrangler CLI |
| 13 | +### 1. Install Dependencies |
14 | 14 |
|
15 | 15 | ```bash |
16 | | -npm install -g wrangler |
| 16 | +npm install |
17 | 17 | ``` |
18 | 18 |
|
19 | 19 | ### 2. Login to Cloudflare |
20 | 20 |
|
21 | 21 | ```bash |
22 | | -wrangler login |
| 22 | +npx wrangler login |
23 | 23 | ``` |
24 | 24 |
|
25 | | -### 3. Configure the Project |
26 | | - |
27 | | -Edit `wrangler.toml` and update the following: |
28 | | - |
29 | | -- `name`: Your preferred worker name |
30 | | -- `route`: Your domain (if you have one) |
31 | | -- `kv_namespaces`: Remove or configure if you need KV storage |
32 | | - |
33 | | -### 4. Build the Project |
| 25 | +### 3. Build the Project |
34 | 26 |
|
35 | 27 | ```bash |
36 | 28 | npm run build:web |
37 | 29 | ``` |
38 | 30 |
|
39 | | -This will: |
40 | | -- Compile the Rust code to WebAssembly |
41 | | -- Generate the necessary JavaScript bindings |
42 | | -- Place the files in the `pkg/` directory |
| 31 | +This commands compiles the Rust code to WebAssembly and places the output in the `pkg/` directory. |
43 | 32 |
|
44 | | -## Deployment |
45 | | - |
46 | | -### Quick Deploy |
| 33 | +### 4. Deploy to Cloudflare Pages |
47 | 34 |
|
48 | 35 | ```bash |
| 36 | +# Deploy to production |
49 | 37 | npm run deploy |
50 | | -``` |
51 | | - |
52 | | -This will: |
53 | | -1. Build the web assets |
54 | | -2. Deploy to Cloudflare Workers |
55 | | -3. Provide you with a URL |
56 | | - |
57 | | -### Environment-Specific Deployments |
58 | | - |
59 | | -For staging and production environments, you can modify the `wrangler.toml` file and use: |
60 | | - |
61 | | -```bash |
62 | | -# Deploy to staging |
63 | | -wrangler deploy --env staging |
64 | 38 |
|
65 | | -# Deploy to production |
66 | | -wrangler deploy --env production |
| 39 | +# Or manually: |
| 40 | +npx wrangler pages deploy web --project-name evo |
67 | 41 | ``` |
68 | 42 |
|
69 | | -### Local Development |
| 43 | +This uploads the `web/` directory (which includes the index.html, CSS, JS, and the generated WASM in `web/pkg/`) to Cloudflare Pages. |
| 44 | + |
| 45 | +## Local Development |
70 | 46 |
|
71 | | -Test the worker locally before deploying: |
| 47 | +Test the Pages build locally: |
72 | 48 |
|
73 | 49 | ```bash |
74 | 50 | npm run dev:worker |
75 | 51 | ``` |
76 | 52 |
|
77 | | -This will start a local development server that mimics the Cloudflare Workers environment. |
| 53 | +This builds the project and starts a local Pages server (using `wrangler pages dev`). |
78 | 54 |
|
79 | 55 | ## Configuration |
80 | 56 |
|
81 | | -### wrangler.toml |
82 | | - |
83 | | -The main configuration file contains: |
84 | | - |
85 | | -- **Worker settings**: Name, compatibility date, etc. |
86 | | -- **Site configuration**: Points to the `./web` directory for static assets |
87 | | -- **Build command**: Automatically runs `npm run build:web` before deployment |
88 | | -- **Environment settings**: Separate configs for staging and production |
89 | | - |
90 | | -### Environment Variables |
91 | | - |
92 | | -You can add environment variables in `wrangler.toml`: |
93 | | - |
94 | | -```toml |
95 | | -[vars] |
96 | | -API_KEY = "your-api-key" |
97 | | -ENVIRONMENT = "production" |
98 | | -``` |
99 | | - |
100 | | -### Custom Domains |
101 | | - |
102 | | -The application is deployed with a custom domain at [https://evo.tre.systems/](https://evo.tre.systems/). |
103 | | - |
104 | | -To use a custom domain: |
| 57 | +### COOP/COEP Headers regarding SharedArrayBuffer |
105 | 58 |
|
106 | | -1. Add your domain to Cloudflare |
107 | | -2. Update the `route` in `wrangler.toml` |
108 | | -3. Deploy with `wrangler deploy --env production` |
| 59 | +The simulation uses `SharedArrayBuffer` for parallel processing (via `rayon`). This requires specific security headers to be served: |
109 | 60 |
|
110 | | -## File Structure |
| 61 | +- `Cross-Origin-Opener-Policy: same-origin` |
| 62 | +- `Cross-Origin-Embedder-Policy: require-corp` |
111 | 63 |
|
112 | | -``` |
113 | | -├── worker.js # Cloudflare Worker code |
114 | | -├── wrangler.toml # Worker configuration |
115 | | -├── web/ # Static assets |
116 | | -│ ├── index.html |
117 | | -│ ├── css/ |
118 | | -│ ├── js/ |
119 | | -│ └── pkg/ # WASM files (generated) |
120 | | -└── pkg/ # WASM package (generated) |
121 | | -``` |
| 64 | +These are configured in the `web/_headers` file, which Cloudflare Pages uses to apply headers. |
122 | 65 |
|
123 | 66 | ## Troubleshooting |
124 | 67 |
|
125 | | -### Common Issues |
126 | | - |
127 | | -1. **WASM not loading**: Ensure CORS headers are set correctly |
128 | | -2. **Build failures**: Check that all dependencies are installed |
129 | | -3. **Deployment errors**: Verify your Cloudflare account and permissions |
130 | | - |
131 | | -### Debug Commands |
132 | | - |
133 | | -```bash |
134 | | -# Check worker logs |
135 | | -wrangler tail |
136 | | - |
137 | | -# Test locally |
138 | | -wrangler dev |
139 | | - |
140 | | -# Check build output |
141 | | -ls -la pkg/ |
142 | | -``` |
143 | | - |
144 | | -## Performance |
145 | | - |
146 | | -The worker is optimized for: |
147 | | - |
148 | | -- **Fast loading**: WASM files are cached for 1 year |
149 | | -- **CORS compliance**: Proper headers for cross-origin requests |
150 | | -- **Static asset serving**: Efficient delivery of HTML, CSS, and JS |
151 | | - |
152 | | -## Monitoring |
153 | | - |
154 | | -Monitor your deployment: |
155 | | - |
156 | | -1. **Cloudflare Dashboard**: View analytics and logs |
157 | | -2. **Worker Logs**: Use `wrangler tail` for real-time logs |
158 | | -3. **Performance**: Check the Cloudflare Analytics dashboard |
159 | | - |
160 | | -## Security |
161 | | - |
162 | | -The worker includes: |
163 | | - |
164 | | -- **CORS headers**: Proper cross-origin resource sharing |
165 | | -- **Security headers**: COEP and COOP for isolation |
166 | | -- **Input validation**: Prevents directory traversal attacks |
167 | | - |
168 | | -## Cost |
169 | | - |
170 | | -Cloudflare Workers pricing: |
171 | | - |
172 | | -- **Free tier**: 100,000 requests/day |
173 | | -- **Paid tier**: $5/month for 10M requests |
174 | | -- **Additional**: $0.50 per million requests |
175 | | - |
176 | | -Most small to medium projects will fit within the free tier. |
| 68 | +### "SharedArrayBuffer is not defined" |
| 69 | +If you see this error in the browser console, it means the COOP/COEP headers are missing. Ensure `web/_headers` exists and is being deployed. |
0 commit comments