在 Deno Deploy 上运行你的 Next.js SSR 应用
Next.js 是一个强大的元框架,构建于 React 之上,它简化了构建服务器渲染或静态生成的 Web 应用程序的过程。你可以在 Deno 中使用 Next.js,但是如何在 Deno Deploy(我们全球分布式的无服务器 JavaScript 平台)上运行它呢?
到目前为止,只有静态 Next.js 站点 (SSG) 可以部署到 Deno Deploy。今天,我们宣布新增对 Next.js 应用的服务器端渲染的支持!在这篇博文中,我们将向你展示如何通过链接 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
。这个 CLI 可以管理你项目的 整个部署生命周期,从创建新项目、尾部流式传输日志、将之前的部署提升到生产环境等等。它还使你能够从 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
deploy 命令使用 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 上,你可以做更多的事情
🚨️ Deno 2.1 刚刚发布 🚨️
以及更多!
请收看我们 明天太平洋时间上午 8 点 / 东部时间上午 11 点 / UTC 下午 4 点的直播,Deno 团队将在直播中演示和讨论 2.1 版本中的最大更新。