當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

CentOS7 安装 Jenkins（构建 Vue 和 dotNET Core ）

發(fā)布時(shí)間：2023/12/4 vue 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 CentOS7 安装 Jenkins（构建 Vue 和 dotNET Core ）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

之前的自動(dòng)構(gòu)建工具 Jenkins 是部署在公司內(nèi)網(wǎng)的 Windows 服務(wù)器上，現(xiàn)在武漢處于非常時(shí)期，兄弟們都在家自我隔離，為了遠(yuǎn)程提交的代碼能自動(dòng)構(gòu)建，需要在外網(wǎng)的 CentOS 服務(wù)器上搭建 Jenkins 環(huán)境來進(jìn)行構(gòu)建工作。

目的

產(chǎn)品采用前后端分離架構(gòu)，前端使用 Vue，后端使用 dotNET Core ，當(dāng)代碼提交 GitLab后，需要自動(dòng)構(gòu)建前后端代碼，并發(fā)布到測試環(huán)境的容器中，步驟如下：

安裝 Jenkins
設(shè)置 Jenkins 權(quán)限
安裝其他依賴
配置 Jenkins

環(huán)境

CentOS：7.5
Jenkins：2.204.2
node：12.14.1
dotNET Core：2.1

安裝 Jenkins

1、安裝 wget

yum?-y?install?wget

2、安裝 jdk

yum?install?-y?java-1.8.0-openjdk?java-1.8.0-openjdk-devel

3、安裝 Jenkins

#下載依賴 sudo?wget?-O?/etc/yum.repos.d/jenkins.repo?https://pkg.jenkins.io/redhat-stable/jenkins.repo? #導(dǎo)入秘鑰 sudo?rpm?--import?https://pkg.jenkins.io/redhat-stable/jenkins.io.key #安裝 yum?install?jenkins

設(shè)置 Jenkins 權(quán)限

1、Jenkins 安裝后，執(zhí)行命令?vim /etc/sysconfig/jenkins?進(jìn)行修改，將用戶修改為root

#修改配置 $JENKINS_USER="root"

2、修改目錄權(quán)限

chown?-R?root:root?/var/lib/jenkins chown?-R?root:root?/var/cache/jenkins chown?-R?root:root?/var/log/jenkins

安裝其他依賴

1、安裝git

yum?install?git

2、安裝 node

curl?--silent?--location?https://rpm.nodesource.com/setup_10.x?|?sudo?bash yum?-y?install?nodejs

3、安裝vue

npm?install?-g?@vue/cli

4、安裝 netcore2.1

rpm?-Uvh?https://packages.microsoft.com/config/centos/7/packages-microsoft-prod.rpm yum?-y?install?dotnet-sdk-2.1

5、安裝docker

sudo?yum?install?-y?yum-utils?device-mapper-persistent-data?lvm2 sudo?yum-config-manager?--add-repo?https://download.docker.com/linux/centos/docker-ce.repo sudo?yum-config-manager?--add-repo?http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo sudo?yum-config-manager?--enable?docker-ce-edge sudo?yum?install?docker-ce #啟動(dòng)docker systemctl?start?docker #設(shè)置開機(jī)啟動(dòng) chkconfig?docker?on

配置 Jenkins

在之前的文章《?GitLab 配合 Jenkins 打造自動(dòng)化部署?》中介紹過在 Windows 環(huán)境下配置 Jenkins，可以作為參考，下面介紹在 CentOS 中的具體步驟：

創(chuàng)建相關(guān)目錄和文件

在 CentOS 中創(chuàng)建相關(guān)的目錄和文件，創(chuàng)建完后的目錄結(jié)構(gòu)如下圖：

build 目錄：用來存放構(gòu)建相關(guān)的目錄和文件
- conf.d
- - default.conf：nginx 的配置文件
- web
- - devops.sh：vue 項(xiàng)目的構(gòu)建批處理命令
  - Dockerfile：構(gòu)建 vue 項(xiàng)目到 docker 容器的文件
- webapi
- - devops.sh：api 項(xiàng)目的構(gòu)建批處理命令
  - Dockerfile：構(gòu)建 api 項(xiàng)目到 docker 容器的文件
- conf.d
- - default.conf：nginx 的配置文件
code 目錄：用來存放 git 拉取的源代碼的目錄
- web：vue 前端代碼
- webapi：api 接口代碼

build/conf.d/default.conf：

server?{listen???????80;server_name??10.10.10.10;client_max_body_size?100M;location?/?{root???/usr/share/nginx/html;index??index.html?index.htm;try_files?$uri?$uri/?/index.html;?}error_page???500?502?503?504??/50x.html;location?=?/50x.html?{root???/usr/share/nginx/html;} }

build/web/devops.sh：

#!/bin/bash echo?"del?none?images" docker?ps?-a?|?grep?"Exited"?|?awk?'{print?$1?}'|xargs?docker?stop docker?ps?-a?|?grep?"Exited"?|?awk?'{print?$1?}'|xargs?docker?rm docker?images|grep?none|awk?'{print?$3?}'|xargs?docker?rmi echo?"container?del?success"docker?stop?web docker?rm?web echo?"container?web?del?success"echo?"begin?docker?build"if?[?!?-d?web?];?thenmkdir?-p?web ficp?/root/jenkins/build/web/Dockerfile?./web cp?-r?/root/jenkins/code/web/dist/*?./webecho?"begin?docker?build" cd?web docker?build?-t?web?. echo?"build?end"docker?run?-d?-p?9001:80?--name?web?-v?/root/jenkins/build/conf.d:/etc/nginx/conf.d:ro??--restart=always??webcd?.. rm?-rf?web

build/web/Dockerfile：

FROM?nginx:latest COPY?.?/usr/share/nginx/html/ EXPOSE?80 CMD?["nginx",?"-g",?"daemon?off;"]

build/webapi/devops.sh：

#!/bin/bash echo?"del?none?images" docker?ps?-a?|?grep?"Exited"?|?awk?'{print?$1?}'|xargs?docker?stop docker?ps?-a?|?grep?"Exited"?|?awk?'{print?$1?}'|xargs?docker?rm docker?images|grep?none|awk?'{print?$3?}'|xargs?docker?rmi echo?"container?del?success"docker?stop?webapi docker?rm?webapi echo?"container?webapi?del?success"echo?"begin?docker?build" if?[?!?-d?web?];?thenmkdir?-p?web fi cp?/root/jenkins/build/webapi/Dockerfile?./web cp?-r?/root/code/webapi/myapi/bin/Debug/netcoreapp2.1/publish/*?./webecho?"begin?docker?build" cd?web docker?build?-t?webapi?. echo?"build?end"docker?run?-d?-p?5000:5000?--restart=always?--name?webapi?webapi

build/webapi/Dockerfile：

FROM?microsoft/dotnet:2.1-aspnetcore-runtime COPY?.?/app WORKDIR?/app EXPOSE?80/tcp ENTRYPOINT?["dotnet",?"myapi.dll"]

全局配置

配置 git 目錄，可以先執(zhí)行命令?whereis git?找到 git 的目錄，然后進(jìn)行設(shè)置，如下圖：

Vue 項(xiàng)目的配置

1、設(shè)置運(yùn)行目錄

2、構(gòu)建的命令設(shè)置

WebAPI 項(xiàng)目的配置