當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2023/12/4 vue 30 豆豆

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

之前的自動構建工具 Jenkins 是部署在公司內網的 Windows 服務器上，現在武漢處于非常時期，兄弟們都在家自我隔離，為了遠程提交的代碼能自動構建，需要在外網的 CentOS 服務器上搭建 Jenkins 環境來進行構建工作。

目的

產品采用前后端分離架構，前端使用 Vue，后端使用 dotNET Core ，當代碼提交 GitLab后，需要自動構建前后端代碼，并發布到測試環境的容器中，步驟如下：

安裝 Jenkins
設置 Jenkins 權限
安裝其他依賴
配置 Jenkins

環境

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? #導入秘鑰 sudo?rpm?--import?https://pkg.jenkins.io/redhat-stable/jenkins.io.key #安裝 yum?install?jenkins

設置 Jenkins 權限

1、Jenkins 安裝后，執行命令?vim /etc/sysconfig/jenkins?進行修改，將用戶修改為root

#修改配置 $JENKINS_USER="root"

2、修改目錄權限

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 #啟動docker systemctl?start?docker #設置開機啟動 chkconfig?docker?on

配置 Jenkins

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

創建相關目錄和文件

在 CentOS 中創建相關的目錄和文件，創建完后的目錄結構如下圖：

build 目錄：用來存放構建相關的目錄和文件
- conf.d
- - default.conf：nginx 的配置文件
- web
- - devops.sh：vue 項目的構建批處理命令
  - Dockerfile：構建 vue 項目到 docker 容器的文件
- webapi
- - devops.sh：api 項目的構建批處理命令
  - Dockerfile：構建 api 項目到 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 目錄，可以先執行命令?whereis git?找到 git 的目錄，然后進行設置，如下圖：

Vue 項目的配置

1、設置運行目錄

2、構建的命令設置

WebAPI 項目的配置