在Ubuntu22.04上使用Jenkins+Docker 持续集成前端vue项目

环境依赖

docker,docker-compose

第一步:在 /home/nginx 配置Nginx的docker-compose和default.conf

  1. docker-compose.yml
    version: '3.1'
    services:
      nginx:
        image: nginx
        restart: always
        container_name: nginx
        environment:
          - TZ=Asia/Shanghai
        ports:
          - 9999:9999
        volumes:
          - /home/nginx/conf.d:/etc/nginx/conf.d
          - /home/nginx/logs:/var/log/nginx
          - /home/nginx/html:/html
    
  2. default.conf 就是 nginx.conf
  3. 启动nginx
    docker-compose up -d
    

第二步:安装jenkins插件

NodeJS,Publish Over SSH,Timestamper

第三部.配置jenkins插件

  1. 配置NodeJS
  2. 配置Publish Over SSH
    在这里插入图片描述

第四步:新建Jenkins任务

前面选项和java项目一样.从构建环境开始
  1. 构建环境
    在这里插入图片描述

  2. 新增构建任务 ==>> 执行 shell
    在这里插入图片描述

    echo $PATH
    node -v
    npm -v
    pwd
    npm run build:stage
    tar zcvf dist.gz -C dist .
    
  3. 新增构建任务 ==>> Send files or execute commands over SSH
    在这里插入图片描述

  4. 新增构建任务 ==>> Execute shell script on remote host using ssh(这里上这一步可以和上一步合并)
    在这里插入图片描述

    echo '开始构建'
    cd /home/nginx
    pwd
    rm -f -r html
    mkdir html
    mkdir html/benchu
    tar -xvf /home/nginx/dist.gz -C /home/nginx/html/benchu
    rm dist.gz #这一句代码在调试成功之后再加上
    docker-compose restart
    echo '构建完毕'
    

注意事项

  1. jenkins服务器需要安装 npm
    wget https://nodejs.org/dist/v16.16.0/node-v16.16.0-linux-x64.tar.xz
    tar xf node-v16.16.0-linux-x64.tar.xz
    mv node-v16.16.0-linux-x64 /opt/
    ln -s /opt/node-v16.16.0-linux-x64/bin/node /usr/local/bin/
    ln -s /opt/node-v16.16.0-linux-x64/bin/npm /usr/local/bin/
    
    # 如果需要cnpm的话
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    ln -s /opt/node-v16.16.0-linux-x64/bin/cnpm /usr/local/bin/	
    
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

码农20年

给我你就上当了

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值