|
| 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 using [Cloudflare Workers](https://www.cloudflare.com/en-gb/developer-platform/products/workers/). |
| 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, named `nodejs.org`, that the nodejs team is using for testing the Cloudflare deployment. |
| 20 | +- `build`: Defines the build command to generate 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 `nodejs.org` Cloudflare testing account. |
| 24 | + |
| 25 | +### OpenNext Configuration |
| 26 | + |
| 27 | +This is the configuration for the OpenNext Cloudflare adapter, for more details on such configuration please refer to the [official OpenNext documentation](https://opennext.js.org/cloudflare/get-started#4-add-an-open-nextconfigts-file). |
| 28 | + |
| 29 | +### Skew Protection |
| 30 | + |
| 31 | +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 and the Open-next adapter provides its own implementation, for more details refer to the [OpenNext official Skew protection documentation](https://opennext.js.org/cloudflare/howtos/skew). |
| 32 | + |
| 33 | +The OpenNext skew protection requires the following environment variables to be set in the Wrangler configuration file: |
| 34 | + |
| 35 | +- `CF_WORKER_NAME` |
| 36 | + - The name of the worker (the same as `name`) |
| 37 | +- `CF_ACCOUNT_ID` |
| 38 | + - The id of the Cloudflare account (this is the same as `account_id`, and again this is set to the Cloudflare testing account used by the nodejs team) |
| 39 | +- `CF_PREVIEW_DOMAIN` |
| 40 | + - The preview domain for the worker, given that the preview url for the testing Cloudflare deployments is `https://nodejs-website.nodejsorg.workers.dev/` the domain here is `nodejsorg` |
| 41 | + |
| 42 | +Additionally upon deployments an extra `CF_WORKERS_SCRIPTS_API_TOKEN` environment variable needs to be set. This variable needs to be set to an API token that has the `Workers Scripts:Read` permission available on the worker's account. |
| 43 | + |
| 44 | +## Scripts |
| 45 | + |
| 46 | +Preview and deployment of the website targeting the Cloudflare network is implemented via the following two commands: |
| 47 | + |
| 48 | +- `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/)) |
| 49 | +- `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