【服务端渲染】手动部署 NuxtJs 项目

项目说明

笔记来源：拉勾教育 大前端高薪训练营

阅读建议：建议通过左侧导航栏进行阅读

Nuxt.js 发布部署

打包

Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。

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

如果使用了 Koa/Express 等 Node.js Web 开发框架，并使用了 Nuxt 作为中间件，可以自定义 Web 服 务器的启动入口：

命令	描述
NODE_ENV=development nodemon server/index.js	启动一个热加载的自定义 Web 服务器（开发模 式）。
NODE_ENV=production node server/index.js	以生产模式启动一个自定义 Web 服务器 (需要先执行 nuxt build)。

参数

• 可以使用 –help 命令来获取详细用法。

• 常见的命令有：

  • –config-file 或 -c: 指定 nuxt.config.js 的文件路径。
  • –spa 或 -s: 禁用服务器端渲染，使用SPA模式
  • –unix-socket 或 -n: 指定UNIX Socket的路径。

• 可以将这些命令添加至 package.json：

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

  这样可以通过 npm run <command> 来执行相应的命令。如: npm run dev。

  提示:

  ​要将参数传递给npm命令，您需要一个额外的 – 脚本名称(例如： npm run dev --参数 --spa)

开发模式

• 可通过以下命令以开发模式启动带热加载特性的 Nuxt 服务：

    nuxt 
    # 或 
    npm run dev 
  

部署方式

• 配置 Host + Port

• nuxt.config.js

  module.exports = {
      server: {
          // 设置成 0.0.0.0 监听所有的网卡地址
          host: '0.0.0.0', // 访问地址 default localhost
          port: 3000       // 端口号 port
      },
  }
  

• 压缩发布包

  把下面图中标识的文件，进行压缩

  

  说明：

  • .nuxt：NuxtJs 自动生成的资源文件
  • static：存放静态资源
  • nuxt.config.js：NuxtJs 的配置文件，为 Nuxt 服务提供支持
  • package.json 和 package-lock.json：在服务端也需要安装第三方依赖包

• 把发布包传到服务端

  • 查看服务器地址：（阿里云服务器为例）

    

    • 连接服务器(cmd 命令行、XShell …)

    ssh root@公网IP
    

    提示：root@123.57.28.48's password（输入密码），如图所示：
    
    若忘记密码，则可以重置实例密码，如图所示：

    
    

    • 在服务器中创建文件夹，并进入该文件夹

      mkdir realworld-nuxtjs
      cd realworld-nuxtjs/
    

  • 查看当前的目录路径

      pwd
    

    输出结果 /root/realworld-nuxtjs，如图所示：

    

  • 执行 exit 命令退出服务器，或者新开一个 cmd 窗口，将压缩包上传到服务器

      scp .\realworld-nuxtjs.zip root@公网IP://root/realworld-nuxtjs
    

    运行结果，如图所示：
    

    .\realworld-nuxtjs.zip ：上传的文件路径

    root@公网IP://root/realworld-nuxtjs：上传至服务器的存放位置

• 解压

  • 重新连接服务器，并进入压缩包存放的目录，进行解压

      unzip 压缩包名称
    

    运行效果，如图所示：

    

  • 查看解压后的文件，-a 表示查看全部（包括隐藏目录）

     ls -a
    

    可以看到全部的上传文件，如图所示：

    

• 安装依赖

  • 使用命令，安装依赖

     npm i
    

    安装成功，如图所示：

    

    注意：

    • 如果没有安装 node，先要在服务器上安装 node，否则会报错
    • node 安装教程：云服务器 ECS(CentOS) 安装 Node

• 启动服务

  • 使用命令，启动 Web 服务

     npm run start
    

    服务启动成功，如图所示：

    

  • 访问 公网Ip:port ，如图所示：

    

    注意：

    ​ 如果访问连接，没有响应，查看 是否配置安全组规则，或者 防火墙相关配置

pm2 启动 web 服务

PM2 是一个带有负载均衡功能的 Node 应用进程管理器。

• GitHub 仓库地址：https://github.com/Unitech/pm2

• 官网文档：https://pm2.keymetrics.io/

• 安装：

     npm install --global pm2
  

  执行结果，如图所示：

  

• 配置软连接，类似于 环境变量

    # ln -s pm2 二进制执行文件所在路径 /usr/local/bin(建立软连接的路径--环境变量)
    ln -s /usr/local/node-v14.15.4-linux-x64/bin/pm2 /usr/local/bin
  

• 进入项目文件所在目录，使用命令，启动服务：

    pm2 start 脚本路径
    # pm2 start npm -- start
  

  启动成功，如图所示：

  

• 关闭 pm2：

    pm2 stop id
    # 或
    pm2 stop name
    # pm2 stop 0
  

  运行结果，如图所示：

  

• PM2 常用命令

  命令	说明
  pm2 list	查看应用列表
  pm2 start	启动应用
  pm2 stop	停止应用
  pm2 reload	重载应用
  pm2 restart	重启应用
  pm2 delete	删除应用##

自动化部署

• 详情参见：【前端自动化构建】之 自动化部署