Ubuntu下實現Jenkins利用Docker自動化部署vue項目

環境說明：

• 操作系統：Ubuntu 18.04 64位（阿里雲服務器）
• Jenkins：2.235.1
• Docker：19.03.12

 

整體流程：

1. Linux服務器上安裝Docker
2. Linux服務器上安裝Jenkins
3. 准備一個VUE項目，代碼傳到GitHub上
4. 配置jenkins，build項目
5. 訪問瀏覽器可以看到VUE項目成功部署

 

說明：

　　宿主機上的Jenkins會先到你的GitHub代碼位置去拉取代碼到Jenkins自己的工作目錄，Compile前端代碼后生成dist目錄，然后Jenkins會通過docker命令創建一個基於nginx的image，通過該image運行一個container（將配置及dist目錄中文件進行掛載），最終達到自動化部署VUE項目。其實還是將你的靜態資源文件放在nginx上去提供服務的。

 

1.Ubuntu安裝Docker

# 更換國內軟件源（略）
# 安裝所需要的包
sudo apt install apt-transport-https ca-certificates software-properties-common curl

# 添加 GPG 密鑰，並添加 Docker-ce 軟件源，這里中國科技大學的 Docker-ce 源
curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu \
$(lsb_release -cs) stable"

# 添加成功后更新軟件包緩存
sudo apt update

# 安裝 Docker-ce
sudo apt install docker-ce

# 設置開機自啟動並啟動 Docker-ce（安裝成功后默認已設置並啟動，可忽略）
sudo systemctl enable docker
sudo systemctl start docker

# 測試運行
sudo docker run hello-world

# 添加當前用戶到 docker 用戶組，可以不用 sudo 運行 docker（可選）
sudo groupadd docker
sudo usermod -aG docker $USER

# 測試添加用戶組
docker run hello-world

　　測試運行結果如圖，則安裝成功：

 

　　參考：https://www.runoob.com/docker/ubuntu-docker-install.html

 

2.Ubuntu安裝Jenkins

　　p.s.我這里沒有用docker部署jenkins，是直接在宿主機中安裝的。主要是考慮到docker中的jenkins再運行docker有種套娃的感覺，比較繞，所以干脆直接在宿主機安裝了。

# 判斷是否安裝jdk
java -version

# 如果沒有安裝jdk，則安裝jdk
sudo apt-get install openjdk-8-jdk

# 再次查看jdk
java -version

# 將存儲庫密鑰添加到系統
wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -

# 將Debian包存儲庫地址附加到服務器的sources.list
 echo deb http://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list

sudo apt-get update

sudo apt-get install jenkins

# 啟動Jenkins
sudo systemctl start jenkins

# 使用status命令驗證是否成功啟動
sudo systemctl status jenkins

# 查看jenkins進程
ps -ef | grep jenkins

　　進程如圖，此時訪問你的地址:8080就可以看到jenkins的頁面了，安裝成功：

 　　這里還需要將jenkins用戶添加到docker組，不然后面jenkins執行腳本使用docker命令的時候會報權限不足類似的錯：

# 查看docker用戶組成員
root@Colin:~# cat /etc/group |grep docker
docker:x:999:root

# 將jenkins用戶添加到docker組
root@Colin:~# sudo gpasswd -a jenkins docker
Adding user jenkins to group docker

# 查看docker用戶組成員
root@Colin:~# cat /etc/group |grep docker
docker:x:999:root,jenkins

# 重新啟動docker服務
root@Colin:~# sudo systemctl restart docker

# 賦予權限
root@Colin:~# sudo chmod a+rw /var/run/docker.sock

 

3.准備一個VUE項目，代碼傳到GitHub上

　　我這里是用Vue CLI腳手架初始化了一個項目，可以參考官網：https://cli.vuejs.org/

　　按照官網生成項目后，注意，還需要在項目根目錄加幾個文件，參考官網：https://cli.vuejs.org/guide/deployment.html#docker-nginx

　　目錄如圖：

  　　.dockerignore

**/node_modules
**/dist

　　Dockerfile

FROM nginx
EXPOSE 80

　　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;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /usr/share/nginx/html;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

　　項目准備好build后，進入生成的dist文件夾，瀏覽器打開index.html，類似下圖則沒有問題，提交代碼到自己的GitHub上：

 

 4.配置jenkins，build項目

 　　修改jenkins端口：修改/etc/default下的jenkins即可，這里修改端口號為8082。然后重啟service jenkins restart即可，訪問8082端口就可以看到jenkins的頁面了。

 

  　　進入/var/lib/jenkins/secrets查看密碼輸入

　　可以選擇安裝建議的插件

　　插件安裝完成后，創建一個Jenkins用戶

　

  　　進入控制台頁面

 　　安裝node插件

　　點擊左邊Manage Jenkins --> Manage Plugins --> available 上面搜索nodejs，選擇然后install without restart，我這里已經安裝過了

　

　　選擇安裝nodejs版本

 　　點擊左邊Manage Jenkins --> Global Tool Configuration，拉到頁面最下方，名字隨意，然后save

 

  　　新建任務

　　左邊New Item，如圖，然后OK。（我這里已經創建過一個同名的了）

 

　　

　　

　　 

echo $PATH 
node -v 
npm -v 
npm install 
npm run build

docker stop vuenginxapp || true \
 && docker rm vuenginxapp || true \
 && cd /var/lib/jenkins/workspace/booking-centre \
 && docker build -t vuenginxapp . \
 && docker run -d -p 8083:80 --name vuenginxapp -v /var/lib/jenkins/workspace/booking-centre/dist:/usr/share/nginx/html -v /var/lib/jenkins/workspace/booking-centre/nginx.conf:/etc/nginx/nginx.conf vuenginxapp

　　/var/lib/jenkins需要替換為你自己的路徑，我這里就是jenkins默認的工作目錄位置。

 　　配置好之后save，然后構建項目

 

  　　可以查看控制台輸出

　　

  5.訪問瀏覽器可以看到VUE項目成功部署

　　p.s.需要你把雲服務器的8083端口放開

　

　　完成

　　參考：https://www.cnblogs.com/aoping/articles/11770410.html

 

P.S.

　　進入Jenkins工作目錄可以看到拉取的代碼，以及Compile后生產的dist目錄。

 

 　　通過docker命令可以看到生成的images和container。