1
1
---
2
2
type : integration
3
3
title : ' @astrojs/vercel'
4
- description : 学习如何使用 @astrojs/vercel 服务端渲染适配器来部署你的 Astro 项目。
4
+ description : 学习如何使用 @astrojs/vercel 适配器来部署你的 Astro 项目。
5
5
sidebar :
6
6
label : Vercel
7
7
githubIntegrationURL : ' https://github.com/withastro/astro/tree/main/packages/integrations/vercel/'
@@ -13,21 +13,21 @@ import Since from '~/components/Since.astro';
13
13
import ReadMore from ' ~/components/ReadMore.astro'
14
14
import { Steps } from ' @astrojs/starlight/components' ;
15
15
16
- 此适配器允许 Astro 将你的[ 按需渲染的路由 ] ( /zh-cn/guides/on-demand-rendering/ ) 部署到[ Vercel] ( https://www.vercel.com/ ) 。
16
+ 此适配器允许 Astro 将你的 [ 按需渲染路由及其功能 ] ( /zh-cn/guides/on-demand-rendering/ ) 部署到 [ Vercel] ( https://www.vercel.com/ ) ,包括 [ 服务器群岛 ] ( /zh-cn/guides/server-islands/ ) , [ actions ] ( /zh-cn/guides/actions/ ) 以及 [ sessions ] ( /zh-cn/guides/sessions /) 。
17
17
18
- 如果你使用 Astro 作为静态站点生成器,只有当你使用额外的 Vercel 服务时(例如 [ Vercel 网络分析] ( https://vercel.com/docs/analytics ) ,[ Vercel 图像优化] ( https://vercel.com/docs/image-optimization ) ),你才需要这个适配器。否则,你不需要适配器来部署你的 ` 静态 ` 站点 。
18
+ 如果你使用 Astro 作为静态站点生成器,只有当你使用额外的 Vercel 服务时(例如 [ Vercel 网络分析] ( https://vercel.com/docs/analytics ) ,[ Vercel 图像优化] ( https://vercel.com/docs/image-optimization ) ),你才需要这个适配器。否则,你不需要适配器来部署你的静态站点 。
19
19
20
20
在我们的 [ Vercel 部署指南] ( /zh-cn/guides/deploy/vercel/ ) 中学习和部署你的 Astro 站点。
21
21
22
- ## 为什么选择 Astro Vercel
22
+ ## 为什么选择 Astro Vercel?
23
23
24
24
[ Vercel] ( https://www.vercel.com/ ) 是一个部署平台,它允许你通过直接连接到 GitHub 仓库来托管你的站点。这个适配器增强了 Astro 的构建过程,为通过 Vercel 进行部署做好了准备。
25
25
26
26
## 安装
27
27
28
28
Astro 包含了一个 ` astro add ` 命令,用于自动设置官方集成。如果你愿意,也可以[ 手动安装集成] ( #手动安装 ) 。
29
29
30
- 在 Astro 项目中使用以下 ` asrto add ` 命令添加 Vercel 适配器,以启用 SSR 。这将安装 ` @astrojs/vercel ` 并一步到位地对你的 ` astro.config.mjs ` 文件进行相应的更改。
30
+ 在 Astro 项目中使用以下 ` asrto add ` 命令添加 Vercel 适配器,以启用按需渲染 。这将安装 ` @astrojs/vercel ` 并一步到位地对你的 ` astro.config.mjs ` 文件进行相应的更改。
31
31
32
32
<PackageManagerTabs >
33
33
<Fragment slot = " npm" >
@@ -47,6 +47,8 @@ Astro 包含了一个 `astro add` 命令,用于自动设置官方集成。如
47
47
</Fragment >
48
48
</PackageManagerTabs >
49
49
50
+ 现在,你可以启用 [ 对每个页面的按需渲染] ( /zh-cn/guides/on-demand-rendering/#启用按需渲染 ) ,或者将你的构建输出配置设置为 ` output: 'server' ` 从而 [ 默认对所有页面都进行服务器端渲染] ( /zh-cn/guides/on-demand-rendering/#server-模式 ) 。
51
+
50
52
### 手动安装
51
53
52
54
首先,使用适合你的包管理器,将 ` @astrojs/vercel ` 适配器添加到你项目的依赖项中:
@@ -69,15 +71,14 @@ Astro 包含了一个 `astro add` 命令,用于自动设置官方集成。如
69
71
</Fragment >
70
72
</PackageManagerTabs >
71
73
72
- 然后,将适配器和你想要的 [ 按需渲染模式 ] ( /zh-cn/guides/on-demand-rendering/ ) 添加到你的 ` astro.config.* ` 文件中:
74
+ 然后,将适配器添加到 ` astro.config.* ` 文件中:
73
75
74
- ``` js title="astro.config.mjs" ins={2, 6-7 }
76
+ ``` js title="astro.config.mjs" ins={2, 6}
75
77
import { defineConfig } from ' astro/config' ;
76
78
import vercel from ' @astrojs/vercel' ;
77
79
78
80
export default defineConfig ({
79
81
// ...
80
- output: ' server' ,
81
82
adapter: vercel (),
82
83
});
83
84
```
@@ -107,13 +108,12 @@ vercel deploy --prebuilt
107
108
108
109
对于
` @vercel/[email protected] ` 及更高版本,请使用 Vercel 的 Analytics 组件来启用
[ Vercel Web Analytics
] ( https://vercel.com/docs/concepts/analytics ) 。
109
110
110
- ``` js title="astro.config.mjs" ins={8-10 }
111
+ ``` js title="astro.config.mjs" ins={7-9 }
111
112
import { defineConfig } from ' astro/config' ;
112
113
import vercel from ' @astrojs/vercel' ;
113
114
114
115
export default defineConfig ({
115
116
// ...
116
- output: ' server' ,
117
117
adapter: vercel ({
118
118
webAnalytics: {
119
119
enabled: true ,
@@ -199,13 +199,12 @@ import astroLogo from '../assets/logo.png';
199
199
200
200
它也可以设置为任意值,以使用自定义图像服务而不是 Astro 的内置图像服务。
201
201
202
- ``` js title="astro.config.mjs" ins={8-9 }
202
+ ``` js title="astro.config.mjs" ins={7-8 }
203
203
import { defineConfig } from ' astro/config' ;
204
204
import vercel from ' @astrojs/vercel' ;
205
205
206
206
export default defineConfig ({
207
207
// ...
208
- output: ' server' ,
209
208
adapter: vercel ({
210
209
imageService: true ,
211
210
devImageService: ' sharp' ,
@@ -224,13 +223,12 @@ export default defineConfig({
224
223
225
224
要启用此功能,在你的 ` astro.config.mjs ` 中的 Vercel 适配器配置里将 ` isr ` 设置为 true:
226
225
227
- ``` js title="astro.config.mjs" ins={8 }
226
+ ``` js title="astro.config.mjs" ins={7 }
228
227
import { defineConfig } from ' astro/config' ;
229
228
import vercel from ' @astrojs/vercel' ;
230
229
231
230
export default defineConfig ({
232
231
// ...
233
- output: ' server' ,
234
232
adapter: vercel ({
235
233
isr: true ,
236
234
}),
@@ -247,13 +245,12 @@ export default defineConfig({
247
245
248
246
你可以通过配置秒为单位的 ` expiration ` 值来改变缓存路由的时间长度:
249
247
250
- ``` js title="astro.config.mjs" {8-11 }
248
+ ``` js title="astro.config.mjs" {7-10 }
251
249
import { defineConfig } from ' astro/config' ;
252
250
import vercel from ' @astrojs/vercel' ;
253
251
254
252
export default defineConfig ({
255
253
// ...
256
- output: ' server' ,
257
254
adapter: vercel ({
258
255
isr: {
259
256
// 在首次请求时缓存所有页面,并保存 1 天
@@ -267,12 +264,11 @@ export default defineConfig({
267
264
268
265
要实现 Vercel 的[ 草稿模式] ( https://vercel.com/docs/build-output-api/v3/features#draft-mode ) 或[ 按需增量式静态再生 (ISR)] ( https://vercel.com/docs/build-output-api/v3/features#on-demand-incremental-static-regeneration-isr ) ,你可以创建一个绕过令牌,并将其连同任何要从缓存中排除的路由一起提供给 ` isr ` 配置:
269
266
270
- ``` js title="astro.config.mjs" {7-16 }
267
+ ``` js title="astro.config.mjs" {6-15 }
271
268
import { defineConfig } from ' astro/config' ;
272
269
import vercel from ' @astrojs/vercel' ;
273
270
274
271
export default defineConfig ({
275
- output: " server" ,
276
272
adapter: vercel ({
277
273
isr: {
278
274
// 你创建的一个私密随机字符串。
@@ -295,13 +291,12 @@ export default defineConfig({
295
291
296
292
使用此属性来强制将文件与你的函数打包在一起。当你发现缺失文件时,这很有帮助。
297
293
298
- ``` js title="astro.config.mjs" ins={8 }
294
+ ``` js title="astro.config.mjs" ins={7 }
299
295
import { defineConfig } from ' astro/config' ;
300
296
import vercel from ' @astrojs/vercel' ;
301
297
302
298
export default defineConfig ({
303
299
// ...
304
- output: ' server' ,
305
300
adapter: vercel ({
306
301
includeFiles: [' ./my-data.json' ],
307
302
}),
@@ -315,13 +310,12 @@ export default defineConfig({
315
310
316
311
使用此属性来从打包过程中排除任何会被包含的文件。
317
312
318
- ``` js title="astro.config.mjs" ins={8 }
313
+ ``` js title="astro.config.mjs" ins={7 }
319
314
import { defineConfig } from ' astro/config' ;
320
315
import vercel from ' @astrojs/vercel' ;
321
316
322
317
export default defineConfig ({
323
318
// ...
324
- output: ' server' ,
325
319
adapter: vercel ({
326
320
excludeFiles: [' ./src/some_big_file.jpg' ],
327
321
}),
@@ -335,13 +329,12 @@ export default defineConfig({
335
329
336
330
使用这个属性来延长或限制无服务器函数运行的最长持续时间(以秒为单位),直到超时。请参阅 [ Vercel 文档] ( https://vercel.com/docs/functions/serverless-functions/runtimes#maxduration ) 获取你的账号计划的默认和最大时限。
337
331
338
- ``` js title="astro.config.mjs" ins={8 }
332
+ ``` js title="astro.config.mjs" ins={7 }
339
333
import { defineConfig } from ' astro/config' ;
340
334
import vercel from ' @astrojs/vercel' ;
341
335
342
336
export default defineConfig ({
343
337
// ...
344
- output: " server" ,
345
338
adapter: vercel ({
346
339
maxDuration: 60
347
340
}),
@@ -356,13 +349,12 @@ export default defineConfig({
356
349
357
350
使用此属性启用 [ Vercel Skew protection] ( https://vercel.com/docs/deployments/skew-protection ) (适用于 Vercel Pro 和企业账户)。
358
351
359
- ``` js title="astro.config.mjs" ins={8 }
352
+ ``` js title="astro.config.mjs" ins={7 }
360
353
import { defineConfig } from ' astro/config' ;
361
354
import vercel from ' @astrojs/vercel' ;
362
355
363
356
export default defineConfig ({
364
357
// ...
365
- output: " server" ,
366
358
adapter: vercel ({
367
359
skewProtection: true
368
360
}),
@@ -383,7 +375,6 @@ import vercel from '@astrojs/vercel';
383
375
384
376
export default defineConfig ({
385
377
// ...
386
- output: ' server' ,
387
378
adapter: vercel ({
388
379
edgeMiddleware: true ,
389
380
}),
0 commit comments