用 Cloudflare Worker 來佈署靜態網頁

~$ sudo npm install -g @cloudflare/wrangler 

~$ wrangler config To find your API Token, go to https://dash.cloudflare.com/profile/api-tokens and create it using the "Edit Cloudflare Workers" template. If you are trying to use your Global API Key instead of an API Token (Not Recommended), run `wrangler config --api-key`. Enter API Token: B4jLkMW933P3P5tsDOqLbKZLi9UMLPEkH8xQdOI7 Validating credentials... Successfully configured. You can find your configuration file at: /home/floatflower/.wrangler/config/default.toml 

~$ wrangler generate --site mysite Creating project called `mysite`... Done! New project created /home/floatflower/mysite You will need to update the following fields in the created wrangler.toml file before continuing: You can find your account_id in the right sidebar of your account's Workers page, and zone_id in the right sidebar of a zone's overview tab at https://dash.cloudflare.com - account_id ~$ cd mysite 

. ├── node_modules ├── package-lock.json ├── public │   ├── 404.html │   ├── favicon.ico │   ├── img │   │   ├── 200-wrangler-ferris.gif │   │   └── 404-wrangler-ferris.gif │   └── index.html ├── workers-site │   ├── index.js │   ├── package.json │   └── package-lock.json └── wrangler.toml 

# worker 名稱 name = "mysite" type = "webpack" account_id = "" # 如果選擇 true 的話，Cloudflare 會提供給你一個 .workers.dev 網域的網址，因為我們要提供網域，所以我們將其設為 false。 workers_dev = false # 如果 workers_dev 是 false 時，這個 route 一定要提供，我這邊示範的網址是 mysite.fres.host。 route = "mysite.fres.host/*" zone_id = "" [site] bucket = "./public" 

~$ wrangler publish ... Built successfully, built project size is 13 KiB. Created namespace for Workers Site "__mysite-workers_sites_assets" Success Uploading site files Deployed to the following routes: mysite.fres.host/* => created 

~$ vue create mysite_spa 

location / { try_files $uri $uri/ /index.html; } 

# 將 site 區塊的設定改成這樣 [site] bucket = "./dist" 

import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler' /** * The DEBUG flag will do two things that help during development: * 1. we will skip caching on the edge, which makes it easier to * debug. * 2. we will return an error message on exception in your Response rather * than the default 404.html page. */ const DEBUG = false addEventListener('fetch', event => { try { event.respondWith(handleEvent(event)) } catch (e) { if (DEBUG) { return event.respondWith( new Response(e.message || e.toString(), { status: 500, }), ) } event.respondWith(new Response('Internal Error', { status: 500 })) } }) async function handleEvent(event) { const url = new URL(event.request.url) let options = {} /** * You can add custom logic to how we fetch your assets * by configuring the function `mapRequestToAsset` */ // options.mapRequestToAsset = handlePrefix(/^\/docs/) try { if (DEBUG) { // customize caching options.cacheControl = { bypassCache: true, } } const page = await getAssetFromKV(event, options) // allow headers to be altered const response = new Response(page.body, page) response.headers.set('X-XSS-Protection', '1; mode=block') response.headers.set('X-Content-Type-Options', 'nosniff') response.headers.set('X-Frame-Options', 'DENY') response.headers.set('Referrer-Policy', 'unsafe-url') response.headers.set('Feature-Policy', 'none') return response } catch (e) { // if an error is thrown try to serve the asset at 404.html if (!DEBUG) { try { let notFoundResponse = await getAssetFromKV(event, { mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/404.html`, req), }) return new Response(notFoundResponse.body, { ...notFoundResponse, status: 404 }) } catch (e) {} } return new Response(e.message || e.toString(), { status: 500 }) } } /** * Here's one example of how to modify a request to * remove a specific prefix, in this case `/docs` from * the url. This can be useful if you are deploying to a * route on a zone, or if you only want your static content * to exist at a specific path. */ function handlePrefix(prefix) { return request => { // compute the default (e.g. / -> index.html) let defaultAssetKey = mapRequestToAsset(request) let url = new URL(defaultAssetKey.url) // strip the prefix from the path for lookup url.pathname = url.pathname.replace(prefix, '/') // inherit all other props from the default request return new Request(url.toString(), defaultAssetKey) } } 

// if an error is thrown try to serve the asset at 404.html if (!DEBUG) { try { let notFoundResponse = await getAssetFromKV(event, { mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/404.html`, req), }) return new Response(notFoundResponse.body, { ...notFoundResponse, status: 404 }) } catch (e) {} } 

// if an error is thrown try to serve the asset at 404.html if (!DEBUG) { try { let notFoundResponse = await getAssetFromKV(event, { mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/index.html`, req), }) return new Response(notFoundResponse.body, { ...notFoundResponse, status: 200 }) } catch (e) {} } 

~$ npm run build ~$ wrangler dev 

~$ wrangler publish