1
1
---
2
2
type : integration
3
3
title : ' @astrojs/cloudflare'
4
- description : 了解如何使用 @astrojs/cloudflare SSR 适配器来部署你的 Astro 项目。
4
+ description : 了解如何使用 @astrojs/cloudflare 适配器来部署你的 Astro 项目。
5
5
sidebar :
6
6
label : Cloudflare
7
7
githubIntegrationURL : ' https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare/'
@@ -14,9 +14,9 @@ import ReadMore from '~/components/ReadMore.astro';
14
14
import Since from ' ~/components/Since.astro' ;
15
15
import { Tabs , TabItem , Steps } from ' @astrojs/starlight/components' ;
16
16
17
- 此适配器允许 Astro 将你的 [ 按需渲染路由 ] ( /zh-cn/guides/on-demand-rendering/ ) 部署到[ Cloudflare] ( https://www.cloudflare.com/ ) .
17
+ 此适配器允许 Astro 将你的 [ 按需渲染路由及其功能 ] ( /zh-cn/guides/on-demand-rendering/ ) 部署到 [ Cloudflare] ( https://www.cloudflare.com/ ) ,包括 [ 服务器群岛 ] ( /zh-cn/guides/server-islands/ ) , [ actions ] ( /zh-cn/guides/actions/ ) 以及 [ sessions ] ( /zh-cn/guides/sessions/ ) 。
18
18
19
- 如果你使用 Astro 作为静态站点构建器,则不需要适配器来部署 Cloudflare 。
19
+ 如果你只是将 Astro 作为静态的站点构建器,则不需要适配器 。
20
20
21
21
在我们的 [ Cloudflare Pages 部署指南] ( /zh-cn/guides/deploy/cloudflare/ ) 中了解如何部署 Astro 站点。
22
22
@@ -28,7 +28,7 @@ Cloudflare 的 [开发者平台](https://developers.cloudflare.com/) 为用户
28
28
29
29
Astro 包含了一个 ` astro add ` 命令,用于自动设置官方集成。如果你愿意,可以改为 [ 手动安装集成] ( #手动安装 ) 。
30
30
31
- 在你的 Astro 项目中使用 ` astro add ` 命令添加 Cloudflare 适配器,以启用 SSR 。这将安装` @astrojs/cloudflare ` 并一步到位地对你的 ` astro.config.mjs ` 文件进行相应的更改。
31
+ 在你的 Astro 项目中使用 ` astro add ` 命令添加 Cloudflare 适配器,以启用服务器端渲染 。这将安装 ` @astrojs/cloudflare ` 并一步到位地对你的 ` astro.config.mjs ` 文件进行相应的更改。
32
32
33
33
<PackageManagerTabs >
34
34
<Fragment slot = " npm" >
@@ -48,6 +48,8 @@ Astro 包含了一个 `astro add` 命令,用于自动设置官方集成。如
48
48
</Fragment >
49
49
</PackageManagerTabs >
50
50
51
+ 现在,你可以启用 [ 对每个页面的按需渲染] ( /zh-cn/guides/on-demand-rendering/#启用按需渲染 ) ,或者将你的构建输出配置设置为 ` output: 'server' ` 从而 [ 默认对所有页面都进行服务器端渲染] ( /zh-cn/guides/on-demand-rendering/#server-模式 ) 。
52
+
51
53
### 手动安装
52
54
53
55
首先,使用合适的包管理器将 ` @astrojs/cloudflare ` 适配器添加到项目的依赖项中。
@@ -70,14 +72,13 @@ Astro 包含了一个 `astro add` 命令,用于自动设置官方集成。如
70
72
</Fragment >
71
73
</PackageManagerTabs >
72
74
73
- 然后,将适配器和所需的 [ 按需渲染模式 ] ( /zh-cn/guides/on-demand-rendering/ ) 添加到 ` astro.config.mjs ` 文件中:
75
+ 然后,将适配器添加到 ` astro.config.mjs ` 文件中:
74
76
75
- ``` js title="astro.config.mjs" ins={2,5-6 }
77
+ ``` js title="astro.config.mjs" ins={2,5}
76
78
import { defineConfig } from ' astro/config' ;
77
79
import cloudflare from ' @astrojs/cloudflare' ;
78
80
79
81
export default defineConfig ({
80
- output: ' server' ,
81
82
adapter: cloudflare (),
82
83
});
83
84
```
@@ -108,7 +109,7 @@ Cloudflare 适配器接受以下选项:
108
109
109
110
* ** ` cloudflare ` :** 使用 [ Cloudflare 图像调整] ( https://developers.cloudflare.com/images/image-resizing/ ) 服务。
110
111
* ** ` passthrough ` :** 使用现有的 [ ` noop ` ] ( /zh-cn/guides/images/#配置-no-op-透传服务 ) 服务。
111
- * ** ` compile ` :** 使用 Astro 的默认服务(sharp),但仅在构建时对预渲染的路由有效。在服务端渲染(SSR)中, 对按需渲染的页面,所有 ` astro:assets ` 功能都将被禁用。
112
+ * ** ` compile ` :** 使用 Astro 的默认服务(sharp),但仅在构建时对预渲染的路由有效。对按需渲染的页面,所有 ` astro:assets ` 功能都将被禁用。
112
113
* ** ` custom ` :** 总是使用在 [ Image 选项] ( /zh-cn/reference/configuration-reference/#image-选项 ) 中配置的图像服务。** 此选项不会检查配置的图像服务是否在 Cloudflare 的 ` workerd ` 运行时中工作。**
113
114
114
115
``` js title="astro.config.mjs" ins={6}
@@ -119,7 +120,6 @@ export default defineConfig({
119
120
adapter: cloudflare ({
120
121
imageService: ' cloudflare'
121
122
}),
122
- output: ' server'
123
123
})
124
124
```
125
125
@@ -214,15 +214,15 @@ export default defineConfig({
214
214
** 默认值:** ` undefined `
215
215
</p >
216
216
217
- 在 ` routes.extend.exclude ` 数组中配置要从按需渲染中排除的路由。这些路由将预先渲染并以静态方式提供,而不会调用服务端渲染(SSR)函数 。此外,你还可以使用这个选项直接提供任何静态资源(例如:图片、字体、css、js、html、txt、json 等)文件,无需通过 SSR 函数路由请求 。
217
+ 在 ` routes.extend.exclude ` 数组中配置要从按需渲染中排除的路由。这些路由将预先渲染并以静态方式提供,而不会调用服务端函数 。此外,你还可以使用这个选项直接提供任何静态资源(例如:图片、字体、css、js、html、txt、json 等)文件,无需通过服务端函数路由请求 。
218
218
219
219
``` js title="astro.config.mjs"
220
220
221
221
export default defineConfig ({
222
222
adapter: cloudflare ({
223
223
routes: {
224
224
extend: {
225
- include: [{ pattern: ' /static' }], // 将预渲染的页面路由到服务端渲染函数以实现按需渲染
225
+ include: [{ pattern: ' /static' }], // 将预渲染的页面路由到服务端函数以实现按需渲染
226
226
exclude: [{ pattern: ' /pagefind/*' }], // 使用 Starlight 的 pagefind 搜索,该搜索在构建时静态生成
227
227
}
228
228
},
@@ -372,7 +372,7 @@ declare namespace App {
372
372
373
373
#### Cloudflare Workers 路由
374
374
375
- 静态资源的路由是基于构建目录(例如 ` ./dist ` )的文件结构的。如果不匹配,将会回退至 SSR 的 Worker。更多内容详见 [ Cloudflare Workers 静态资源路由] ( https://developers.cloudflare.com/workers/static-assets/routing/ ) 。
375
+ 静态资源的路由是基于构建目录(例如 ` ./dist ` )的文件结构的。如果不匹配,将会回退至按需渲染的 Worker。更多内容详见 [ Cloudflare Workers 静态资源路由] ( https://developers.cloudflare.com/workers/static-assets/routing/ ) 。
376
376
377
377
不同于 [ Cloudflare Pages] ( #cloudflare-pages-路由 ) ,使用 Workers 时,无需 ` _routes.json ` 文件。
378
378
@@ -485,13 +485,12 @@ import { Buffer } from 'node:buffer';
485
485
486
486
你还需要修改你的 Astro 配置中的 ` vite ` 配置,以允许使用 ` node:* ` 导入语法:
487
487
488
- ``` js title="astro.config.mjs" ins={7-11 }
488
+ ``` js title="astro.config.mjs" ins={6-10 }
489
489
import { defineConfig } from " astro/config" ;
490
490
import cloudflare from ' @astrojs/cloudflare' ;
491
491
492
492
export default defineConfig ({
493
493
adapter: cloudflare ({}),
494
- output: ' server' ,
495
494
vite: {
496
495
ssr: {
497
496
external: [' node:buffer' ],
@@ -528,10 +527,9 @@ export default defineConfig({
528
527
529
528
目前,在 Wrangler 中运行应用程序时由于代码被压缩,错误消息并不是很有用。为了更好地进行调试,你可以将 ` vite.build.minify = false ` 添加到你的 ` astro.config.js ` 文件中。
530
529
531
- ``` js title="astro.config.mjs" ins={4-8 }
530
+ ``` js title="astro.config.mjs" ins={3-7 }
532
531
export default defineConfig ({
533
532
adapter: cloudflare (),
534
- output: ' server' ,
535
533
vite: {
536
534
build: {
537
535
minify: false ,
0 commit comments