【服务端渲染】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 来执行相应的命令。如: 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
    

    提示：[email protected]'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	删除应用##

自动化部署

基本介绍

传统的部署方式

• 更新
  • 本地构建
  • 发布
• 更新
  • 本地构建
  • 发布
• …

现代化的部署方式（CI / CD）

CI / CD 服务

• Jenkins
• Gitlab CI
• GitHub Actions
• Travis CI
• Circle CI
• …

GitGub Actions

环境准备

• Linux 服务器
• 把代码提交到 GitHub 远程仓库

配置 GitHub Access Token

• 生成：https://github.com/settings/tokens

  • 登录 GitHub，点击右上角的 + 号，选择 Settings，点击 Developer settings，如图所示：

    

  • 然后，选择 Personal access tokens，点击Generate new token，生成 Token，如图所示：

    

  • 填写生成 Token 的相关信息，以及选择相关权限，如图所示：

    

  • 生成Token，如图所示：

    

• 配置到项目的 Secrets 中：项目所在的 GitHub 地址

  • 进入仓库，选择 settings，点击 Secrets，再点击 New repository secret，如图所示：
    

  • 将刚才生成的 token 填入，如图所示：

    

配置 GitHub Actions 执行脚本

• 在项目根目录创建 .github/workflows 目录

• 下载 main.yml 到 workflows 目录中

  • https://github.com/zimeng303/realworld-nuxt/blob/master/.github/workflows/main.yml

  • main.yml 配置代码

    name: Publish And Deploy Demo
    # 提交 以 V 开头的命令时，才会触发自动部署
    on:
      push:
        tags:
          - 'v*'
    
    jobs:
      build-and-deploy:
        runs-on: ubuntu-latest
        steps:
    
        # 下载源码
        - name: Checkout
          uses: actions/checkout@master
    
        # 打包构建
        - name: Build
          uses: actions/setup-node@master
        - run: npm install
        - run: npm run build
        - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json
    
        # 发布 Release
        - name: Create Release
          id: create_release
          uses: actions/create-release@master
          env:
            GITHUB_TOKEN: ${
             {
              secrets.TOKEN }} # TOKEN 对应我们添加的 secret name
          with:
            tag_name: ${
             {
              github.ref }}
            release_name: Release ${
             {
              github.ref }}
            draft: false
            prerelease: false
    
        # 上传构建结果到 Release
        - name: Upload Release Asset
          id: upload-release-asset
          uses: actions/upload-release-asset@master
          env:
            GITHUB_TOKEN: ${
             {
              secrets.TOKEN }}
          with:
          	# release 上传路径、名称配置
            upload_url: ${
             {
              steps.create_release.outputs.upload_url }}
            asset_path: ./release.tgz
            asset_name: release.tgz
            asset_content_type: application/x-tgz
    
        # 部署到服务器
        - name: Deploy
          uses: appleboy/ssh-action@master
          with:
          	# 在 Secrets 中，配置下面属性
            host: ${
             {
              secrets.HOST }}
            username: ${
             {
              secrets.USERNAME }}
            password: ${
             {
              secrets.PASSWORD }}
            port: ${
             {
              secrets.PORT }}
            # 下面的 release 地址 ，修改为 自己的
            script: |
              rm -rf /root/realworld-nuxtjs/
              mkdir /root/realworld-nuxtjs
              cd /root/realworld-nuxtjs          
              wget https://github.com/zimeng303/realworld-nuxt/releases/latest/download/release.tgz -O release.tgz
              tar zxvf release.tgz
              npm install --production
              pm2 reload pm2.config.json
    

• 修改配置

  • 配置中，所用到的下载资源地址，修改为自己项目所在的远程仓库地址

    

  • 将所需用到的 HOST 、PORT、USERNAME、PASSWORD ，配置到 Secrets 中

    

• 配置 PM2 配置文件

  • 根目录下，新建 pm2.config.json

    {
         
        "apps": [
            {
         
                "name": "RealWorld",
                "script": "npm",
                "args": "start"
            }
        ]
    }
  

• 提交更新

  • 将代码暂存到本地：

      git add .
    

  • 新建标签：

      git tag 版本号
      # git tag v1.0.0
    

  • 查看创建的标签：

     git tag 
    

    运行结果，如图所示：

    

  • 将代码推送到对应的 远程 tag 中：

      git push origin v0.2.0
    

    运行结果，如图所示：

    

  • 删除 tag

      git tag -d 版本号
      # git tag -d v0.1.3
    

  • 删除远程仓库的 tag

      git push origin :refs/tags/v0.1.3
    

• 查看自动部署状态

  • 登录 GitHub，查看新建的 tag：

    

  • 点击 actions ，找到刚才 commit 的注解，进入面板，如图所示：

    
    

  • 部署成功，如图所示：

    

• 访问网站

  

• 提交更新…