前端项目（vue3）自动化部署（Gitlab CI/CD）尚在完善中---＞_vue3前端部署

天行健，君子以自强不息；地势坤，君子以厚德载物。

---

每个人都有惰性，但不断学习是好好生活的根本，共勉！

---

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

---

一、简介

正常部署前端项目时需要先打包后放到服务器上进行手动部署，现在我们尝试用Gitlab的CI/CD功能来实现自动化部署前端项目，节省部署操作时间以及避免过程中操作失误的可能。

• 服务器系统
  linux centos

• 软件版本
  docker 24.0.7
  node 18.19.1

• Gitlab CI/CD使用
  主要流程就是先通过脚本将项目打包构建生成镜像，其核心就是这个镜像
  然后通过镜像部署项目

• 构建镜像所需的文件
  Dockerfile
  .gitlab-ci.yml

• 部署项目所需的文件如下：
  front-vue-pvc.yaml
  front-vue-dplm.yaml
  front-vue-svc.yaml

二、本地项目与远程仓库（gitlab）建立连接

将本地前端项目与远程仓库（gitlab代码仓库）建立连接
可参考如下文章：
不同代码仓库操作其实都一样
通过GIT将本地项目上传到gitee
K8S部署GitLab（详细完整版）文章中的第十章第7节

如需搭建gitlab可参考：
K8S部署GitLab（详细完整版）

三、Gitlab Runner配置（跳过）

在.gitlab-ci.yml配置中使用了node镜像，则无需执行以下操作，本篇直接跳过，此部分仅做参考
gitlab-runner相关安装配置参考文章：gitlab runner 安装、注册、配置、使用（Docker部署）
由于我们每次执行自动化都会通过.gitlab-ci.yml文件触发gitlab-runner执行任务
如果在.gitlab-ci.yml文件中配置安装npm、yarn、zip、unzip等工具命令的话，每次都会执行而且可能会报错，故提前在gitlab-runner容器中安装所需的工具环境（我这里的gitlab-runner是以docker容器形式部署的）
进入gitlab-runner容器中，我的gitlab runner的容器名称为gitlab-runner

docker exec -it gitlab-runner bash
1

查看自己的容器时yum安装命令还是apt安装命令，只需输入这两个命令即可知道是哪个

yum
1

yum命令输出报错无此命令

apt
1

输出一长段关于apt命令的描述，表示是apt安装命令
更新安装包

apt-get update
1

安装nodejs

apt install nodejs -y
1

安装npm

apt install npm -y
1

安装yarn

npm install -g yarn
1

安装zip

apt install zip -y
1

安装unzip

apt install unzip -y
1

当然了，gitlabrunner中安装工具环境的这几个操作可以在.gitlab-ci.yml中执行，后面也会单独加一份对应的配置文件内容参考

四、 Dockerfile配置

构建镜像所需的文件Dockerfile

# 基础镜像
FROM nginx
# 作者
MAINTAINER libai
# 复制项目文件到工作目录
COPY dist dist
#暴露容器端口
EXPOSE 80
# 运行npm start命令启动
CMD ["npm","start"]
1
2
3
4
5
6
7
8
9
10

# 基础镜像
FROM node:latest
# 作者
MAINTAINER libai
# 工作目录
#WORKDIR /usr/src/app
# 复制package.json和package-lock.json
COPY package*.json ./
# 安装项目依赖
RUN npm install
# 复制项目文件到工作目录
COPY . .
#暴露容器端口
EXPOSE 80
# 运行npm start命令启动
CMD ["npm","start"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

nginx版

# 基础镜像
FROM nginx
# 作者
MAINTAINER libai
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'
1
2
3
4
5
6
7

五、 .gitlab-ci.yml配置

在项目根目录下需要有一个.gitlab-ci.yml文件触发自动化执行

注意：
这里配置了harbor镜像仓库，如需搭建harbor可参考：K8S部署Harbor镜像仓库（含离线安装包harbor-offline-installer国内下载链接）

.gitlab-ci.yml文件内容如下（根据自己需求进行更改）

variables:
  HARBOR_IP: 173.33.0.224
  HARBOR_PORT: 8443
  HARBOR_USERNAME: admin
  HARBOR_PASSWORD: Harbor12345
  PROJECT_FOLDER_NAME: k8s-demo
  IMAGE_HARBOR_REPOSITORY: $HARBOR_IP:$HARBOR_PORT/$PROJECT_FOLDER_NAME
  PROJECT_IMAGE_NAME: k8s-uuss-front
  PROJECT_IMAGE_TAG: v2024

#缓存 node_modules/目录 下次构建不会删除
cache:
  paths:
    - node_modules/

stages: # 分段
    - package
    - build
    - deploy
 
# 1. 打包阶段
job1-package:
  image: node:18.19.1
  tags:
    - runner-01
  only:
    - master
  stage: package
  script:
    - ls
    - pwd
    # 由于gitlab-runner的容器内部使用的是apt命令，故一下执行需使用apt命令
    - nodejs -v
    - rm -f dist
    - yarn -v
    #下载依赖可以使用npm也可以是yarn，yarn会好点，下载后会生成node_modules
    # - npm install
    - yarn
    #打包可用npm也可以用yarn run build
    # - npm run build
    - yarn build
    # 构建后会看到生成了dist包
    - ls
    - pwd
  artifacts:
    paths:
      - dist
# 2. 构建镜像阶段
job2-build:
  image: docker
  tags:
    - runner-01
  only:
    - master
  stage: build
  script:
    - ls
    - pwd
    - docker login $HARBOR_IP:$HARBOR_PORT -u $HARBOR_USERNAME -p $HARBOR_PASSWORD
    - docker build -t $IMAGE_HARBOR_REPOSITORY/$PROJECT_IMAGE_NAME:$PROJECT_IMAGE_TAG .
    - docker push $IMAGE_HARBOR_REPOSITORY/$PROJECT_IMAGE_NAME:$PROJECT_IMAGE_TAG
    - ls
    - docker images | grep $PROJECT_IMAGE_NAME
    # 删除镜像
    - docker rmi -f $IMAGE_HARBOR_REPOSITOTY/$PROJECT_IMAGE_NAME:$PROJECT_IMAGE_TAG
  dependencies:
    - job1-package
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

注意1： 这里需要格外注意的地方是，配置中image参数使用ndoe后，执行命令的环境会默认使用镜像中的node和yarn版本 但node镜像中无zip和unzip工具，所以需要在命令中执行，但在执行apt安装前必须apt update更新apt
注意2： 打包阶段使用的是node镜像，node中没有docker，故无法使用docker命令，所以没办法构建镜像，也无法实现将镜像推送到harbor镜像仓库。我们新加一个构建镜像的阶段使用docker镜像，在此阶段使用docker命令构建镜像并推送到harbor镜像仓库
注意3： 使用npm和yarn的区别，npm是node自带的，yarn是第三方的，yarn命令和npm命令类似，但有些npm命令可以直接将npm换成yarn使用，如npm install等同于yarn，但也可以使用yarn install替代
npm和yarn的命令：

六、构建镜像

提交代码即可触发自动化构建镜像的过程
在构建镜像后会将镜像推送到harbor镜像仓库
可在harbor镜像仓库中查看
如图

七、部署所需配置文件

将以下配置文件本地编辑后上传到服务器，或者直接在服务器中进行编辑
我这里先在服务器中创建一个front-vue-yaml文件夹，然后将文件上传到文件夹中

部署所需配置文件

1. pvc文件

front-vue-pvc.yaml

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: front-vue-pvc
  namespace: ns-front-vue
spec:
  accessModes:
    - ReadWriteOnce
  storageClassName: openebs-hostpath
  resources:
    requests:
      storage: 5Gi

1
2
3
4
5
6
7
8
9
10
11
12
13

2. deployment文件

front-vue-dplm.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: front-vue-dplm
  namespace: ns-front-vue
  labels:
    name: front-vue-dplm
spec:
  replicas: 1
  selector:
    matchLabels:
      name: front-vue-dplm
  template:
    metadata:
      name: front-vue-dplm
      labels:
        name: front-vue-dplm
    spec:
      containers:
        - name: front-vue-dplm
          image: 173.33.0.224:8443/k8s-demo/k8s-front:v20240208
          imagePullPolicy: IfNotPresent
          ports:
            - name: http
              containerPort: 80
          volumeMounts:
            - mountPath: /home/front-vue-demo/data
              name: data
      volumes:
        - name: data
          persistentVolumeClaim:
            claimName: front-vue-pvc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

3. service文件

front-vue-svc.yaml

apiVersion: v1
kind: Service
metadata:
  name: front-vue-svc
spec:
  selector:
    app: front-vue-svc
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80
  type: LoadBalancer
1
2
3
4
5
6
7
8
9
10
11
12

apiVersion: v1
kind: Service
metadata:
  name: front-vue-svc
  namespace: ns-front-vue
  labels:
    name: front-vue-svc
spec:
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
      nodePort: 30090
  selector:
    name: front-vue-dplm
  type: NodePort
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

八、部署项目

部署之前先创建命名空间，后续方便管理部署的服务

1. 创建命名空间

kubectl create namespace ns-front-vue
1

查看刚刚创建的命令空间

kubectl get ns | grep vue
1

执行命令部署服务

2. 部署pvc

kubectl apply -f front-vue-yaml/front-vue-pvc.yaml
1

3. 部署deployment

kubectl apply -f front-vue-yaml/front-vue-dplm.yaml
1

4. 部署svc

kubectl apply -f front-vue-yaml/front-vue-svc.yaml
1

也可以尝试一次性部署front-vue-yaml文件中的所有yaml文件

kubectl apply -f front-vue-yaml/*.yaml
1

九、查看服务

1. 查看pvc

kubectl get pvc -n ns-front-vue
1

2. 查看deployment

kubectl get deployment -n ns-front-vue
1

或者

kubectl get pod -n ns-front-vue
1

3. 查看svc

kubectl get svc -n ns-front-vue
1

十、访问项目

---

二、Nginx安装配置

以下命令如果执行无root权限则需在命令前加sudo

1. 安装nginx

1.1 安装

yum install nginx
1

安装完成

1.2 启动nginx

service nginx start
1

或

systemctl start nginx
1

1.3 查看nginx状态

service nginx status
1

或

systemctl status nginx
1

可以从输出打印的内容看到nginx的配置文件nginx.conf在/etc/nginx/文件夹中

1.4 验证nginx

访问nginx确保可用

1.4.1 nginx访问地址获取

安装nginx后使用服务器ip和nginx的端口号来访问nginx
ip为nginx安装位置的服务器ip
nginx端口号默认为80，当然也可以到/etc/nginx/nginx.conf文件中查看如下

cat /etc/nginx/nginx.conf
1

1.4.2 访问nginx

173.33.0.224:80
1

如下界面则表示nginx安装成功，已启用

2. Nginx配置

配置nginx.conf文件
需要根据前端项目的情况配置相应的参数

2.1 修改nginx配置

可通过vim命令修改配置文件nginx.conf
修改后重新加载配置

sytemctl reload nginx
1

2.2 重启nginx

sytemctl restart nginx
1

---

感谢阅读，祝君暴富！