Cloudflare Workers

How to deploy Nuxt to Cloudflare Workers.

Cloudflare Workers - 图1 Support for Workers build output

Cloudflare Workers - 图2 Zero-millisecond cold start with edge-side rendering

Cloudflare Workers - 图3 Minimal configuration required

Setup

Login to your Cloudflare Workers account and obtain your account_id from the sidebar.

Create a wrangler.toml in your root directory:

wrangler.toml

  1. name = "playground"
  2. type = "javascript"
  3. account_id = "<the account_id you obtained>"
  4. workers_dev = true
  5. route = ""
  6. zone_id = ""
  8. [site]
  9. bucket = ".output/public"
  10. entry-point = ".output"
  12. [build]
  13. command = "true"
  14. upload.format = "service-worker"

Testing locally

You can use miniflare, a local Cloudflare Workers development server, to test your app locally:

  1. NITRO_PRESET=cloudflare yarn build
  2. npx miniflare .output/server/index.mjs --site .output/public

Deploy from your local machine using wrangler

Install wrangler and login to your Cloudflare account:

  1. npm i @cloudflare/wrangler -g
  2. wrangler login

Generate website with cloudflare preset:

  1. NITRO_PRESET=cloudflare yarn build

You can preview locally:

  1. wrangler dev

Publish:

  1. wrangler publish

Deploy within CI/CD using GitHub Actions

Create a token according to the wrangler action docs and set CF_API_TOKEN in your repository config on GitHub.

Create .github/workflows/cloudflare.yml:

.github/workflows/cloudflare.yml

  1. name: cloudflare
  3. on:
  4.   push:
  5.     branches:
  6.       - main
  7.   pull_request:
  8.     branches:
  9.       - main
  11. jobs:
  12.   ci:
  13.     runs-on: ${{ matrix.os }}
  15.     strategy:
  16.       matrix:
  17.         os: [ ubuntu-latest ]
  18.         node: [ 14 ]
  20.     steps:
  21.       - uses: actions/setup-node@v1
  22.         with:
  23.           node-version: ${{ matrix.node }}
  25.       - name: Checkout
  26.         uses: actions/checkout@master
  28.       - name: Cache node_modules
  29.         uses: actions/cache@v2
  30.         with:
  31.           path: node_modules
  32.           key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
  34.       - name: Install Dependencies
  35.         if: steps.cache.outputs.cache-hit != 'true'
  36.         run: yarn
  38.       - name: Build
  39.         run: yarn build
  40.         env:
  41.           NITRO_PRESET: cloudflare
  43.       - name: Publish to Cloudflare
  44.         uses: cloudflare/wrangler-action@1.3.0
  45.         with:
  46.           apiToken: ${{ secrets.CF_API_TOKEN }}

More information

See more information on the service worker preset for full details.

Demo

A live demo is available on https://nitro-deployment.pi0.workers.dev.