Docker执行器自动化部署vue项目

2023/6/28
阅读时间 1 分钟

今天接着上次，使用gitlab中的cicd功能自动部署vue项目，如果全部使用shell执行器，肯定是可以的，就是要提前在runner宿主机或者远程部署主机上安装好node环境以及其他依赖的环境，这里今天尝试的是docker执行器，构建操作在docker中完成。

首先是chatgpt给的CI的范例：

定义一个stages阶段，包括build、test和deploy

stages:
  - build
  - test
  - deploy


# 定义构建阶段
build:
  stage: build
  image: node:latest
  cache:
    paths:
      - node_modules/
  before_script:
    - npm install
  script:
    - npm run build


# 定义测试阶段
test:
  stage: test
  image: node:latest
  cache:
    paths:
      - node_modules/
  before_script:
    - npm install
  script:
    - npm run test


# 定义部署阶段
deploy:
  stage: deploy
  image: node:latest
  before_script:
    - yum install -y nginx
  script:
    - rm -rf /usr/share/nginx/html/*
    - cp -r dist/* /usr/share/nginx/html/
    - systemctl restart nginx

但这里有几个问题：

1、执行build完之后，构建物没有保存，我想拷到宿主机

2、deploy的时候这个操作是在容器操作的，无法实现访问

再改进一下：

stages:
  - build
  - deploy


build:
  stage: build
  image: node:14.17.3
  cache:
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/


deploy:
  stage: deploy
  image: centos:7
  before_script:
    - yum install -y sshpass
  script:
    - sshpass -p $SSH_PASSWORD ssh -o StrictHostKeyChecking=no $SSH_USERNAME@$SSH_SERVER 'mkdir -p /path/to/deploy'
    - sshpass -p $SSH_PASSWORD scp -o StrictHostKeyChecking=no dist/* $SSH_USERNAME@$SSH_SERVER:/path/to/deploy

就是构建后，通过容器内安装sshpa，远程拷贝构建文件到目标主机目录。下载镜像有点问题。

实际运行以下文件:

stages:
  - build
  - deploy
# 构建阶段  
build:
  stage: build 
  image: node:18.16-alpine3.18
  before_script:
    - npm install npm@latest -g
  script:
    - npm install
    - npm run build
  # 将dist目录保存为zip格式的作业制品
  artifacts:
    paths:  
      - dist/

# 部署阶段  
deploy:
  stage: deploy
  script: 待补充

build构建成功,但是部署阶段，还需要搭建一个nginx服务存放dist目录下的文件，明天接着搭建再分享！

CI/CD