1
1
---
2
2
type : integration
3
3
title : ' @astrojs/netlify'
4
- description : 了解如何使用 @astrojs/netlify SSR 适配器来部署 Astro 项目。
4
+ description : 了解如何使用 @astrojs/netlify 适配器来部署 Astro 项目。
5
5
sidebar :
6
6
label : Netlify
7
7
githubIntegrationURL : ' https://github.com/withastro/astro/tree/main/packages/integrations/netlify/'
@@ -11,9 +11,9 @@ i18nReady: true
11
11
import PackageManagerTabs from ' ~/components/tabs/PackageManagerTabs.astro'
12
12
import Since from ' ~/components/Since.astro' ;
13
13
14
- 此适配器可以部署你的 [ 按需渲染路由 ] ( /zh-cn/guides/on-demand-rendering/ ) 到 [ Netlify] ( https://www.netlify.com/ ) 。
14
+ 此适配器允许 Astro 将你的 [ 按需渲染路由及其功能 ] ( /zh-cn/guides/on-demand-rendering/ ) 部署到 [ Netlify] ( https://www.netlify.com/ ) ,包括 [ 服务器群岛 ] ( /zh-cn/guides/server-islands/ ) , [ actions ] ( /zh-cn/guides/actions/ ) 以及 [ sessions ] ( /zh-cn/guides/sessions /) 。
15
15
16
- 如果你正在使用 Astro 作为静态站点生成器 ,则不需要适配器。
16
+ 如果你需要额外的、需要服务器参与的 Netlify 功能(例如 [ Netlify 图片 CDN ] ( #netlify-图片-cdn-支持 ) ),那么你会需要用上此适配器,但如果你只是将 Astro 作为静态的站点构建器 ,则不需要适配器。
17
17
18
18
在我们的 [ Netlify 部署指南] ( /zh-cn/guides/deploy/netlify/ ) 中学习如何部署你的 Astro 网站。
19
19
@@ -25,7 +25,7 @@ import Since from '~/components/Since.astro';
25
25
26
26
Astro 包含了一个 ` astro add ` 命令,用于自动设置官方集成。如果你愿意,可以改为 [ 手动安装集成] ( #手动安装 ) 。
27
27
28
- 在 Astro 项目中使用以下 ` asrto add ` 命令添加 Netlify 适配器,以启用 SSR 。这将安装 ` @astrojs/netlify ` 并一步到位地对你的 ` astro.config.mjs ` 文件进行相应的更改。
28
+ 在 Astro 项目中使用以下 ` asrto add ` 命令添加 Netlify 适配器,以启用按需渲染 。这将安装 ` @astrojs/netlify ` 并一步到位地对你的 ` astro.config.mjs ` 文件进行相应的更改。
29
29
30
30
<PackageManagerTabs >
31
31
<Fragment slot = " npm" >
@@ -45,6 +45,8 @@ Astro 包含了一个 `astro add` 命令,用于自动设置官方集成。如
45
45
</Fragment >
46
46
</PackageManagerTabs >
47
47
48
+ 现在,你可以启用 [ 对每个页面的按需渲染] ( /zh-cn/guides/on-demand-rendering/#启用按需渲染 ) ,或者将你的构建输出配置设置为 ` output: 'server' ` 从而 [ 默认对所有页面都进行服务器端渲染] ( /zh-cn/guides/on-demand-rendering/#server-模式 ) 。
49
+
48
50
### 手动安装
49
51
50
52
首先,使用适合你的包管理器将 Netlify 适配器安装到你的项目依赖中:
@@ -67,15 +69,14 @@ Astro 包含了一个 `astro add` 命令,用于自动设置官方集成。如
67
69
</Fragment >
68
70
</PackageManagerTabs >
69
71
70
- 然后,将适配器和你所需的 [ 按需渲染模式 ] ( /zh-cn/guides/on-demand-rendering/ ) 添加到你的 ` astro.config.* ` 文件中:
72
+ 然后,将适配器添加到 ` astro.config.* ` 文件中:
71
73
72
- ``` js title="astro.config.mjs" ins={2, 6-7 }
74
+ ``` js title="astro.config.mjs" ins={2, 6}
73
75
import { defineConfig } from ' astro/config' ;
74
76
import netlify from ' @astrojs/netlify' ;
75
77
76
78
export default defineConfig ({
77
79
// ...
78
- output: ' server' ,
79
80
adapter: netlify (),
80
81
});
81
82
```
@@ -94,6 +95,28 @@ netlify deploy
94
95
95
96
这篇 [ Netlify 博客文章] ( https://www.netlify.com/blog/how-to-deploy-astro/ ) 和 [ Netlify 文档] ( https://docs.netlify.com/integrations/frameworks/astro/ ) 提供了更多关于如何使用这个集成部署到 Netlify 的信息。
96
97
98
+ ### 在 Netlify Edge Functions 上运行 Astro 中间件
99
+
100
+ 任何 Astro 中间件都会在构建时应用于预渲染页面,在运行时应用于按需渲染页面。
101
+
102
+ 要在预渲染页面上实现重定向、访问控制或自定义响应头,请通过启用 [ ` edgeMiddleware ` 选项] ( /zh-cn/reference/adapter-reference/#edgemiddleware ) 在 Netlify Edge Functions 上运行你的中间件:
103
+
104
+ ``` js title="astro.config.mjs" ins={7}
105
+ import { defineConfig } from ' astro/config' ;
106
+ import netlify from ' @astrojs/netlify' ;
107
+
108
+ export default defineConfig ({
109
+ // ...
110
+ adapter: netlify ({
111
+ edgeMiddleware: true ,
112
+ }),
113
+ });
114
+ ```
115
+
116
+ 当 ` edgeMiddleware ` 启用时,边缘函数将为所有请求执行你的中间件代码,包括静态资源、预渲染页面和按需渲染页面。
117
+
118
+ 对于按需渲染的页面,` context.locals ` 对象会被 JSON 序列化并通过标头发送给无服务器函数,由该函数执行渲染。作为安全措施,除非请求来自生成的边缘函数,否则无服务器函数将拒绝服务,并返回 ` 403 Forbidden ` 响应。
119
+
97
120
### 从你的站点访问 edge 上下文
98
121
99
122
Netlify Edge Functions 提供了一个 [ context 对象] ( https://docs.netlify.com/edge-functions/api/#netlify-specific-context-object ) ,其中包含有关请求的元数据,例如用户的 IP、地理位置数据和 cookie。
@@ -124,56 +147,31 @@ declare namespace App {
124
147
125
148
这不适用于预渲染的页面。
126
149
127
- ### 在 Netlify Edge Functions 上运行 Astro 中间件
128
-
129
- 任何 Astro 中间件都会在构建时应用于预渲染页面,在运行时应用于按需渲染页面。
130
-
131
- 要在预渲染页面上实现重定向、访问控制或自定义响应头,请通过启用 [ ` edgeMiddleware ` 选项] ( /zh-cn/reference/adapter-reference/#edgemiddleware ) 在 Netlify Edge Functions 上运行你的中间件:
132
-
133
- ``` js title="astro.config.mjs" ins={8}
134
- import { defineConfig } from ' astro/config' ;
135
- import netlify from ' @astrojs/netlify' ;
136
-
137
- export default defineConfig ({
138
- // ...
139
- output: ' server' ,
140
- adapter: netlify ({
141
- edgeMiddleware: true ,
142
- }),
143
- });
144
- ```
145
-
146
- 当 ` edgeMiddleware ` 启用时,边缘函数将为所有请求执行你的中间件代码,包括静态资源、预渲染页面和按需渲染页面。
147
-
148
- 对于按需渲染的页面,` context.locals ` 对象会被 JSON 序列化并通过标头发送给无服务器函数,由该函数执行渲染。作为安全措施,除非请求来自生成的边缘函数,否则无服务器函数将拒绝服务,并返回 ` 403 Forbidden ` 响应。
149
-
150
150
### Netlify 图片 CDN 支持
151
151
152
152
这个适配器默认使用 [ Netlify 图片 CDN] ( https://docs.netlify.com/image-cdn/overview/ ) 来实时转换图片,因而不会影响构建时间。它背后是使用 [ Astro 图片服务] ( /zh-cn/reference/image-service-reference/ ) 实现的。
153
153
154
154
如果你想退出 Netlify 的图片 CDN 远程图片优化,可以使用 ` imageCDN ` 选项:
155
155
156
- ``` js title="astro.config.mjs" ins={8 }
156
+ ``` js title="astro.config.mjs" ins={7 }
157
157
import { defineConfig } from ' astro/config' ;
158
158
import netlify from ' @astrojs/netlify' ;
159
159
160
160
export default defineConfig ({
161
161
// ...
162
- output: ' server' ,
163
162
adapter: netlify ({
164
163
imageCDN: false ,
165
164
}),
166
165
});
167
166
```
168
167
如果你使用的图片托管在另一个域名上,你必须使用 [ ` image.domains ` ] ( /zh-cn/reference/configuration-reference/#imagedomains ) 或 [ ` image.remotePatterns ` ] ( /zh-cn/reference/configuration-reference/#imageremotepatterns ) 配置选项授权该域名或 URL 模式:
169
168
170
- ``` js title="astro.config.mjs" ins={8-10 }
169
+ ``` js title="astro.config.mjs" ins={7-9 }
171
170
import { defineConfig } from ' astro/config' ;
172
171
import netlify from ' @astrojs/netlify' ;
173
172
174
173
export default defineConfig ({
175
174
// ...
176
- output: ' server' ,
177
175
adapter: netlify (),
178
176
image: {
179
177
domains: [' example.com' ],
@@ -209,21 +207,27 @@ export default defineConfig({
209
207
你仍然可以包含一个 ` public/_redirects ` 文件来手动重定向。你在重定向配置中指定的任何重定向都会被追加到你自己的重定向的末尾。
210
208
:::
211
209
210
+ ### Sessions
211
+
212
+ Astro [ Session API] ( /zh-cn/guides/sessions/ ) 允许你在请求间,轻松地存储用户数据。该功能可用于用户数据和偏好选项,购物车内容,资格鉴权。不同于 cookie 存储,这里不存在对数据大小的限制,并且可以将其存储在不同的设备上。
213
+
214
+ 当使用 Netlify 适配器时,Astro 将自动配置 [ Netlify Blobs] ( https://docs.netlify.com/blobs/overview/ ) 用于会话(session)存储。如果你更倾向于使用其他的会话存储驱动,你可以在 Astro config 中指定。更多细节请参见 [ ` session ` 配置参考] ( /zh-cn/reference/configuration-reference/#sessiondriver ) 。
215
+
212
216
### 缓存页面
213
217
214
218
可以缓存没有任何动态内容的按需渲染页面,以提高性能并降低资源使用率。在适配器中启用 ` cacheOnDemandPages ` 选项将会缓存所有服务器渲染的页面,最长可达一年:
215
219
216
- ``` ts title="astro.config.mjs"
220
+ ``` ts title="astro.config.mjs" ins={4}
217
221
export default defineConfig ({
218
222
// ...
219
- output: ' server' ,
220
223
adapter: netlify ({
221
224
cacheOnDemandPages: true ,
222
225
}),
223
226
});
224
227
```
225
228
226
229
这可以通过向你的响应添加缓存头来根据每个页面进行更改:
230
+
227
231
``` astro title="pages/index.astro"
228
232
---
229
233
import Layout from '../components/Layout.astro';
@@ -257,13 +261,12 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=45, must-revali
257
261
258
262
请提供一个数组,其中包含需附加的文件路径,路径需要是相对于项目 [ ` root ` ] ( /zh-cn/reference/configuration-reference/#root ) 的相对路径。绝对路径可能会无法正常工作。
259
263
260
- ``` js title="astro.config.mjs" ins={8 }
264
+ ``` js title="astro.config.mjs" ins={7 }
261
265
import { defineConfig } from ' astro/config' ;
262
266
import netlify from ' @astrojs/netlify' ;
263
267
264
268
export default defineConfig ({
265
269
// ...
266
- output: ' server' ,
267
270
adapter: netlify ({
268
271
includeFiles: [' ./my-data.json' ], // 相对于 `root`
269
272
}),
@@ -285,13 +288,12 @@ export default defineConfig({
285
288
286
289
请提供一个数组,其中包含需要排除的文件路径,路径需要是相对于项目 [ ` root ` ] ( /zh-cn/reference/configuration-reference/#root ) 的相对路径。绝对路径可能会无法正常工作。
287
290
288
- ``` js title="astro.config.mjs" ins={8 }
291
+ ``` js title="astro.config.mjs" ins={7 }
289
292
import { defineConfig } from ' astro/config' ;
290
293
import netlify from ' @astrojs/netlify' ;
291
294
292
295
export default defineConfig ({
293
296
// ...
294
- output: ' server' ,
295
297
adapter: netlify ({
296
298
excludeFiles: [' ./src/some_big_file.jpg' ], // 相对于 `root`
297
299
}),
@@ -302,12 +304,11 @@ export default defineConfig({
302
304
303
305
不论是 ` includeFiles ` 还是 ` excludeFiles ` 都支持使用 [ glob 模式] ( /zh-cn/guides/imports/#glob-模式 ) 来匹配多项文件:
304
306
305
- ``` js title="astro.config.mjs" ins={8, 11-12 }
307
+ ``` js title="astro.config.mjs" ins={7, 10-11 }
306
308
import { defineConfig } from ' astro/config' ;
307
309
import netlify from ' @astrojs/netlify' ;
308
310
309
311
export default defineConfig ({
310
- output: ' server' ,
311
312
adapter: netlify ({
312
313
includeFiles: [
313
314
' ./data/**/*.json'
0 commit comments