简介
Next.js 是一款基于 React 的服务端渲染框架，可以让你快速建立一个 SSR 应用。在使用 Next.js 进行项目开发之前，需要对其部署方式和最佳实践进行理解。
本文将从以下几个方面来讲述：
- Next.js 的部署方式
- Next.js 部署的最佳实践
- 一个简单的 Next.js 应用部署实践
Next.js 的部署方式
本地部署
开发者可以通过本地部署的方式进行 Next.js 应用的开发测试，具体步骤如下：
- 下载 Node.js 环境，可以在 Node.js 官网 下载安装包并进行安装。
- 用命令行工具进入 Next.js 项目的根目录。
- 执行命令
npm install安装项目依赖。 - 启动项目：
npm run dev。如果没有任何报错，就可以在浏览器中访问http://localhost:3000来访问应用程序。
容器化部署
Docker 可以方便地进行应用的部署，不需要手动配置环境和依赖。针对 Next.js 应用，开发人员可以选择直接使用 offical 的 Docker 镜像。
例如，下面的 Dockerfile 文件将会在构建时使用 offical 的 Next.js 镜像来构建一个 Docker 镜像。
-- -------------------- ---- ------- - --- -- -------- ---- ------- -- - ------ ----- ---- ------------ - --- --- ------- --------- -- ---- ------- ---- - ---- --- ------- --------- -------- ---- --- --------- -- ---- ---- - ---- - ------- --- ------ -------- --- --- ------- - ---- ---- ---- --------- -- --- ----- ------- ---- --------- ------ ---- - ------ ----------- -------- --- -------- ---------- - --- --- ------- ---- --- --------- -------- --- ------- --------
在 Dockerfile 所在的目录下执行如下代码构建 docker 镜像：
docker build -t <docker-image-name> . #.表示当前目录
启动容器：
docker run -it --rm --name <container-name> -p 8080:3000 <docker-image-name>
确保将 3000 端口映射到 8080 端口来访问应用。
服务器部署
服务器部署是将应用程序部署到远程服务器，使其能够通过 IP 地址或域名进行访问。通常，可以在服务器上安装 Nginx 或 Apache 来代理 Next.js 应用运行，具体步骤如下：
- 在服务器上安装 Node.js 环境。
- 安装 pm2 进程守护器：
npm install pm2 -g。 - 将应用程序拷贝到服务器。
- 启动应用程序：
pm2 start npm --name app-name -- run start，其中 app-name 替换成应用名称。
在服务器安装 Nginx 后，需要通过以下几个步骤来配置 Nginx 代理：
- 编辑 Nginx 配置文件：
sudo vim /etc/nginx/sites-available/app-name.conf。 - 配置文件中添加以下代码：
-- -------------------- ---- -------
------ -
------ ---
----------- ------------
-------- - -
---------- ----------------------
---------------- ---- ------
---------------- --------------- ---------------------------
---------------- --------- -------------
-
-- 重启 Nginx：
sudo systemctl restart nginx。
Next.js 部署的最佳实践
- 尽量使用 Server-Side Rendering，提高网站的首次渲染速度，降低图片占用带宽，提高页面的 SEO。
- 优化代码，减小代码体积，同时使用 compression 中间件等自动压缩工具来减小文件传输大小。
- 将图片或文件存放于 CDN 上，减轻服务器带宽压力。
- 巧妙用缓存，优化用户体验。
- 使用 pm2 管理进程使得应用程序更加稳定，并且方便管理和部署。
一个简单的 Next.js 应用部署实践
这里通过一个简单的 Next.js 应用示例来说明如何进行 Next.js 应用部署。
- 首先，将当前项目 build。
npm run build
- 在根目录下新建 next.config.js 文件，配置应用程序启动 (根据实际情况配置)。比如下面这样，让应用监听 3000 端口：
module.exports = {
env: {
DOMAIN_NAME: process.env.DOMAIN_NAME || 'localhost',
DOMAIN_PROTOCOL: process.env.DOMAIN_PROTOCOL || 'http',
PORT: process.env.PORT || 3000
}
}- 在根目录下新建 server.js 文件，启动 Next.js 应用。server.js 文件的代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - -------------------- --- -------------
----- ---- - ---------------- -- -----
----- --- - ------ --- ---
----- ------ - ----------
----- ------ - ------------------------
---
----------
-------- -- -
--------------- ----- ---- -- -
------ ----------- -----
---
------------------- --- -- -
-- ----- ----- ----
-------------- ----- -- ----------
---
--
--------- -- -
------------------------
----------------
---全局安装
pm2：npm install pm2 -g，再执行如下命令启动应用程序：pm2 start ./server.js --name "test"。这会启动一个名为test的进程。在 Nginx 配置中，使用
proxy_pass将流量转发到 PM2 中的进程：proxy_pass http://localhost:3000;。重启 Nginx：sudo service nginx restart。
通过以上步骤部署成功后，用户可以通过 IP 地址或者域名来访问我们的应用程序。
总结
本文着重介绍了 Next.js 的部署方式和最佳实践。掌握好这些内容，你就可以方便地将你的 Next.js 应用部署到各种不同的环境中，并且优化你的应用程序，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a915af48841e98945632af
