Skip to content

Commit 823a018

Browse files
chore(meta): add Cloudflare docs (#8023)
* chore(meta): add Cloudflare docs Add (back) some documentation regarding the Cloudflare build, including information about ids, accounts used, skew protection, etc... * Apply suggestions from code review Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Dario Piotrowicz <[email protected]> * remove unnecessary information --------- Signed-off-by: Dario Piotrowicz <[email protected]> Co-authored-by: Aviv Keller <[email protected]>
1 parent 1186ca3 commit 823a018

File tree

2 files changed

+54
-0
lines changed

2 files changed

+54
-0
lines changed

docs/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ New to contributing? Start here:
2020
- **[Technologies](./technologies.md)** - Overview of the tech stack and architecture decisions
2121
- **[Downloads Page](./downloads-page.md)** - How to add installation methods and package managers
2222
- **[Package Publishing](./package-publishing.md)** - Guidelines for publishing packages in our monorepo
23+
- **[Cloudflare build and deployment](./cloudflare-build-and-deployment.md)** - Overview and useful information about the Cloudflare build and deployment
2324

2425
## For Collaborators
2526

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Cloudflare Build and Deployment
2+
3+
The Node.js Website can be built using the [OpenNext Cloudflare adapter](https://opennext.js.org/cloudflare). Such build generates a [Cloudflare Worker](https://www.cloudflare.com/en-gb/developer-platform/products/workers/) that can be deployed on the [Cloudflare](https://www.cloudflare.com) network.
4+
5+
## Configurations
6+
7+
There are two key configuration files related to Cloudflare deployments:
8+
9+
### Wrangler Configuration
10+
11+
This file defines the settings for the Cloudflare Worker, which serves the website.
12+
13+
For more details, refer to the [Wrangler documentation](https://developers.cloudflare.com/workers/wrangler/configuration/).
14+
15+
Key configurations include:
16+
17+
- `main`: Points to the worker generated by the OpenNext adapter.
18+
- `account_id`: Specifies the Cloudflare account ID. This is not required for local previews but is necessary for deployments. You can obtain an account ID for free by signing up at [dash.cloudflare.com](https://dash.cloudflare.com/login).
19+
- This is currently set to `fb4a2d0f103c6ff38854ac69eb709272`, which is the ID of a Cloudflare account controlled by Node.js, and used for testing.
20+
- `build`: Defines the build command to generate the Node.js filesystem polyfills required for the application to run on Cloudflare Workers. This uses the [`@flarelabs/wrangler-build-time-fs-assets-polyfilling`](https://github.com/flarelabs-net/wrangler-build-time-fs-assets-polyfilling) package.
21+
- `alias`: Maps aliases for the Node.js filesystem polyfills generated during the build process.
22+
- `kv_namespaces`: Contains a single KV binding definition for `NEXT_INC_CACHE_KV`. This is used to implement the Next.js incremental cache.
23+
- This is currently set up to a KV in the aforementioned Cloudflare testing account.
24+
25+
### OpenNext Configuration
26+
27+
This is the configuration for the OpenNext Cloudflare adapter.
28+
29+
For more details, refer to the [official OpenNext documentation](https://opennext.js.org/cloudflare/get-started#4-add-an-open-nextconfigts-file).
30+
31+
### Skew Protection
32+
33+
While Vercel offers [version skew protection](https://vercel.com/docs/skew-protection) out of the box, such mechanism is not present on the platform level in the Cloudflare network.
34+
35+
Therefore, the OpenNext adapter provides its [own implementation](https://opennext.js.org/cloudflare/howtos/skew).
36+
37+
The OpenNext skew protection requires the following environment variables to be set in the Wrangler configuration file:
38+
39+
- `CF_WORKER_NAME`
40+
- The name of the worker (the same as `name`)
41+
- `CF_ACCOUNT_ID`
42+
- The ID of the Cloudflare account (the same as `account_id`)
43+
- `CF_PREVIEW_DOMAIN`
44+
- The preview domain for the worker. For Node.js, this is `nodejsorg`.
45+
46+
Additionally, when deploying, an extra `CF_WORKERS_SCRIPTS_API_TOKEN` environment variable needs to be set to an API token that has the `Workers Scripts:Read` permission available on the Worker's account.
47+
48+
## Scripts
49+
50+
Preview and deployment of the website targeting the Cloudflare network is implemented via the following two commands:
51+
52+
- `pnpm cloudflare:preview` builds the website using the OpenNext Cloudflare adapter and runs the website locally in a server simulating the Cloudflare hosting (using the [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/))
53+
- `pnpm cloudflare:deploy` builds the website using the OpenNext Cloudflare adapter and deploys the website to the Cloudflare network (using the [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/))

0 commit comments

Comments
 (0)