前提准备

本地系统 macOS，远程服务器系统 centos 8.5，包管理工具：NPM，反向代理：nginx，要部署的是 nuxt 项目。

一个服务器
linux 基本操作命令（教程很多，可以参考linux）
SSR 和 nuxt（这里是v2.x）

部署流程

创建nuxt项目

根据官网 nuxt 创建一个简单的项目，基本的配置后，需要关注的是发布部署命令，添加脚本如下：

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

命令	描述
nuxt	启动一个热加载的 Web 服务器（开发模式） localhost:3000
nuxt build	利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）
nuxt start	以生产模式启动一个 Web 服务器 (需要先执行`nuxt build`)
nuxt generate	编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)

运行 npm run dev

运行 npm run build + npm run start

对比两者的访问地址都是localhost，只能通过固定本地 localhost:3000 才可以进访问，要改成支持本地 ip 也能访问，设置对外提供访问，因为需要在nuxt.config.js文件中配置 server，将 host 属性设置为'0.0.0.0'。

export default { 
    ...
    // 配置服务器 
    server: { 
        port: 3000,
        host: '0.0.0.0'
},

到目前都是在本地创建了一个nuxt项目，下面将准备一个服务器，并将nuxt项目发布到服务器上。

服务器购买

这里我选用了阿里云ecs云服务器（阿里云），大家可根据自己的需要自行选择。
购买完成后，需要设置服务器实例名和实例密码，这个之后使用ssh远程连接服务器会使用到。

连接服务器

服务器准备好后，我们可以在终端使用ssh远程连接服务器，提示要输入的密码就是之前设置的实例密码。

ok，连接成功。

这里推荐一个ssh工具客户端，Termius。后面演示也是使用的它。

服务器环境配置

nginx 反向代理

nginx把请求转发到真实的服务器那里去，完整的安装流程可以参考 nginx安装，如果使用教程中的版本make时出现报错的时候，建议更换新的版本，我使用的是nginx-1.20.2，亲测没问题。

node

node下载
选择稳定版 🔽

我这里安装在/usr/local/src，和nginx在同一个目录中。

解压缩

xz -d node-v16.18.0-linux-x64.tar.xz
tar -xf node-v16.18.0-linux-x64.tar

配置环境变量，供全局使用

/etc/profile 文件中在export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL之前添加下面这段脚本，NODE_HOME根据你安装的目录来。

export NODE_HOME=/usr/local/node-v16.18.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH
export NODE_PATH=$NODE_HOME/lib/node_modules:$PATH

pm2

pm2 是 Node 的进程管理工具。使用到它的原因是启动项目之后，如果关闭了这个命令行窗口就无法访问这个项目，所以pm2可以用来兼顾关闭命令行窗口的时候，运行的项目依旧能够访问。在服务器中全局安装：

npm i -g pm2

我们也可以先在本地测试一下，本地也全局安装后，启动项目。

pm2 start npm -- start

下面是pm2常用的命令👇🏻

$ pm2 [list|ls|status] //列出 PM2 管理的所有应用程序的状态 
$ pm2 delete 0           # 删除id为0的进程
$ pm2 delete all         # 删除所有

项目上传到服务器并启动

上传文件这里只需要上传这五个文件。

我这里放在/home/nuxt目录下。

安装依赖

启动应用

pm2 start npm -- start

启动成功！

配置nginx代理

我们已经把项目放到服务器上了，而且在服务器环境中已经启动成功了，但是现在如果我们通过服务器ip访问这个应用，nuxt-demo121.199.24.169还行不通，需要nginx中设置反向代理将请求转发给上游服务器。编辑/usr/local/webserver/nginx/conf目录下的nginx.conf文件，如下：

 # 新建一个 nuxt server 服务
  upstream nuxt {
    server 0.0.0.0:3000;
    keepalive 64;
  }
  server {
    listen       8081; // 监听的端口
    server_name  localhost;
    location / {
      proxy_pass http://nuxt;  #对应上面 upstream 中新建的服务名
      index index.html index.htm;
 }

这里我新增了一个端口8081。

现在我们再来访问nuxt-demo，就可以看到nuxt项目页面啦！

总结

在部署的过程中可能会遇到各种各样的问题，比如可能会出现因为系统或者安装版本的问题，但仔细排查，不难发现问题在哪里。
上面是手动传送文件，实际上不可能每次都这样手动部署，为此我们需要CI/CD服务来帮助实现自动化部署，下次我们来看看如何使用自动化部署工具之一Github Action实现。 👉🏻 Github Actions自动部署Nuxt2项目

Nuxt2 项目部署详细流程（nginx + pm2）