jenkins+docker+nginx+nodejs持續(xù)集成部署vue前端項(xiàng)目

更新時(shí)間：2022年05月11日 10:42:22 作者：蒙多不減肥

本文主要介紹了jenkins+docker+nginx+nodejs持續(xù)集成部署vue前端項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近比較閑，嘗試了一下docker部署業(yè)務(wù)測(cè)試環(huán)境的前端vue項(xiàng)目，作此記錄

這里我的環(huán)境是Jenkins+docker+harbor+nginx
部署，但是由于此項(xiàng)目以節(jié)點(diǎn)形式加入jenkins,構(gòu)建和部署都在一臺(tái)，所以沒有用到harbor,但是生產(chǎn)環(huán)境可能部署和構(gòu)建不在一臺(tái)，會(huì)需要先推送到harbor,也有詳細(xì)步驟。

前提：

1安裝好了jenkins, 2項(xiàng)目服務(wù)器以node形式加入Jenkins， 3項(xiàng)目節(jié)點(diǎn)安裝docker 4代碼里有包含Dockerfile
以及 nginx的相關(guān)配置文件

思路：

通過Jenkins拉去git倉庫代碼，利用nodejs打包編譯vue資源，利用Dockerfile
構(gòu)建業(yè)務(wù)鏡像，提前準(zhǔn)備好nginx的配置文件和自定義文件，上過上傳harbor供其他節(jié)點(diǎn)下載使用。

步驟：

創(chuàng)建自由風(fēng)格的jobs(用流水線也可以)，這里步驟比較簡(jiǎn)單就不寫流水線了

在這里插入圖片描述

general處選擇參數(shù)化構(gòu)建，文本參數(shù)來定義每次構(gòu)建的版本號(hào)

在這里插入圖片描述

構(gòu)建環(huán)境這里需要選擇全局工具里配置的nodejs,用于編譯打包vue

在這里插入圖片描述

配置nodejs工具

（如下圖），自動(dòng)安裝需要的版本即可。

在這里插入圖片描述

??構(gòu)建處選擇執(zhí)行shell

在這里插入圖片描述

#!/bin/bash
pwd
npm install
npm run build -- prerelease #編譯項(xiàng)目
echo "npm finish "
echo $version
docker build -t nginx-agent:$version .
#部署和構(gòu)建是一臺(tái)
docker images 
docker stop nginx-agent
docker rm nginx-test
docker run --name nginx-agent -p 8001:80 -d nginx-agent:$version
#部署和構(gòu)建不在一臺(tái)，或者多臺(tái)構(gòu)建，harbor
# docker tag nginx-agent:$version 192.168.80.133:8000/test/nginx-agent:$version
# docker push 192.168.80.133:8000/test/nginx-agent:$version
# ssh 192.168.80.** "docker pull 192.168.80.133:8000/test/nginx-agent:$version"
# ssh 192.168.80.** "docker stop nginx-agent;docker rm nginx-agent;docker start "
# ssh 192.168.80.** "docker run --name nginx-test -p 8001:80 -d 192.168.80.133:8000/test/nginx:$version"

我的環(huán)境是構(gòu)建和部署都是在一臺(tái)服務(wù)器，所以這里我沒有用harbor，注釋部分的代碼段就是一個(gè)簡(jiǎn)單的部署在另外服務(wù)器，

保存job,準(zhǔn)備開始構(gòu)建!

git代碼文件目錄如下

這里查看三個(gè)文件的內(nèi)容
Dockerfile : 用于構(gòu)建docker鏡像的文件
nginx.conf ：用于替換鏡像內(nèi)默認(rèn)的主配置文件
default.conf ：用于替換鏡像內(nèi)默認(rèn)的用戶配置文件

在這里插入圖片描述

Dockerfile的文件內(nèi)容

root@jenkins test-agent]# cat Dockerfile 
FROM nginx
COPY ./dist/index.html /app/
COPY ./dist/static/js /app/static/js
COPY ./dist/static/css /app/static/css
COPY ./dist/static/fonts /app/static/fonts
COPY ./dist/static/img /app/static/img
COPY ./nginx.conf /etc/nginx/conf/nginx.conf
COPY ./default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

注意

這里如果你的前端文件也是區(qū)分目錄的話，需要一個(gè)個(gè)單獨(dú)步驟去復(fù)制，不然的話，docker的copy命令只會(huì)復(fù)制文件不會(huì)連同目錄一起復(fù)制，會(huì)導(dǎo)致你鏡像內(nèi)的目錄結(jié)構(gòu)不一樣，
nginx鏡像默認(rèn)是有兩個(gè)文件，一個(gè)主配置文件nginx.conf 一個(gè)自定義配置文件default.conf
所以一般我們可以提前準(zhǔn)備兩個(gè)對(duì)應(yīng)的配置文件，主配置文件一般多數(shù)項(xiàng)目可以公用，自定義文件可以根據(jù)具體的前端項(xiàng)目需求來編寫，可能會(huì)涉及到server_name 和后端的轉(zhuǎn)發(fā)，

nginx.conf主配置文件的內(nèi)容

[root@jenkins docker]# cat nginx.conf 
user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;
events {
    worker_connections  65535;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    #gzip  on;
    include /etc/nginx/conf.d/*.conf;
}

default.conf自定義配置文件如下

[root@jenkins docker]# cat default.conf 
server {
        listen  80;
        server_name localhost; #如果有需要監(jiān)聽的域名，這里也需要修改
        location / {
                root  /app;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
                }
        location /api {
			if ($request_method = 'OPTIONS') {
                        return 204;
                }
                rewrite  ^/api/(.*)$ /$1 break;
                #后端接口域名，這里需要根據(jù)你自己的具體后端來填寫
                proxy_pass https://*****.com/;
        }}

一切準(zhǔn)備就緒，開始構(gòu)建查看效果

在這里插入圖片描述

構(gòu)建輸出如下：

在這里插入圖片描述

看輸出已經(jīng)成功，登錄服務(wù)器查看是否有對(duì)應(yīng)的鏡像和容器

[root@jenkins docker]# docker images
REPOSITORY                       TAG          IMAGE ID       CREATED         SI
nginx-agent                      V4           af8b50d515f5   2 minutes ago   150MB
192.168.80.133:8000/test/nginx   V3           19186858893b   22 hours ago    141MB

[root@jenkins docker]# docker ps 
CONTAINER ID   IMAGE                                COMMAND                  CREATED         STATUS                  PORTS                                                  NAMES
8b3e8ae77b88   nginx-agent:V4                       "/docker-entrypoint.…"   9 seconds ago   Up 8 seconds            0.0.0.0:8001->80/tcp, :::8001->80/tcp                  nginx-agent

容器已經(jīng)成功啟動(dòng)，輸入地址訪問看是否正常

在這里插入圖片描述

訪問正常，搞定！

到此這篇關(guān)于jenkins+docker+nginx+nodejs持續(xù)集成部署vue前端項(xiàng)目的文章就介紹到這了,更多相關(guān)jenkins docker nginx node部署vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: