[手把手系列之] Jenkins+Docker自動化部署vue項目

介紹

本系列主要介紹如何自動化部署咱們的前端和後端項目

本篇主要介紹如何自動化部署vue項目

下篇講如何自動化部署nodejs項目

我這裏是mac os,若是你用linux就不會碰到不少下面碰到的問題了。

相關應用

• jenkins
• docker

整個流程

首先咱們把咱們的電腦想象成一臺服務器，固然若是你有服務器，也能夠直接在服務器上，執行如下操做

我這裏方便起見，就直接把個人電腦（mac）當作一臺服務器，事實證實這裏面不少坑！！！

注意區分如下本地和服務器的區別，其實咱們這裏都是咱們的電腦

1. 咱們在服務器（這裏是咱們的mac）上安裝docker

2. 咱們在服務器（這裏是咱們的mac）上用docker安裝了jenkins

3. 咱們本地新建一個vue項目，並推到github

4. 咱們本地訪問服務器上的jenkins，即打開網址http://localhost:8081 (若是是服務器這裏localhost換成你服務器的ip)

5. 咱們用jenkins拉了github的項目到jenkins的安裝目錄裏的workspace/目錄

6. jenkins使用執行shell跑了命令

npm install
npm run build
複製代碼

這裏咱們須要給jenkins安裝nodejs插件

7. 咱們用jenkins ssh鏈接到咱們的服務器

這裏咱們須要安裝Publish Over SSH插件，並配置好服務器

8. 在服務器（這裏是咱們的mac）上執行如下操做

把咱們的vue項目打包成鏡像vuenginxapp

用這個鏡像建立一個容器vuenginxapp

安裝docker

請參考 www.runoob.com/docker/maco…

我這裏是mac, 安裝成功以後，在狀態欄有docker圖標

這時命令行輸入docker -v

則說明安裝成功

docker安裝jenkins

題外話：你也能夠不經過docker安裝，能夠參考個人另外一篇文章Mac安裝jenkins

搜索jenkins鏡像

hub.docker.com/ 是docker存放image(鏡像)的地方，界面以下：

咱們搜索一下要安裝的jenkins鏡像

注意: 雖然第一個是docker官方維護的版本，但它很長時間沒有更新了，是一個過期的版本。因此這裏咱們要安裝第二個，這個是jenkins維護的

ps：咱們也能夠經過命令行搜索,命令是docker search jenkins

docker安裝jenkins

新建一個目錄jenkins_home，如我這裏是

執行命令

docker run --name jenkins_node -d -v /Users/isaacho/Documents/application/docker/jenkins_home:/var/jenkins_home -p 8081:8080 -p 50000:50000 jenkins/jenkins:lts
複製代碼

注意： 這裏不要直接複製上面的命令，須要把/Users/isaacho/Documents/application/docker/jenkins_home替換成你新建的目錄。一樣下面若是出現/Users/isaacho/Documents/application/docker/jenkins_home都須要換成你的目錄

等待安裝過程。。。，若是能打開http://localhost:8081則說明安裝成功

同時咱們能夠看到/Users/isaacho/Documents/application/docker/jenkins_home目錄下生成了不少文件

命令解釋：

--name jenkins_node 表示你的容器名字叫jenkins_node

-d 表示在後臺運行

-v /Users/isaacho/Documents/application/docker/jenkins_home:/var/jenkins_home 表示把咱們新建的jenkins_home目錄映射到容器的/var/jenkins_home目錄

-p 就是端口映射

配置jenkins

瀏覽器打開http://localhost:8081,界面以下：

咱們經過如下命令獲取管理員密碼

cat /Users/isaacho/Documents/application/docker/jenkins_home/secrets/initialAdminPassword
複製代碼

點擊繼續

選擇推薦的插件，安裝插件，而後等待。。。

建立管理員用戶

點擊保存並完成

點擊開始使用jenkins

安裝ssh插件

點擊系統管理

搜索 Publish Over SSH,並安裝

配置ssh

系統管理=》configure system =》拉到最下面

點擊 Test Configuration,顯示success則說明配置成功，點擊保存

若是不成功，說明咱們的電腦沒有開啓遠程登陸

解決方案:

選擇系統偏好設置->選擇共享->點擊遠程登陸

上面的hostname即你這裏的IP地址

安裝node插件

node插件在跑node項目時須要使用，這裏先安裝好

點擊系統管理

等待安裝好

選擇安裝nodejs版本

準備一個vue項目

項目已經上傳到github

vue cli建立vue項目

咱們用vue-cli3直接建立一個vue項目

注意： 這裏須要你的node版本大於8.9 或更高版本

vue create vueclidemoapp
複製代碼

改寫

修改HelloWorld.vue組件，改寫頁面，並加入axios發送一個請求

import axios from 'axios';
axios.get('/api', {
  params: {},
}).then((res) => {
  console.log(res);
});

...

複製代碼

界面以下

建立nginx配置文件

關於nginx配置請看前端想要了解的Nginx

在項目根目錄下新建nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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;
    gzip_types text/plain application/javascript text/css;

    # 虛擬主機server塊
    server {
        # 端口
        listen   80;
        # 匹配請求中的host值
        server_name  localhost;
        
        # 監聽請求路徑
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

    }

    include /etc/nginx/conf.d/*.conf;
}
複製代碼

建立Dockerfile

在項目根目錄下新建Dockerfile

FROM nginx

EXPOSE 80
複製代碼

此時你的目錄結構是這樣

把這個項目上傳到github

這裏我就不演示了，個人這個項目的github地址是https://github.com/repototest/vueclidemoapp

jenkins部署vue項目

新建任務

第一個shell命令是build咱們的vue項目，會在項目根目錄下生成dist目錄

echo $PATH
node -v
npm -v
npm install
npm run build
複製代碼

第二個shell命令是用來構建docker鏡像和跑docker服務的

它首先會ssh鏈接到咱們的服務器

docker stop vuenginxapp || true \
 && docker rm vuenginxapp || true \
 && cd /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp  \
 && docker build  -t vuenginxapp  . \
 && docker run -d -p 8083:80 --name vuenginxapp -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxapp

複製代碼

docker stop vuenginxapp用於中止vuenginxapp容器

sudo docker rm vuenginxapp用於刪除vuenginxapp容器

cd /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp進入咱們的項目目錄，這裏須要改爲大家本身的目錄，即(yourpath)/jenkins_home/workspace/vueclidemoapp, yourpath就是上面咱們新建jenkins_home目錄時的目錄

docker build -t vuenginxapp . 表示build鏡像，名稱爲vuenginxapp

docker run -d -p 8083:80 --name vuenginxapp -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxapp 表示已咱們上面的vuenginxapp爲鏡像生成容器vuenginxapp

詳細解釋 -d 在後臺運行

-p 8083:80 把容器的80端口映射程咱們訪問的8083端口，注意80端口是nginx默認的端口號

--name vuenginxapp 容器名稱爲vuenginxapp

-v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html 把咱們生成的dist目錄掛載到容器的/usr/share/nginx/html，/usr/share/nginx/html是nginx默認的http目錄

-v /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf 把咱們的nginx.conf掛載到容器的/etc/nginx/nginx.conf，/etc/nginx/nginx.conf是nginx默認的配置文件

vuenginxapp是咱們的鏡像名稱

可能遇到的問題

• docker不是一個命令 出現這個問題的緣由是，咱們用ssh鏈接mac時，命令行只能使用/usr/bin裏的命令，但咱們的docker命令是放在/usr/local/bin裏的，因此找不到，解決方案是用/usr/local/bin/docker 代替上面的docker

即

/usr/local/bin/docker stop vuenginxapp || true \
 && /usr/local/bin/docker rm vuenginxapp || true \
 && cd  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp  \
 && /usr/local/bin/docker build  -t vuenginxapp  . \
 && /usr/local/bin/docker run -d -p 8083:80 --name vuenginxapp -v  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/dist:/usr/share/nginx/html -v  /Users/isaacho/Documents/application/docker/jenkins_home/workspace/vueclidemoapp/nginx.conf:/etc/nginx/nginx.conf vuenginxapp
複製代碼

構建項目

點擊當即構建

等待部署。。。

點擊這個小圓能夠看控制檯輸出

能夠看到咱們的項目被拉到(yourpath)/jenkins_home/workspace下了

訪問http://localhost:8083/

至此咱們成功部署了咱們的vue項目

可能遇到的問題

• Get registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)