九旬的博客

先了解下常用的三种部署方式的简单介绍以及它们的优缺点：

  1. Vercel 部署:

    • 优点:

      • 极其简单：Vercel 提供了与 Next.js 集成良好的部署平台，使得部署变得非常容易。
      • 自动化：Vercel 提供自动部署、CI/CD 和部署预览等功能，大大简化了部署流程。
      • 高性能：Vercel 的服务器分布在全球多个地点，确保站点的高性能和快速加载速度。

    • 缺点:

      • 有费用：尽管有免费套餐，但高级功能可能需要付费。
      • 有一定学习曲线：对于初学者来说，可能需要一些时间来适应 Vercel 平台。

  2. 服务器部署:

    • 优点:

      • 灵活性：你可以选择任何云提供商或自己的服务器来托管 Next.js 应用，从而具有更大的自定义和控制权。
      • 适用于大型应用：适用于需要大规模处理的应用，可以根据需求调整服务器资源。

    • 缺点:

      • 更复杂：需要自行设置服务器环境、Nginx 或其他反向代理，以及部署流程，这可能相对复杂，特别是对新手来说。
      • 成本：取决于所选的云提供商，成本可能会较高，尤其是在流量大或需要高性能服务器时。

  3. 静态部署:

    • GitHub Pages 部署:

      • 优点:

        • 免费：GitHub Pages 是免费托管静态文件的好选择。
        • 集成：与 GitHub 仓库集成，使得发布变得非常简单。
        • 适用于文档和演示：适用于文档站点、演示和小型项目。

      • 缺点:

        • 有限制：GitHub Pages 有一些限制，如每月带宽限制，不适合大规模应用。
        • 静态：GitHub Pages 仅支持静态文件托管，对于需要服务器端渲染的应用不适用。

由于 GitHub Pages 是静态网站托管服务，因此它不支持在服务端渲染应用程序。

因此，您需要使用 Next.js 的静态导出功能来生成静态文件并将其部署到 GitHub Pages 上。

Vercel 部署

这个最简单了，直接在 GitHub 新建 Next.js 项目之后在 Vercel 导入即可，不仅支持自动部署，还可以提供免费的服务运行环境。

可以参考官方文档：vercel next depolyopen in new window

当然，Vercel 部署的网站是会自动分配一个可访问的 vercel.app 后缀的域名的，但是国内因为某些原因访问不了，这里告诉大家一个方法，可以在国内购买一个域名，然后绑定一下就可以了。

部署到 Node 服务器

Next.js 可以部署到任何支持 Node.js 的托管提供商。例如，阿里云服务器或腾讯云服务器。

如果是我们自己购买的云服务，可以使用这种方式，首先先在服务里安装 Node 环境，然后执行 build 命令以后,生成的内容默认在.next文件夹里

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}
1
2
3
4
5
6
7
8

然后，运行  npm run build  以生成应用程序。最后，运行  npm run start  以启动 Node.js 服务器。此服务器支持 Next.js 的所有功能。

也可以用 docker 部署。

Next.js 可以部署到任何支持Docker 的托管提供商open in new window容器。部署到 Kubernetesopen in new window等容器编排器时，您可以使用此方法或HashiCorp Nomadopen in new window，或者在任何云提供商的单个节点内运行时。

  1. 安装 Dockeropen in new window在你的机器上
  2. 克隆with-dockeropen in new window例子
  3. 构建你的容器：docker build -t nextjs-docker .
  4. 运行你的容器：docker run -p 3000:3000 nextjs-docker

如果您需要在多个环境中使用不同的环境变量，请查看官方的with-docker-multi-envopen in new window例子。

静态部署（Github Page）

当我们的应用没有服务相关的功能时，可以选择静态部署，静态部署和正常使用 React 部署是一样的，只不过我们是部署在 GitHub 上。

首先在next.config.js中配置：

const nextConfig = {
  output: "export",
};
1
2
3

将打包命令加入到package.json里，然后执行npm run build。

"scripts": {
  "build": "next build && next export"
}
1
2
3
4

默认生成的静态页面在out文件夹里

Github 配置

设置 pages 页面的分支为 gh-pages 分支。

image.png

在next.config.js中设置打包后静态资源的路径，也就是仓库名字。

/** @type {import('next').NextConfig} */
const repo = "dir-tree";
const assetPrefix = `/${repo}/`;
const basePath = `/${repo}`;

const nextConfig = {
  basePath,
  assetPrefix,
  output: "export",
};

module.exports = nextConfig;
1
2
3
4
5
6
7
8
9
10
11
12

我们本地开发不需要带有 repo 的前缀，所以为了不影响本地开发，所以我们需要加个判断，只有在 GitHub 构建时才加前缀。

/** @type {import('next').NextConfig} */

const isGithubActions = process.env.GITHUB_ACTIONS || false;
let assetPrefix = "";
let basePath = "";

if (isGithubActions) {
  // 去掉 `<owner>/`
  const repo = process.env.GITHUB_REPOSITORY.replace(/.*?\//, "");

  assetPrefix = `/${repo}/`;
  basePath = `/${repo}`;
}

const nextConfig = {
  basePath,
  assetPrefix,
  output: "export",
};

module.exports = nextConfig;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

改完之后，直接推送到仓库，即可成功！

image.png

如果你想看完整代码可以去 我的仓库open in new window 查阅

常见问题

如果在构建过程中遇到这个问题，请按照第二图解决即可。 问题截图

解决方法

参考