Next.js教程:网站部署

将Next.js部署到生产环境的最简单方法是使用Next.js的创建者提供的Vercel平台Vercel是用于静态站点,混合应用程序和无服务器功能的云平台。

入门

如果尚未这样做,则将Next.js应用程序推送到您选择的Git提供程序:GitHubGitLabBitBucket。您的存储库可以是私有的也可以是公共的。

然后,请按照下列步骤操作:

  1. 注册Vercel(无需信用卡)。
  2. 注册后,您将到达“导入项目”页面。在“来自Git存储库”下,选择您使用的Git提供程序并设置集成。(说明:GitHub / GitLab / BitBucket)。
  3. 设置完成后,单击“从…导入项目”,然后导入Next.js应用程序。它会自动检测到您的应用程序正在使用Next.js,并为您设置构建配置。无需更改任何内容-一切都应该正常!
  4. 导入后,它将部署您的Next.js应用并为您提供部署URL。点击“访问”以查看您的应用程序正在生产中。

恭喜你!您刚刚部署了Next.js应用程序!如有疑问,请参阅Vercel文档

如果您使用的是自定义服务器,我们强烈建议您从其迁移(例如,使用动态路由)。如果您无法迁移,请考虑其他托管选项。

DPS:开发,预览,运送

让我们讨论一下我们建议使用的工作流程。Vercel的支持就是我们所说的DPS工作流程:d evelop,P审查,小号臀部:

  • 开发:在Next.js中编写代码。保持开发服务器运行,并利用React快速刷新。
  • 预览:每次将更改推送到GitHub / GitLab / BitBucket上的分支时,Vercel都会自动创建一个具有唯一URL的新部署。打开拉取请求时,可以在GitHub上查看它们,也可以在Vercel项目页面上的“预览部署”下查看它们。在此处了解更多信息
  • 运送:准备运送时,将拉取请求合并到您的默认分支(例如main)。Vercel将自动创建生产部署。

通过使用DPS工作流程,除了进行代码审查之外,您还可以进行部署预览。每个部署都会创建一个可以共享或用于集成测试的唯一URL。

针对Next.js进行了优化

Vercel由Next.js的创建者制作,并具有对Next.js的一流支持。

例如,开箱即用完全支持混合页面方法。

  • 每个页面都可以使用“静态生成”或“服务器端渲染”。
  • 使用“静态生成”和资产(JS,CSS,图像,字体等)的页面将自动从Vercel的Edge Network提供服务,该速度非常快。
  • 使用服务器端渲染和API路由的页面将自动变为隔离的无服务器功能。这允许页面渲染和API请求无限扩展。

自定义域,环境变量,自动HTTPS等

  • 自定义域:Vercel上部署后,您可以为Next.js应用程序分配一个自定义域。在这里看看我们的文档
  • 环境变量:您也可以在Vercel上设置环境变量。在这里看看我们的文档。然后,您可以在Next.js应用程序中使用这些环境变量。
  • 自动HTTPS:默认情况下,HTTPS是启用的(包括自定义域),不需要额外的配置。我们会自动续订SSL证书。
  • 更多: 阅读我们的文档以了解有关Vercel平台的更多信息。

自动更新

部署Next.js应用程序时,您希望查看最新版本而无需重新加载。

路由时,Next.js会在后台自动加载应用程序的最新版本。对于客户端导航,next/link将暂时用作普通<a>标签。

如果预先已预取了新页面(带有旧版本)next/link,则Next.js将使用旧版本。然后,在刷新整个页面或进行多个客户端转换之后,Next.js将显示最新版本。

其他托管方式

Node.js 服务器

Next.js 可以部署到任何支持 Node.js 的托管提供商处。如果你使用的是 自定义服务器 方式,则应采用这种方式。

确保你的 package.json 文件中设置了 "build" 和 "start" 脚本:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

执行 next build 命令将在 .next 文件夹中构建出用于生产环境的应用程序。构建之后,执行 next start 命令启动一个支持 混合页面(hybrid pages) 的 Node.js 服务程序,该服务程序将同时服务于静态生成的页面和服务器端渲染的页面。

Docker镜像

Next.js可以部署到任何支持Docker容器的托管提供商。在部署到Kubernetes或HashiCorp Nomad之类的容器编排器时,或者在任何云提供商的单个节点内运行时,都可以使用此方法。

这里是一个多级Dockerfile使用node:alpine,您可以使用:

# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build

# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
RUN chown -R nextjs:nodejs /app/.next
USER nextjs

EXPOSE 3000

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
# RUN npx next telemetry disable

CMD ["node_modules/.bin/next", "start"]

确保将此Dockerfile放置在项目的根文件夹中。

您可以使用构建容器docker build . -t my-next-js-app并使用运行它docker run -p 3000:3000 my-next-js-app

导出静态 HTML

如果你想将 Next.js 应用程序导出为静态 HTML,请按照 文档 中的说明进行操作。

作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2451.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月20日 下午4:14
下一篇 2021年4月20日 下午4:32

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注