nuxt部署和持续集成ci cd

时间 2021-02-17

标签 html 前端 node linux git github web shell npm json 栏目 HTML 繁體版

原文原文链接

这里说下如何作nuxt得部署html

首先咱们得nuxt.config.js配置添加

主机为何步骤为0.0.0.0
参考这里
https://blog.csdn.net/ttx_lau...前端

https://blog.csdn.net/u012814...node

https://blog.csdn.net/enzocha...linux

首先准备工做：
首先把咱们得nuxt项目执行:
npm run build 进行打包
而后本地npm run start 启动一个生产web服务器本地看看有没有问题
肯定没问题以后把.nuxt 和static，nuxt.config.js,package.json,package.json,package-lock.json打包压缩成zip文件git

其次准备一台linux服务器：
我这里是在https://console.ucloud.cn/ 这里买的。

而后配置外网防火墙 3000对外开放(咱们部署服务得端口)
而后咱们下载一个Xshell 6 来链接咱们得linux服务器而后
xshell 简单使用
下载 node
https://www.cnblogs.com/ruir/...
这里是node得安装和node和npm环境变量得配置（版本看本身须要下）.
而后更改npm 得源地址或者下载cnpm或nrm 设置镜像.
国外源地址太慢了
而后设置npm全局下载包得环境变量问题
npm全局下载包环境变量问题解决github

而后若是以为Xshell 6上传文件不方便得话能够用xftp来链接服务器
而后咱们在服务器上新建一个文件夹把而后把咱们得压缩包zip放到里面来而后解压缩.web

而后在这个文件夹里执行下载生产依赖的操做 npm install --production shell

最后执行 npm run start npm

这会咱们经过咱们服务器的外网ip加咱们部署的端口应该就能够访问到了。例如个人就是http://106.75.104.214:3000/json

可是这回咱们一旦ctrl+c 服务就会结束了

咱们再经过 pm2来管理咱们的服务

首先下载npm i pm2 -g下载为全局依赖

而后pm2 start npm -- start
来启动咱们当前npm 脚本而且传入start参数

而后pm2 list而后咱们就能够看到

咱们name 为npm的这项已经被管理起来了,我这里是把npm这项中止了

这会日常的部署就完成了，可是咱们每次部署都要这样手工作的话就太麻烦了，咱们在这里了解下cicd 持续集成部署.

咱们这里使用git Actions为例子
main.yml 配置解释
https://coldstone.fun/post/20...
你们也能够多搜索了解下相关解释.

首先：

在本身的github 的setting中开发者设置生成token
而后把token 添加到项目的secrets中
配置github执行脚本
在项目根目录建立 .github/workflows 目录
下载main.yml 道workflows目录
修改配置
配置pm2配置文件
提交更新
查看自动部署状态

后续在main.yml中要使用

而后在项目.github/workflows生成 main.yml

main.yml

name: Publish And Deploy Demo
on:
  push:
    tags:
      - 'v*'
      # 提交一个标签 tag的时候 才会触发 自动部署  以v开头的 例如v0.0.1
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

    # 下载源码
    - name: Checkout
      uses: actions/checkout@master 
      # 下载本次 tag标签标记 commitId代码



    # 打包构建
    - 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
    # 基于此次的tag标签来下载依赖 打包 而后把 后续几个文件生成  tgz 压缩包

    # 发布 Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
        # 开始建立写入到项目secrets的TOKEN
      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:
        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 }}
        # 端口号

        # 而后
        # 进入对应目录
        # 下载压缩的tgz到服务器
        # 解压
        # 下载项目生成依赖
        # 而后经过 pm2 进行管理启动
        script: |
          cd /root/realworld-nuxtjs
          wget https://github.com/544076724/nuxt-test/releases/latest/download/release.tgz -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json

我这里最后是在服务器有建立了realworld-nuxtjs目录而后，把代码当放到了这里.

而后在项目根目录中建立pm2.config.json

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

最后把代码提交仓库，根据咱们的main.yml配置老看普通的push是不会触发构建的,只有push一个标签 v开头的才会触发构建流程

标签的操做

而后咱们git tag -a "标签内容<v0.1.0>" -m "标签说明"

而后推送git push origin v0.1.0 推送

而后咱们到咱们的github仓库能够看到

这些标签

在actions里能够看到

本次提交的标签的构建

再点击能够看到执行过程

若是哪一步操做失败会有失败信息的x

经过这里

咱们能够看到咱们发的release的版本

和相关的tgz包

最后到服务器上咱们pm2 list

咱们就能够看到咱们管理的 RealWorld进程.

pm2 reload 和pm2 restart 有啥区别
官方说明：As opposed to restart, which kills and restarts the process, reload achieves a 0-second-downtime reload.
简单理解：
restart = stop+start
reload = 从新读取配置文件
具体用哪一个要根据项目运行实际状况，有些项目须要7*24运行，不得stop，这时候用reload比较好。

以后的每次操做就是生成不一样的标签而后提交, 这样咱们的自动构建就完成了.

本文参考拉钩大前端训练营