nuxt部署和持续集成ci cd

Charon

这里说下如何做nuxt得部署

首先我们得nuxt.config.js配置添加
image.png
主机为什么步骤为0.0.0.0
参考这里
https://blog.csdn.net/ttx_lau...

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

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

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

其次准备一台linux服务器:
我这里是在https://console.ucloud.cn/ 这里买的。
image.png
然后配置外网防火墙 3000对外开放(我们部署服务得端口)
然后我们下载一个Xshell 6 来连接我们得linux服务器然后
xshell 简单使用
下载 node
https://www.cnblogs.com/ruir/...
这里是node得安装和node和npm环境变量得配置(版本看自己需要下).
然后更改npm 得源地址或者下载cnpm或nrm 设置镜像.
国外源地址太慢了
然后设置npm全局下载包得 环境变量问题
npm全局下载包环境变量问题解决

然后如果觉得Xshell 6上传文件不方便得话可以用xftp来连接服务器
然后我们在服务器上新建一个文件夹把然后把我们得 压缩包zip放到里面来然后解压缩.

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

最后执行 npm run start

这会我们通过我们服务器的外网ip加我们部署的端口应该就可以访问到了。 例如我的就是http://106.75.104.214:3000/

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

我们再通过 pm2来管理 我们的服务

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

然后pm2 start npm -- start
来启动我们当前npm 脚本并且传入start参数

然后pm2 list然后我们就可以看到
image.png

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

这会 平常的部署就完成了,但是我们每次部署都要这样手工做的话就太麻烦了,我们在这里了解下cicd 持续集成部署.

我们这里使用git Actions为例子
main.yml 配置解释
https://coldstone.fun/post/20...
大家也可以多搜索了解下 相关解释.

首先:

  1. 在自己的github 的setting中开发者设置生成token
  2. 然后把token 添加到 项目的secrets中
  3. 配置github执行脚本
  4. 在项目根目录 创建 .github/workflows 目录
  5. 下载main.yml 道workflows目录
  6. 修改配置
  7. 配置pm2配置文件
  8. 提交更新
  9. 查看自动部署状态

image
image
image
image
image
image.png
后续在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仓库可以看到
image.png
这些标签

在actions里可以看到
image.png
本次提交的标签的构建
image.png
再点击可以看到执行过程
image.png

如果哪一步操作失败会有失败信息的x

通过这里
image.png

我们可以看到我们发的release的版本

image.png

和相关的tgz包

最后到服务器上我们pm2 list
image.png
我们就可以看到我们管理的 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比较好。

之后的每次操作就是生成不同的标签然后提交, 这样我们的自动构建就完成了.

阅读 382

世界核平

19 声望
8 粉丝
0 条评论
你知道吗?

世界核平

19 声望
8 粉丝
宣传栏