在 Deno Deploy 上运行您的 Next.js SSR 应用程序
Next.js 是一个强大的元框架,构建于 React 之上,它简化了构建服务器渲染或静态生成网络应用的过程。你可以在 Deno 中使用 Next.js,但如何在我们的全球分布式无服务器 JavaScript 平台 Deno Deploy 上运行它呢?
迄今为止,只有静态 Next.js 网站(SSG)才能部署到 Deno Deploy。今天,我们宣布新增对 Next.js 应用服务器端渲染(SSR)的支持!在这篇博客文章中,我们将向你展示如何通过链接 GitHub 仓库和命令行两种方式,在 Deno Deploy 上部署一个支持 SSR 的 Next.js 应用。
🚨️ Deno 2.1 刚刚发布,带来了一流的 Wasm 支持、长期支持、改进的包管理等功能。请收看我们明天太平洋时间上午 8 点 / 东部时间上午 11 点 / UTC 时间下午 4 点的直播,Deno 团队将在直播中演示并讨论 2.1 版的最大更新。
连接 GitHub 仓库
链接你的 GitHub 仓库是部署任何项目到 Deno Deploy 最简单的方式。
如果你的 Next.js 应用是一个 GitHub 仓库,你可以按照以下步骤将其发布到 Deno Deploy。Deno Deploy 将自动检测并构建配置了默认输出和“standalone”输出的 Next.js 应用。
ℹ️ 如果你的应用使用默认输出配置,Deno Deploy 将使用
jsr:@deno/nextjs-start
作为入口点,它会调用next start
并暴露环境变量选项。
- Fork 此模板,或使用一个现有 Next.js 应用,并在
next.config.ts
中配置output: "standalone"
。 - 访问 https://dash.deno.com/new_project。如果你没有 Deno Deploy 账户,系统会要求你免费注册一个 GitHub 账户。
- 在下拉菜单的仓库中搜索你的 Next.js 项目。Deno Deploy 将自动检测你正在使用 Next.js,并准备必要的构建配置。
- 点击“部署项目”。Deno Deploy 将提交到你的仓库并运行新的
deploy.yml
操作,该操作将在每次推送到主分支时构建和部署你的项目。请注意,之后你可以通过编辑.github/workflows/deploy.yml
文件来自定义该操作。 - 你的项目现已上线!
deployctl
从命令行部署
使用 如果你更喜欢从命令行管理部署,你也可以使用 deployctl
。这个命令行工具可以管理你项目的整个部署生命周期,包括创建新项目、尾随流日志、将之前的部署提升到生产环境等等。它还允许你从 CI 等构建环境中与 Deno Deploy 进行交互。
- 如果你还没有安装
deployctl
,可以使用以下命令下载它
deno install -gArf jsr:@deno/deployctl
- 在你的 Next.js 项目根目录下,构建你的应用
deno task build
Deno 识别 package.json
。了解更多关于 Deno 的 Node 和 npm 兼容性。
- 最后,部署到 Deno Deploy
deployctl deploy --include=.next --include=public jsr:@deno/nextjs-start/v15
部署命令使用 JSR 包 jsr:@deno/nextjs-start/v15
,它使得在 Deno Deploy 中可以使用 next start
。如果你运行的是 Next.js 14 版,那么可以使用 jsr:@deno/nextjs-start
。
- 你的项目现已上线!
deployctl deploy --include=.next --include=public jsr:@deno/nextjs-start/v15
⚠ No project name or ID provided with either the --project arg or a config file.
ℹ Provisioning a new access token...
ℹ Authorization URL: https://dash.deno.com/signin/cli?claim_challenge=sj_eanwPi9woFjoXKbX51mh9IuOrEOTjoCJ7mf8sj8o
✔ Token obtained successfully
✔ Created new project 'cold-owl-38'
ℹ You can always change the project name with 'deployctl projects rename new-name' or in https://dash.deno.com/projects/cold-owl-38/settings
✔ Deploying to project cold-owl-38.
ℹ The project does not have a deployment yet. Automatically pushing initial deployment to production (use --prod for further updates).
ℹ Uploading all files from the current dir (/private/tmp/nextjs)
✔ Found 96 assets.
✔ Uploaded 97 new assets.
✔ Production deployment complete.
✔ Created config file 'deno.json'.
View at:
- https://cold-owl-38.deno.dev
- https://cold-owl-38-ge5wzec92q25.deno.dev
请注意,如果你倾向于使用 standalone
输出并通过命令行部署,你可以按照这些步骤操作。
下一步是什么
既然你的 Next.js 应用已部署到 Deno Deploy,你还可以做更多事情
- 添加数据库持久化数据存储,或使用像 Drizzle 或 Prisma 这样的 ORM
- 编写测试以确保你的应用已为生产环境做好准备
- 使用 Deno 队列管理异步任务或 cron 作业
🚨️ Deno 2.1 刚刚发布 🚨️
以及更多!
请收看我们明天太平洋时间上午 8 点 / 东部时间上午 11 点 / UTC 时间下午 4 点的直播,Deno 团队将在直播中演示并讨论 2.1 版的最大更新。