簡述：Spring boot+Vue 前后端分離項目部署，主要采用docker容器部署方式。
Springboot項目部署：docker構(gòu)建mysql環(huán)境+docker構(gòu)建項目自身環(huán)境遥皂。
Vue項目：使用docker啟動nginx服務(wù)器方式代理部署指攒。
1.SpringBoot項目部署
項目使用mysql8.0作為數(shù)據(jù)源，所以部署時需要使用docker構(gòu)建mysql環(huán)境及項目自身環(huán)境。
1.1.mysql容器
1.1.1.拉取鏡像
docker pull mysql:8.0.22 #pull成功之后通過 docker images查看
1.1.2.運行容器
docker container run --name mysql8.0.22 -p 3306:3306 -v /$mysql8.0.22/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:8.0.22
連接出現(xiàn)1251錯誤時：
#1.進入容器
docker exec -it mysql8.0.22 /bin/bash
#2.連接mysql服務(wù)器進行配置修改
use mysql;
alter user 'root'@'%' identified with mysql_native_password by '123456';
flush privileges;
1.2.項目容器
首先將項目進行打包：mumu-0.0.1-SNAPSHOT.jar
1.2.1.Dockerfile文件
FROM openjdk:11.0-jre
VOLUME /tmp
COPY mumu-0.0.1-SNAPSHOT.jar mumu.jar
RUN bash -c "touch /mumu.jar"
EXPOSE 8081
ENTRYPOINT ["java","-jar","mumu.jar","--spring.datasource.url=jdbc:mysql://192.168.18.170:3308/nms8000?createDatabaseIfNotExist=true&autoReconnect=true&useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai"]
解釋：
FROM openjdk:11.0-jre：項目jdk運行環(huán)境芹枷，Dockerfile可以通過FROM指令直接獲取它的狀態(tài)衅疙，也就是在容器中java是已經(jīng)安裝的，接下來通過自定義的命令來運行Spring Boot應(yīng)用鸳慈。
VOLUME：指向了一個/tmp的目錄饱溢，由于Spring Boot使用內(nèi)置的Tomcat容器，Tomcat默認使用/tmp作為工作目錄走芋。效果就是在主機的/var/lib/docker目錄下創(chuàng)建了一個臨時文件绩郎，并連接到容器的/tmp。
將項目的jar文件作為app.jar添加到容器
RUN：表示在新創(chuàng)建的鏡像中執(zhí)行一些命令翁逞，然后把執(zhí)行的結(jié)果提交到當前鏡像肋杖。這里使用touch命令來改變文件的修改時間，Docker創(chuàng)建的所有容器文件默認狀態(tài)都是“未修改”挖函。這對于簡單應(yīng)用來說不需要状植，不過對于一些靜態(tài)內(nèi)容（比如：index.html）的文件就需要一個“修改時間”。
EXPOSE：容器向外暴露的端口怨喘，用于容器生成時和主機某端口進行映射 必要
ENTRYPOINT：容器應(yīng)用啟動命令 參數(shù)設(shè)定
# 注意： ENTRYPOINT 配置相關(guān)ip地址時津畸，localhost或者127.0.0.1會被指向當前容器，例如：如果你需要連接本機中的mysql服務(wù)器哲思，你必須把ip換成本機ip而不是localhost
1.2.2.生成鏡像
$ docker image build -t mumu .
# 或者
$ docker image build -t mumu:0.0.1 .
解釋：
-t參數(shù)用來指定 image 文件的名字洼畅，后面還可以用冒號指定標簽。如果不指定棚赔，默認的標簽就是latest帝簇。最后的那個點表示 Dockerfile 文件所在的路徑
image創(chuàng)建成功可以通過 docker image ls / docker images 來查看新生成的docker image信息
1.2.3.運行容器
docker container run --name mumu -p 8081:8081 \
-v /opt/jar/springBootDocker/logs:/home/nms/sunam/docker-volumes/mumu \
-it -d mumu:0.0.1 /bin/bash
解釋
run: 容器啟動命令
--name 自定義容器命名
-d 程序后臺啟動
-v /opt/jar/boot-docker/logs:/log 應(yīng)用日志 數(shù)據(jù)卷的方式存儲，將容器中的/log文件夾掛載到本機中的/opt/jar/boot-docker/logs
-p 8081:8081 用主機(前面)端口映射容器中(后面)的端口
-it參數(shù)：容器的 Shell 映射到當前的 Shell靠益，然后你在本機窗口輸入的命令丧肴，就會傳入容器
mumu:0.0.1 image名稱 （如果有標簽提供標簽，默認是 latest 標簽）
/bin/bash 容器啟動以后胧后，內(nèi)部第一個執(zhí)行的命令芋浮。這里是啟動 Bash，保證用戶可以使用 Shell
到此壳快，springboot項目采用docker方式運行部署結(jié)束纸巷。
2.Vue項目部署
2.1.項目打包
npm run build
DONE Build complete. The dist directory is ready to be deployed.
執(zhí)行完成之后會在項目目錄下生成文件夾dist，之后我們將該文件夾進行nginx代理部署即可
其他開發(fā)中使用到的命令(本人后端開發(fā)眶痰，對vue使用不是很了解瘤旨，順帶記錄下)：
1.vue ui #啟動在線項目可視化管理
2.npm run serve #啟動vue項目
3.vue add element #項目添加element插件依賴
4.vue add axios #項目添加axios插件依賴
2.2.nginx部署
使用docker容器方式運行nginx服務(wù)器。
2.2.1.代理概念
-
正向代理
代理client端竖伯，隱藏了client進行隱藏：由于一些原因客戶端不能直接訪問目標服務(wù)器存哲，于是客戶端將請求發(fā)送給中間代理服務(wù)器因宇，由中間代理服務(wù)器向目標服務(wù)器發(fā)起請求，并將請求到的數(shù)據(jù)返回給客戶端祟偷。在這個過程中察滑，目標服務(wù)器并不知道客戶端姓甚名誰，因為它收到的只是中間代理服務(wù)器的請求修肠。此時贺辰，客戶端和中間代理服務(wù)器是一個整體，客戶端對目標服務(wù)器是隱藏的氛赐。
-
反向代理
代理server端魂爪，對server端進行隱藏：比如一個基本的微服務(wù)系統(tǒng)先舷，會有網(wǎng)關(guān)轉(zhuǎn)發(fā)模塊和多種業(yè)務(wù)模塊艰管，我們通過在網(wǎng)關(guān)層進行路由配置，不同路由前綴訪問到后端不同的業(yè)務(wù)模塊蒋川，并對客戶端只暴露網(wǎng)關(guān)的端口牲芋，比如客戶端可以通過
ip:9999/user/**訪問用戶模塊信息，通過ip:9999/order/**訪問訂單模塊信息捺球，對于客戶端來說缸浦，只是訪問了網(wǎng)關(guān)服務(wù)9999，對于用戶模塊和訂單模塊是不知道的氮兵。此時裂逐，網(wǎng)關(guān)層扮演的就是服務(wù)反向代理。
2.2.2.拉取鏡像
docker pull nginx #命令默認latest泣栈，也可自己指定版本
2.2.3.運行容器
對于nginx服務(wù)器卜高，重要的兩個操作是：
配置頁面訪問資源，配置路徑：/usr/share/nginx/html
修改nginx.conf文件南片，配置具體代理策略
所以我們在配置啟動nginx容器的時候掺涛，需要將對應(yīng)的目錄及文件進行宿主機掛載，方便后續(xù)更新資源及操作
啟動命令：
$ docker run -d --name nginx -p 80:80 \
-v $NGINX/html:/usr/share/nginx/html \
-v $NGINX/log:/var/log/nginx \
-v $NGINX/nginx.conf:/etc/nginx/nginx.conf \
-d nginx
# 注意：這種方式是讀取宿主機下的資源及配置進行啟動疼进，所以要求“$NGINX/html”及“$NGINX/nginx.conf”文件有效薪缆，否者容器會啟動失敗，可以先進行目錄及文件不掛載方式運行伞广，將nginx中的“/etc/nginx/nginx.conf”配置文件拷貝出來拣帽。
# 拷貝命令：
docker cp nginx:/etc/nginx/nginx.conf .
docker cp nginx.conf nginx:/etc/nginx/nginx.conf #將nginx.conf拷進容器
2.2.4.資源及代理配置
將vue打包后的dist文件目錄上傳到服務(wù)器對應(yīng)目錄下“$NGINX/html”
-
nginx.conf文件配置
user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; 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; server { listen 80;#監(jiān)聽端口 server_name localhost; location / { root /usr/share/nginx/html/dist;#資源目錄 dist為vue打包編譯后的目錄 index index.html index.htm; } location /mumu/ { proxy_pass http://192.168.27.51:8081/;#192.168.27.51為當前l(fā)inux宿主機ip；8081為springboot項目容器暴露的端口 proxy_read_timeout 6000s; proxy_set_header Host $host:$server_port; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 1024M; } } include /etc/nginx/conf.d/*.conf; } -
nginx容器重啟
docker restart nginx
2.3.訪問測試
訪問"ip:8081/test"可以訪問到springboot項目test接口
訪問"ip:80"可以直接訪問到vue默認頁面
訪問"ip:80/mumu/test"可以訪問到springboot項目test接口
