Vue項目在Docker的自動化部署

時間 2019-11-17

標籤 vue 項目 docker 自動化部署欄目 Docker 简体版

原文原文鏈接

操做系統：CentOShtml

部署環境：Dockervue

CI/CD工具：Jenkinsnode

1.環境配置

安裝Jenkins：Centos安裝Jenkinsnginx

安裝Docker：Centos安裝Git、DotNet、Dockergit

2.Github建立倉庫

https://github.com/longtaosu/Vue2DockerDemogithub

3.本地初始化Vue項目

初始化過程請參考：Vue + Element UI項目初始化web

安裝依賴docker

cnpm install

運行代碼npm

npm run dev

4.將代碼提交到Github

添加到本地暫存json

git add .

添加註釋

git commit -m "init"

提交代碼

git push

如今回到Github，咱們的代碼已經完成了提交

5.配置Nginx

在項目中添加Nginx的配置文件

文件的具體內容請查看Github的源文件，主要核心配置爲

 server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; } location ^~/api/ { rewrite ^/api/(.*)$ /$1 break; proxy_set_header Host $host; proxy_set_header x-forwarded-for $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://localhost:8080;
 } error_page 500 502 503 504  /50x.html; location = /50x.html { root /usr/share/nginx/html; } }

Nginx監聽本地的80端口，並將請求重定向到本地的8080端口（該端口在Vue的項目中配置）

6.編寫Dockerfile和sh文件

6.1Dockerfile文件

Dockerfile文件內容：

 1 FROM node:lts-alpine as build-stage  2 WORKDIR /app  3 COPY package*.json ./
 4 RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
 5 RUN cnpm install  6 COPY . .  7 RUN npm run build  8 
 9 # production stage 10 FROM nginx:stable-alpine as production-stage 11 COPY config/nginx/nginx.conf /etc/nginx/nginx.conf 12 COPY --from=build-stage /app/dist /usr/share/nginx/html 13 
14 EXPOSE 80
15 CMD ["nginx", "-g", "daemon off;"]

第3行，先加載package*.json，配合第四、5行安裝相關的依賴

第6行將Github代碼複製，並配合第7行代碼編譯

第10到底12行配置Nginx

6.2setup.sh文件

該文件主要是對Docker的操做，包括鏡像的編譯，程序的容器部署等

 1 image_version=`date +%Y%m%d%H%M`;  2 echo $image_version;  3 # cd vue2docker  4 git pull --rebase origin master;  5 docker stop vue2docker;  6 docker rm vue2docker;  7 docker build -t vue2docker:$image_version .;  8 docker images;  9 docker run -p 10002:80 -d --name vue2docker vue2docker:$image_version; 10 # -v ~/docker-data/house-web/appsettings.json:/app/appsettings.json -v ~/docker-data/house-web/NLogFile/:/app/NLogFile   --restart=always 11 docker logs vue2docker; 12 #刪除build過程當中產生的鏡像    #docker image prune -a -f 13 docker rmi $(docker images -f "dangling=true" -q)