mirror of
https://github.com/Sevichecc/Urara-Blog.git
synced 2025-05-20 18:49:13 +08:00
92 lines
4 KiB
Text
92 lines
4 KiB
Text
# adapter-cloudflare
|
||
|
||
[Adapter](https://kit.svelte.dev/docs/adapters) for building SvelteKit applications on [Cloudflare Pages](https://developers.cloudflare.com/pages/) with [Workers integration](https://developers.cloudflare.com/pages/platform/functions).
|
||
|
||
If you're using [adapter-auto](../adapter-auto), you don't need to install this — it's already included.
|
||
|
||
_**Comparisons**_
|
||
|
||
- `adapter-cloudflare` – supports all SvelteKit features; builds for
|
||
[Cloudflare Pages](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/)
|
||
- `adapter-cloudflare-workers` – supports all SvelteKit features; builds for
|
||
Cloudflare Workers
|
||
- `adapter-static` – only produces client-side static assets; compatible with
|
||
Cloudflare Pages
|
||
|
||
> **Note:** Cloudflare Pages' new Workers integration is currently in beta.<br/>
|
||
> Compared to `adapter-cloudflare-workers`, this adapter will be the preferred approach for most users since building on top of Pages unlocks automatic builds and deploys, preview deployments, instant rollbacks, etc.<br/>
|
||
> From SvelteKit's perspective, there is no difference and no functionality loss when migrating to/from the Workers and the Pages adapters.
|
||
|
||
## Installation
|
||
|
||
```sh
|
||
$ npm i --save-dev @sveltejs/adapter-cloudflare
|
||
```
|
||
|
||
## Usage
|
||
|
||
You can include these changes in your `svelte.config.js` configuration file:
|
||
|
||
```js
|
||
import adapter from '@sveltejs/adapter-cloudflare';
|
||
|
||
export default {
|
||
kit: {
|
||
adapter: adapter()
|
||
}
|
||
};
|
||
```
|
||
|
||
## Deployment
|
||
|
||
Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started) for Cloudflare Pages to begin.
|
||
|
||
When configuring your project settings, you must use the following settings:
|
||
|
||
- **Framework preset** – None
|
||
- **Build command** – `npm run build` or `svelte-kit build`
|
||
- **Build output directory** – `.svelte-kit/cloudflare`
|
||
- **Environment variables**
|
||
- `NODE_VERSION`: `16`
|
||
|
||
> **Important:** You need to add a `NODE_VERSION` environment variable to both the "production" and "preview" environments. You can add this during project setup or later in the Pages project settings. SvelteKit requires Node `16.9` or later, so you should use `16` as the `NODE_VERSION` value.
|
||
|
||
## Environment variables
|
||
|
||
The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object, containing KV/DO namespaces etc, is passed to SvelteKit via the `platform` property along with `context` and `caches`, meaning you can access it in hooks and endpoints:
|
||
|
||
```js
|
||
export async function POST({ request, platform }) {
|
||
const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
|
||
}
|
||
```
|
||
|
||
To make these types available to your app, reference them in your `src/app.d.ts`:
|
||
|
||
```diff
|
||
/// <reference types="@sveltejs/kit" />
|
||
+/// <reference types="@sveltejs/adapter-cloudflare" />
|
||
|
||
declare namespace App {
|
||
interface Platform {
|
||
+ env?: {
|
||
+ YOUR_KV_NAMESPACE: KVNamespace;
|
||
+ YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
|
||
+ };
|
||
}
|
||
}
|
||
```
|
||
|
||
> `platform.env` is only available in the production build. Use [wrangler](https://developers.cloudflare.com/workers/cli-wrangler) to test it locally
|
||
|
||
## Notes
|
||
|
||
Functions contained in the `/functions` directory at the project's root will _not_ be included in the deployment, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/platform/functions/#advanced-mode). Functions should be implemented as [endpoints](https://kit.svelte.dev/docs/routing#endpoints) in your SvelteKit app.
|
||
|
||
The [`_headers` and `_redirects`](config files) files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the `/static` folder.
|
||
|
||
However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [endpoints](https://kit.svelte.dev/docs/routing#endpoints) or with the [`handle`](https://kit.svelte.dev/docs/hooks#handle) hook.
|
||
|
||
## Changelog
|
||
|
||
[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/master/packages/adapter-cloudflare/CHANGELOG.md).
|