六. GitLab-CI/CD-实战：前端Vue项目

最新推荐文章于 2024-08-19 16:23:10 发布

SerryYang

最新推荐文章于 2024-08-19 16:23:10 发布

阅读量2.8k

点赞数

分类专栏： gitlab自动化部署文章标签： vue docker gitlab

本文链接：https://blog.csdn.net/yangkuo024/article/details/119762122

版权

gitlab自动化部署专栏收录该内容

6 篇文章 5 订阅

订阅专栏

1. 环境准备

注册runner，请查阅之前的博客：

https://blog.csdn.net/yangkuo024/article/details/119215657

注意，前端项目不需要构建镜像，保证dist包即可！

注册一个Vue项目使用的runner，注意过程中用到的默认镜像修改；

Enter the GitLab instance URL (for example, https://gitlab.com/):
你的git地址
Enter the registration token:
上面说到的项目runner的token
Enter a description for the runner:
[a0debaaf80a9]: 输入描述
Enter tags for the runner (comma-separated):
vue_web(注意，tag一定要唯一，后面会用到这个tag)
Registering runner... succeeded                     runner=cJMXGJWx
Enter an executor: docker-ssh, shell, docker-ssh+machine, kubernetes, custom, parallels, ssh, virtualbox, docker+machine, docker:
docker
Enter the default Docker image (for example, ruby:2.6):
alpine:latest

2. 项目目录

在项目跟目录下，创建如下几个文件：

.dev.env --测试环境变量配置文件

.master.env--生产环境变量配置文件

.gitlab-ci.yml--CI/CD核心配置文件

如下图所示（注意每个文件前面的点）：

3. 文件详细内容解析

a. .dev.env：

#推送docker镜像的服务器地址
export DOCKER_REPO='192.168.1.26:5000/web_vue'
#服务地址
export SERVER_IP='192.168.1.55'
#登录服务器时，用到的key（在gitlab中配置的参数）
export SSH_PRIVATE_KEY="$DEV_SSH_PRIVATE_KEY"

b. .master.env：具体内容同上，注意，生产环境无外网，所以通过跳板进行登录到部署服务的服务器：

export DOCKER_REPO='地址:6500/web_vue'
export APP_NAME='web_vue'
export SERVER_IP='地址'
export PORT='6580'
export SSH_PRIVATE_KEY="$MASTER_SSH_PRIVATE_KEY"

c. .gitlab-ci.yml：

services:
  - docker:20.10.6-dind

# node:16-alpine3.11
image: nikolaik/python-nodejs:python3.9-nodejs12-alpine

# 首先按顺序定义有几个步骤。步骤下面的所有job是同步执行的
stages:  
  - install dependencies
  - build
  - deploy

cache: &global_cache
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules
    - dist

dependencies:
  stage: install dependencies
  script:
    - npm install
  tags:
    - vue_web


build:
  stage: build
  script:
    - npm run build:${CI_COMMIT_REF_NAME}
  tags:
    - vue_web


deploy:
  image: ubuntu:latest
  stage: deploy
  cache: 
    <<: *global_cache
    policy: pull
  before_script:
    - source .${CI_COMMIT_REF_NAME}.env
    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - source .${CI_COMMIT_REF_NAME}.env
  script:
    - scp -r dist/* root@$SERVER_IP:/home/www/vue.test.com/
  tags:
    - vue_web

d. 在服务器Nginx中，配置相关服务即可；

以上，就是gitlab-CI/CD在vue项目中的应用，后续会上传相关代码，请持续关注！

你的努力，终将成为你最有力的资本！