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

寒山李白

已于 2024-04-01 20:43:26 修改

阅读量2.1k

点赞数 28

分类专栏： # GitLab 前端 # Kubernetes 文章标签：前端自动化 gitlab kubernetes java k8s 容器

于 2024-03-15 20:00:00 首次发布

本文链接：https://blog.csdn.net/mo_sss/article/details/136625442

版权

Kubernetes 同时被 3 个专栏收录

60 篇文章 10 订阅

订阅专栏

GitLab

26 篇文章 0 订阅

订阅专栏

前端

11 篇文章 1 订阅

订阅专栏

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

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

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

一、简介

正常部署前端项目时需要先打包后放到服务器上进行手动部署，现在我们尝试用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

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

yum

yum命令输出报错无此命令

apt

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

apt-get update

安装nodejs

apt install nodejs -y

安装npm

apt install npm -y

安装yarn

npm install -g yarn

安装zip

apt install zip -y

安装unzip

apt install unzip -y

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

四、 Dockerfile配置

构建镜像所需的文件Dockerfile

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

# 基础镜像
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"]

nginx版

# 基础镜像
FROM nginx
# 作者
MAINTAINER libai
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'

五、 .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：这里需要格外注意的地方是，配置中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的命令：

npm命令	yarn命令
npm install	yarn
npm run build	yarn build
npm run server	yarn server
npm install 包名 --save	yarn add 包名
npm install 包名 --save-dev	yarn add 包名 --dev

六、构建镜像

提交代码即可触发自动化构建镜像的过程
在构建镜像后会将镜像推送到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

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

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

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. 创建命名空间

kubectl create namespace ns-front-vue

在这里插入图片描述
查看刚刚创建的命令空间

kubectl get ns | grep vue

在这里插入图片描述

执行命令部署服务

2. 部署pvc

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

3. 部署deployment

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

在这里插入图片描述

4. 部署svc

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

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

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

九、查看服务

1. 查看pvc

kubectl get pvc -n ns-front-vue

在这里插入图片描述

2. 查看deployment

kubectl get deployment -n ns-front-vue

在这里插入图片描述

或者

kubectl get pod -n ns-front-vue

在这里插入图片描述

3. 查看svc

kubectl get svc -n ns-front-vue

在这里插入图片描述

十、访问项目

二、Nginx安装配置

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

1. 安装nginx

1.1 安装

yum install nginx

安装完成
在这里插入图片描述

1.2 启动nginx

service nginx start

或

systemctl start nginx

1.3 查看nginx状态

service nginx status

或

systemctl status nginx

在这里插入图片描述
可以从输出打印的内容看到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.4.2 访问nginx

173.33.0.224:80

如下界面则表示nginx安装成功，已启用
在这里插入图片描述

2. Nginx配置

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

2.1 修改nginx配置

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

sytemctl reload nginx

2.2 重启nginx

sytemctl restart nginx

感谢阅读，祝君暴富！

寒山李白

关注

28
点赞
踩
50

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端项目（vue3）自动化部署（Gitlab CI/CD）尚在完善中---＞

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

扫一扫