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
```
@@ -100,13 +101,12 @@ netlify deploy
100
101
101
102
要在预渲染页面上实现重定向、访问控制或自定义响应头,请通过启用 [ ` edgeMiddleware ` 选项] ( /zh-cn/reference/adapter-reference/#edgemiddleware ) 在 Netlify Edge Functions 上运行你的中间件:
102
103
103
- ``` js title="astro.config.mjs" ins={8 }
104
+ ``` js title="astro.config.mjs" ins={7 }
104
105
import { defineConfig } from ' astro/config' ;
105
106
import netlify from ' @astrojs/netlify' ;
106
107
107
108
export default defineConfig ({
108
109
// ...
109
- output: ' server' ,
110
110
adapter: netlify ({
111
111
edgeMiddleware: true ,
112
112
}),
@@ -153,27 +153,25 @@ declare namespace App {
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' ],
@@ -219,17 +217,17 @@ Astro [Session API](/zh-cn/guides/sessions/) 允许你在请求间,轻松地
219
217
220
218
可以缓存没有任何动态内容的按需渲染页面,以提高性能并降低资源使用率。在适配器中启用 ` cacheOnDemandPages ` 选项将会缓存所有服务器渲染的页面,最长可达一年:
221
219
222
- ``` ts title="astro.config.mjs"
220
+ ``` ts title="astro.config.mjs" ins={4}
223
221
export default defineConfig ({
224
222
// ...
225
- output: ' server' ,
226
223
adapter: netlify ({
227
224
cacheOnDemandPages: true ,
228
225
}),
229
226
});
230
227
```
231
228
232
229
这可以通过向你的响应添加缓存头来根据每个页面进行更改:
230
+
233
231
``` astro title="pages/index.astro"
234
232
---
235
233
import Layout from '../components/Layout.astro';
@@ -263,13 +261,12 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=45, must-revali
263
261
264
262
请提供一个数组,其中包含需附加的文件路径,路径需要是相对于项目 [ ` root ` ] ( /zh-cn/reference/configuration-reference/#root ) 的相对路径。绝对路径可能会无法正常工作。
265
263
266
- ``` js title="astro.config.mjs" ins={8 }
264
+ ``` js title="astro.config.mjs" ins={7 }
267
265
import { defineConfig } from ' astro/config' ;
268
266
import netlify from ' @astrojs/netlify' ;
269
267
270
268
export default defineConfig ({
271
269
// ...
272
- output: ' server' ,
273
270
adapter: netlify ({
274
271
includeFiles: [' ./my-data.json' ], // 相对于 `root`
275
272
}),
@@ -291,13 +288,12 @@ export default defineConfig({
291
288
292
289
请提供一个数组,其中包含需要排除的文件路径,路径需要是相对于项目 [ ` root ` ] ( /zh-cn/reference/configuration-reference/#root ) 的相对路径。绝对路径可能会无法正常工作。
293
290
294
- ``` js title="astro.config.mjs" ins={8 }
291
+ ``` js title="astro.config.mjs" ins={7 }
295
292
import { defineConfig } from ' astro/config' ;
296
293
import netlify from ' @astrojs/netlify' ;
297
294
298
295
export default defineConfig ({
299
296
// ...
300
- output: ' server' ,
301
297
adapter: netlify ({
302
298
excludeFiles: [' ./src/some_big_file.jpg' ], // 相对于 `root`
303
299
}),
@@ -308,12 +304,11 @@ export default defineConfig({
308
304
309
305
不论是 ` includeFiles ` 还是 ` excludeFiles ` 都支持使用 [ glob 模式] ( /zh-cn/guides/imports/#glob-模式 ) 来匹配多项文件:
310
306
311
- ``` js title="astro.config.mjs" ins={8, 11-12 }
307
+ ``` js title="astro.config.mjs" ins={7, 10-11 }
312
308
import { defineConfig } from ' astro/config' ;
313
309
import netlify from ' @astrojs/netlify' ;
314
310
315
311
export default defineConfig ({
316
- output: ' server' ,
317
312
adapter: netlify ({
318
313
includeFiles: [
319
314
' ./data/**/*.json'
0 commit comments