github CI/CD前端自动部署发版_github构建完前端后依赖版本包在哪里-优快云博客

本文链接：https://blog.youkuaiyun.com/x_XDGS/article/details/118994828

本文介绍了如何使用GitHub的CI/CD功能实现前端项目的自动部署和发布。通过创建.gitlab-ci.yml文件配置打包和部署脚本，结合服务器上的publish.sh文件，实现代码提交后自动构建和发布到指定服务器。此外，文章还提到了配置DEPLOY_USER和DEV_HOST的过程，以及在遇到问题时的学习和解决过程，强调了团队合作和不断学习的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

github CI/CD前端自动部署发版

1.CI文件内容，此文件放在前端项目的根目录下，创建一个.gitlab-ci.yml文件，将以下内容复制到此文件中

stages:
  - package
  - deploy

cache:
  paths:
    - node_modules/

node-package:
  tags:
    - node_14_17
  stage: package
  script:
    - export PATH=/var/node_v14/bin:$PATH 
    - pwd
    - echo 'This is a cloud step'
    # 定义环境变量
    - node -v
    - npm -v
    - yarn -v
    # 删除上一步artifact
    - rm -rf cloud cloud.tar.gz
    # 安装依赖项
    - npm install
    # 打包编译
    # - cnpm run build
    - echo $env
    - npm run cloud
  artifacts: 
    paths:
      - cloud
    expire_in: 1 day

deploy-sit:
  tags:
    - node_14_17
  stage: deploy
  timeout: 3 hours 30 minutes
  script:
    - pwd
    # 打压缩包
    - tar -zcvf dist.tar.gz dist
    # 上传服务器,此路径是服务器上打包文件存放地址
    - scp dist.tar.gz $DEPLOY_USER@$DEV_HOST:/fusion-fin-web/fin-operation-web
    # 回显，相当于打印console.log()
    - echo 'publish web'
    # 执行远程服务器的脚本，此路径是脚本存放地址，放在服务器上
    # DEPLOY_USER：服务器用户名
    # DEV_HOST：服务器域名
    - ssh -t $DEPLOY_USER@$DEV_HOST '/fusion-fin-web/fin-operation-web/bin/publish.sh'
  when: manual
  only:
    - /dev|^master_.*$/

2.publish.sh文件内容，此文件放在服务器上，然后再步骤1的文件中引用此文件

web_path=/home/nginx/blockchain-evidence-web

cd $web_path

rm -rf dist
tar -zxvf dist.tar.gz
rm -f dist.tar.gz

3.DEPLOY_USER（服务器用户名）和DEV_HOST（服务器域名）配置

此项配置是在GitHub里面进行配置，一般的需要公司开settings（设置）权限，同时需要运维将此服务器设置为免登录。

如图一所示：在settings里面点击CI/CD，然后会出现一下界面，在Variables上点击右上角Collapse，会出现如图二所示的弹出框，在里面设置用户名和域名。

图一在这里插入图片描述

图二在这里插入图片描述

4.需要运维/后端帮忙

在配置前端项目自动发版，不是仅仅一个前端就能够解决的，因为有些东西前端根本就不会，所以需要公司的运维来帮忙，没有运维则需要后端来帮忙一起弄，当然这个自动发版也不是很难，就是需要时间。我在配置自动发版的时候，遇到了很多问题，最终都是需要一个一个慢慢摸索解决的。害！第一次都是这样，摸索成功了，以后其他项目的自动发版就简单了。

大家不要怕，不会就学，而且：学无止境。