Github Actions自动化部署

之前写过关于服务端渲染的文章，也实现了一个服务端渲染的案例代码地址 预览地址，这章主要是如何将项目发布至服务器（需要事先准备好服务器），并且每次更新自动同步到服务器：

提示: 本文中的文件全部在github项目上，查看具体文件内容请跳转。

传统的部署方式

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

构建过程

• 在nuxt.config.js中配置Host + Port（在项目中配置host + port可以让外部访问）

  // nuxt.config.js
  server: {
    host: '0.0.0.0',// 监听所有外网地址。在生产环境服务器上外网环境就能访问到了，在本地的话，局域网都能访问到了
      port: 3000
  },
  

• 压缩发布包（nuxt build后将以下几个打包后的文件复制到服务器）

  • 上传服务器的文件(打包压缩成realworld-nuxtjs.zip)
    • .nuxt文件夹（Nuxt打包生成的资源文件）
    • static文件夹（项目中的静态资源）
    • nuxt.config.js（给Nuxt服务来使用的）
    • package.json （因为在服务端要安装第三方包）
    • package.lock.json（因为在服务端要安装第三方包）
    • pm2.config.json
  • 连接服务器 ssh root@服务器ip
  • 选择一个目录创建一个realworld-nuxtjs文件夹：mkdir realworld-nuxtjs
  • cd realworld-nuxtjs进入这个文件夹，然后使用pwd命令打印当前文件夹路径：/root/realworld-nuxtjs
  • 回到本地，使用scp命令往服务器传压缩包：scp ./realworld-nuxtjs.zip root@服务器ip:/root/realworld-nuxtjs

• 在服务器进行解压

  • 回到服务器的realworld-nuxtjs文件夹里，此时已经有了一个realworld-nuxtjs.zip文件，执行unzip realworld-nuxtjs.zip对压缩包解压
  • 然后使用ls -a查看解压后的所有文件（.nuxt是隐藏目录需要ls 后面添加-a查看）

• 安装依赖

  • 执行npm install

• 启动服务

  • 执行npm start启动服务
  • 访问：http://119.45.204.135:3000/

保持后台启动

使用PM2在后台启动应用(pm2是一个专门管理nodejs进程的应用，它可以帮我们把nodejs运行在后台，保持运行状态)

• Github仓库地址：https://github.com/Unitech/pm2
• 官方文档：https://pm2.io
• 在生产环境上安装：npm install --global pm2
• 启动：pm2 start 脚本路径，即：pm2 start npm -- start，我的服务器上使用pm2起yarn貌似有点问题，改为npm就成功了
• 访问：http://119.45.204.135:3000/

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
• …

Github Actions自动化部署之腾讯云

• 配置GitHub Access Token

  1. 个人设置（头像） -> Settings -> Developer settings -> Personal access tokens -> Generate new Token，生成一个access token
  2. Token名称填写Token，Select scopes勾选repo，然后滚动到网页最下面点击提交按钮。生成了Token

• 将GitHub Access Token配置到项目中

  1. 项目Settings -> Secrets -> New Secrets
  2. 配置action自动化部署脚本中需要的参数（TOKEN，PORT，USERNAME，PASSWORD， HOST）

• 在项目中添加发布脚本 .github/workflows/main.yml

      # 自动部署的名称
  name: Publish And Deploy Demo
      # 监听push只有是提交tag才会部署
  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
      # 将.nuxt static nuxt.config.js package.json package-lock.json pm2.config.json文件打包压缩为release.tgz
      - 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 }} # 在github setting中的secrets中配置的TOKEN => github access token
        with:
          tag_name: ${{ github.ref }} # 标签名称
          release_name: Release ${{ github.ref }} # release名称
          draft: false # 是否是草稿
          prerelease: false # 是否是预发布
  
      # 上传构建结果到 Release（将打包的压缩包release.tgz上传到release）
      - name: Upload Release Asset
        id: upload-release-asset
        uses: actions/upload-release-asset@master
        env:
          GITHUB_TOKEN: ${{ secrets.TOKEN }}
        with:
          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:
          host: ${{ secrets.HOST }} # 连接服务器参数
          username: ${{ secrets.USERNAME }} # 连接服务器参数
          password: ${{ secrets.PASSWORD }} # 连接服务器参数
          port: ${{ secrets.PORT }} # 连接服务器参数
          script: | # 连接服务器后执行的命令
            cd /root/realworld-nuxtjs # 确保远程服务器必须有这个文件夹
            wget https://github.com/liannian9/realworld-nuxt/releases/latest/download/release.tgz -O release.tgz
            # 下载压缩包
            tar zxvf release.tgz # 解压
            npm install --production # 依赖
            pm2 reload pm2.config.json # pm2重启服务i
  

• 在项目中配置PM2脚本pm2.config.json

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

打包过程中的问题

1. 服务器需要安装PM2（项目中配置pm2.config.json文件）
2. 发布成功后可能仍不能访问需要关闭服务器的防火墙
3. main.yml文件中的deploy的scripts中cd的文件夹需要现在服务其上
   创建然后在服务器上运行pwd获取创建文件夹位置这里的 /root/react-nuxtjs
   就是创建文件夹位置
4. wget的文件夹目录需要是自己的打包后文件夹目录