昆仑虚 - NextJS 项目如何进行部署？

引言

NextJS 是一个构建于 NodeJS 之上的一个 Web 开发框架。它基于 React 特性进行了一些列的扩展!! 在社区中也很是火热, 前段时间 「昆仑虚」 也终于完成了项目的迁移(React => NexJS)!!

那么接下来就是项目部署, NextJS 相比常规的前端部署还是有所区别的:

• 常规的前端项目只是包含一些静态的资源文件, 只要起一个 Web 服务器, 然后把资源丢上去就行, 比如: Nginx
• 但是对于 NextJS 项目是包含后端(Node)服务的, 当然官网 CI 工具其实也提供了相关 CI 命令, 正常只需要 Build 好后, 执行 start 命令即可, 但是我个人更希望能够使用 pm2 来运行, 基于 pm2 可以方便管理服务进程以及自带一套日志系统, 同时还希望能够通过 Docker 的方式来进行部署

• NextJS 项目地址(欢迎 Star): KunLunXu-CC/website
• Nginx 配置: docker/nginx/nginx.conf

一、架构

改造后 「昆仑虚」 整体部署希望如上图所示:

• 所有服务(包括 Nginx) 都是一个 Docker 容器
• Nginx 在中间只作为反向代理来使用
• 当用户访问前端页面或后端接口时, 通过 Nginx 方向代理到对应的服务

当然本文只讲解 NextJS 服务部署的部分, 与此同时最后还会给出 Nginx 反向代理的配置, 至于后端服务的部署则不做讲解, 而且前后端服务都是独立的, 确失后端部分也是不影响 NextJS 部署流程…

二、修改 NextJS 配置文件

修改 NextJS 配置文件, 确保在 Build 时输出模式为 standalone, 关于 output 配置具体信息可查阅 next-config-js/output

// next.config.mjs
const nextConfig = {
+ output: 'standalone',
};
export default nextConfig;

三、Dockerfile 编写

这里我是参考了官方的一个 Demo, 基于官方模版做了简单的调整

项目根目录下创建 dockerfile 配置文件, 配置内容如下, 具体的介绍看注释:

# 使用 amd64 架构的 node 镜像作为基础镜像
FROM --platform=linux/amd64 node AS bas