使用Docker部署SpringBoot+Vue博客系統(tǒng)

1. 安裝mysql，修改相關(guān)配置文件，設(shè)置編碼時(shí)區(qū)等，然后重啟
2. 下載安裝java，配置java環(huán)境
3. 下載安裝maven，配置maven環(huán)境
4. 下載安裝nginx，修改配置文件，設(shè)計(jì)反向代理等
5. 啟動(dòng)spring-boot項(xiàng)目
6. 打包vue項(xiàng)目，npm install,npm run build等
7. 啟動(dòng)nuxt項(xiàng)目,npm install,npm run start等

在這些需求面前，Docker就是解決這些問題的大殺器。無論是其虛擬化技術(shù)隔離各個(gè)容器使其資源互不影響，還是一致的運(yùn)行環(huán)境，以及docker-compose的一鍵部署，都完美的解決了上述問題。

項(xiàng)目地址：https://github.com/zzzzbw/Fame

Docker和Docker-compose安裝

Docker和Docker-compose的功能和使用可以看線上的一個(gè)中文文檔Docker — 從入門到實(shí)踐

下面是Centos7安裝和配置Docker以及Docker-compose的shell腳本，其他操作系統(tǒng)可以參考修改來安裝。其中Docker版本為docker-ce，Docker-compose版本為1.22.0

#!/bin/sh

###?更新?###
yum?-y?update

###?安裝docker?###
#?安裝一些必要的系統(tǒng)工具
sudo?yum?install?-y?yum-utils?device-mapper-persistent-data?lvm2
#?添加軟件源信息
sudo?yum-config-manager?--add-repo?http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
#?更新?yum?緩存
sudo?yum?makecache?fast
#?安裝?Docker-ce
sudo?yum?-y?install?docker-ce
#?啟動(dòng)docker并設(shè)置為開機(jī)啟動(dòng)(centos7)
systemctl??start?docker.service
systemctl??enable?docker.service
#?替換docker為國內(nèi)源
echo?'{"registry-mirrors":?["https://registry.docker-cn.com"],"live-restore":?true}'?>?/etc/docker/daemon.json
systemctl?restart?docker
#?安裝dokcer-compose
sudo?curl?-L?https://github.com/docker/compose/releases/download/1.22.0/docker-compose-`uname?-s`-`uname?-m`?-o?/usr/local/bin/docker-compose
chmod?+x?/usr/local/bin/docker-compose
#?安裝命令補(bǔ)全工具
yum?-y?install?bash-completion
curl?-L?https://raw.githubusercontent.com/docker/compose/$(docker-compose?version?--short)/contrib/completion/bash/docker-compose?>?/etc/bash_completion.d/docker-compose
###?安裝docker結(jié)束?###

Docker化改造

改造后目錄結(jié)構(gòu)

先看一下改造后的項(xiàng)目的結(jié)構(gòu)

├─Fame
│??│??.env????????????????????????????//?docker-compose環(huán)境參數(shù)配置文件
│??│??docker-compose.yml??????????????//?docker-compose文件
│??├─fame-docker
│??│??│??fame-front-Dockerfile????????//?fame-front的Dockerfile文件
│??│??│??fame-server-Dockerfile???????//?fame-server的Dockerfile文件
│??│??│??
│??│??├─fame-admin
│??│??│??????fame-admin-Dockerfile????//?fame-admin的Dockerfile文件
│??│??│??????nginx.conf???????????????//?fame-admin的nginx服務(wù)器配置文件
│??│??│??????
│??│??├─fame-mysql
│??│??│??????fame-mysql-Dockerfile????//?mysql的Dockerfile文件
│??│??│??????mysqld.cnf???????????????//?mysql的配置文件mysqld.cnf
│??│??│??????
│??│??└─fame-nginx
│??│??????????nginx-Dockerfile????????//?整個(gè)項(xiàng)目的nginx服務(wù)器的Dockerfile文件
│??│??????????nginx.conf??????????????//?整個(gè)項(xiàng)目的nginx的配置文件
│??│??????????
│??├─fame-admin???//?博客管理后臺(tái)，基于Vue+elementui
│??├─fame-front???//?博客前端，基于Nuxt
│??└─fame-server??//?博客服務(wù)端，基于spring-boot

為了不破壞原有項(xiàng)目的結(jié)構(gòu)，無論前端還是后端的docker的相關(guān)配置文件全部提取出來，單獨(dú)放在了fame-docker文件夾中。搜索Java知音公眾號(hào)，回復(fù)“后端面試“，送你一份Java面試體驗(yàn)寶典.pdf

docker-compose.yml放在項(xiàng)目根目錄下，直接在根目錄運(yùn)行命令：docker-compose up -d

[root@localhost?Fame]#?docker-compose?up?-d
Starting?fame-front?...?
Starting?fame-admin?...?
Starting?fame-front?...?done
Starting?fame-admin?...?done
Starting?fame-nginx?...?done

就啟動(dòng)項(xiàng)目了，再也不用重復(fù)繁瑣的步驟！

改造后的docker項(xiàng)目結(jié)構(gòu)

改造后的docker-compose.yaml文件

version:?'3'
services:?
??fame-nginx:
????container_name:?fame-nginx
????build:
?????context:?./
?????dockerfile:?./fame-docker/fame-nginx/nginx-Dockerfile
????ports:
??????-?"80:80"
????volumes:
?????-?./logs/nginx:/var/log/nginx
????depends_on:
??????-?fame-server
??????-?fame-admin
??????-?fame-front
??
??fame-mysql:
???container_name:?fame-mysql
???build:?
?????context:?./
?????dockerfile:?./fame-docker/fame-mysql/fame-mysql-Dockerfile
???environment:
?????MYSQL_DATABASE:?fame
?????MYSQL_ROOT_PASSWORD:?root
?????MYSQL_ROOT_HOST:?'%'
?????TZ:?Asia/Shanghai
???expose:
??????-?"3306"
???volumes:
?????-?./mysql/mysql_data:/var/lib/mysql
???restart:?always

??fame-server:
????container_name:?fame-server
????restart:?always
????build:?
?????context:?./
?????dockerfile:?./fame-docker/fame-server-Dockerfile
????working_dir:?/app
????volumes:
??????-?./fame-server:/app
??????-?~/.m2:/root/.m2
??????-?./logs/fame:/app/log
????expose:
??????-?"9090"
????command:?mvn?clean?spring-boot:run?-Dspring-boot.run.profiles=docker?-Dmaven.test.skip=true
????depends_on:
??????-?fame-mysql

??fame-admin:
???container_name:?fame-admin
???build:?
????context:?./
????dockerfile:?./fame-docker/fame-admin/fame-admin-Dockerfile
????args:
??????BASE_URL:?${BASE_URL}
???expose:
??????-?"3001"

??fame-front:
???container_name:?fame-front
???build:?
????context:?./
????dockerfile:?./fame-docker/fame-front-Dockerfile
???environment:
??????BASE_URL:?${BASE_URL}
??????PROXY_HOST:?${PROXY_HOST}
??????PROXY_PORT:?${PROXY_PORT}
???expose:
??????-?"3000"

docker-compose.yml的結(jié)構(gòu)和剛才目錄結(jié)構(gòu)大體類似，也是分以下幾個(gè)部分

1. fame-nginx

2. fame-mysql

3. fame-server

4. fame-admin

5. fame-front

這個(gè)docker-compose.yml中有幾個(gè)要點(diǎn)

• fame-mysql和fame-server的restart要設(shè)置為always，因?yàn)槟壳癉ocker-compose是沒有一個(gè)方案可以解決容器啟動(dòng)的先后的問題的。即使設(shè)置了depends_on，那也只是控制容器開始啟動(dòng)的時(shí)間，不能控制容器啟動(dòng)完成的時(shí)間，所以讓fame-mysql和fame-server這兩個(gè)容器設(shè)置restart，防止spring-boot在mysql啟動(dòng)完成之前啟動(dòng)而報(bào)錯(cuò)啟動(dòng)失敗

• fame-server，fame-mysql，fame-nginx這三個(gè)容器都設(shè)置了volumes，把容器里的logs日志文件掛載到宿主機(jī)的項(xiàng)目目錄里，方便隨時(shí)看日志文件

• fame-mysql容器的mysql存儲(chǔ)文件也設(shè)置了volumes掛載在項(xiàng)目目錄里(./mysql/mysql_data:/var/lib/mysql)，這個(gè)建議大家可以根據(jù)實(shí)際的情況設(shè)置到宿主機(jī)的其他目錄里，不然不小心刪除項(xiàng)目的話那么容器里的數(shù)據(jù)庫數(shù)據(jù)也都沒了

幾個(gè)鏡像的Dockerfile大部分都比較簡(jiǎn)單，這部分就不全部詳細(xì)介紹了，可以直接去我項(xiàng)目中了解。

Docker化過程的困難和解決方法

spring-boot雙配置切換

為了能夠讓spring-boot能夠在開發(fā)環(huán)境和Docker環(huán)境下快速切換，需要將spring-boot的配置文件進(jìn)行修改

└─fame-server
????????...???????????????????
????????│??└─resources
????????│??????│??application-dev.properties
????????│??????│??application-docker.properties
????????│??????│??application.properties

在原有的application.properties基礎(chǔ)上增加application-dev.properties和application-docker.properties配置文件，把application.properties里的數(shù)據(jù)庫日志等信息分別放到application-dev.properties和application-docker.properties這兩個(gè)文件中，實(shí)現(xiàn)開發(fā)環(huán)境和Docker環(huán)境的快速切換。

#?application.properties文件
#端口號(hào)
server.port=9090
#mybatis
mybatis.type-aliases-package=com.zbw.fame.Model
#mapper
mapper.mappers=com.zbw.fame.util.MyMapper
mapper.not-empty=false
mapper.identity=MYSQL

#mail
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true
spring.mail.properties.mail.smtp.starttls.required=true

#默認(rèn)properties
spring.profiles.active=dev

~

#?application-docker.properties文件
#datasource
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://fame-mysql:3306/fame?useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=root

#log
logging.level.root=INFO
logging.level.org.springframework.web=INFO
logging.file=log/fame.log

application-dev.properties的內(nèi)容和application-docker.properties文件類似，只是根據(jù)自己開發(fā)環(huán)境的情況修改mysql和log配置。

動(dòng)態(tài)配置axios的baseUrl地址

在fame-admin和fame-front中用了axios插件，用于發(fā)起和獲取fame-server服務(wù)器的請(qǐng)求。在axios要配置服務(wù)器url地址baseUrl，那么通常開發(fā)環(huán)境和Docker環(huán)境以及生產(chǎn)環(huán)境的url可能都不一樣，每次都去修改有點(diǎn)麻煩。(雖然只需要配置兩處，但是代碼潔癖不允許我硬編碼這個(gè)配置)。

1.先修改fame-admin(Vue)使其兼容手動(dòng)部署模式和Docker模式

fame-admin是基于Vue CLI 3搭建的，相對(duì)于cli 2.0官方把webpack的一些配置文件都封裝起來了，所以沒有config和build文件夾。不過對(duì)應(yīng)的官網(wǎng)也給了一些設(shè)置更加方便的配置參數(shù)。

在官方文檔中提到:

只有以?VUE_APP_?開頭的變量會(huì)被?webpack.DefinePlugin?靜態(tài)嵌入到客戶端側(cè)的包中。你可以在應(yīng)用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_SECRET)

在構(gòu)建過程中，process.env.VUE_APP_SECRET?將會(huì)被相應(yīng)的值所取代。在?VUE_APP_SECRET=secret?的情況下，它會(huì)被替換為?"sercet"。

利用這個(gè)特性來設(shè)置環(huán)境變量來動(dòng)態(tài)的設(shè)置Docker模式和手動(dòng)部署模式的baseUrl的值

在fame-admin目錄下創(chuàng)建文件server-config.js，編寫以下內(nèi)容

const?isProd?=?process.env.NODE_ENV?===?'production'
const?localhost?=?'http://127.0.0.1:9090/'
const?baseUrl?=?process.env.VUE_APP_API_URL?||?localhost
const?api?=?isProd???baseUrl?:?localhost
export?default?{
??isProd,
??api
}

那么只要在環(huán)境變量中有VUE_APP_API_URL的值，且NODE_ENV === 'production'，baseUrl就等于VUE_APP_API_URL的值，否則就是localhost的值。

接著在axios配置文件中引用該文件設(shè)置

//?fame-admin/src/plugins/http.js
...
import?serverConfig?from?'../../server-config'

const?Axios?=?axios.create({
??baseURL:?serverConfig.api?+?'api/',
?...
})
????
...

現(xiàn)在只要將docker的環(huán)境變量設(shè)置一個(gè)VUE_APP_API_URL的值就行了，只要在對(duì)應(yīng)的Dockerfile中增加一個(gè)步驟就可以了。

ENV?VUE_APP_API_URL?http://xx.xxx.xxx.xxx

2.再修改fame-front(Nuxt)使其兼容手動(dòng)部署模式和Docker模式

同樣的，對(duì)于用Nuxt搭建fame-front博客前臺(tái)修改也是類似的思路。

在Nuxt的官方文檔中寫到：

Nuxt.js 讓你可以配置在客戶端和服務(wù)端共享的環(huán)境變量。

例如 (nuxt.config.js)：

module.exports?=?{
??env:?{
????baseUrl:?process.env.BASE_URL?||?'http://localhost:3000'
??}
}

以上配置我們創(chuàng)建了一個(gè)?baseUrl?環(huán)境變量，如果應(yīng)用設(shè)定了?BASE_URL?環(huán)境變量，那么?baseUrl?的值等于?BASE_URL?的值，否則其值為?http://localhost:3000。

所以我們只要和官方文檔說的一樣，在nuxt.config.js文件中增加代碼就可以了

module.exports?=?{
?env:?{
???baseUrl:?process.env.BASE_URL?||?'http://localhost:3000'
?}
}

接著在server-config.js文件和axios的配置文件fame-front/plugins/http.js以及對(duì)應(yīng)的Dockerfile文件中編寫和上面fame-admin部分一樣的代碼就可以了

現(xiàn)在已經(jīng)把baseUrl的設(shè)置從代碼的硬編碼中解放出來了，但事實(shí)上我們只是把這個(gè)參數(shù)的編碼從代碼從轉(zhuǎn)移到Dockerfile文件里了，要是想要修改的話也要去這兩個(gè)文件里查找然后修改，這樣也不方便。后面會(huì)解決這個(gè)問題把所有環(huán)境配置統(tǒng)一起來。

Nuxt在Docker中無法訪問到宿主機(jī)ip問題

先要說明一點(diǎn)，為什么博客前端要單獨(dú)去使用的Nuxt而不是和博客后臺(tái)一樣用Vue呢，因?yàn)椴┛颓岸擞蠸EO的需求的，像Vue這樣的對(duì)搜索引擎很不友好。

所以Nuxt的頁面是服務(wù)器端渲染(SSR)的

這樣就產(chǎn)生了問題

fame-front的頁面在渲染之前必須獲取到fame-server服務(wù)器中的數(shù)據(jù)，但是每個(gè)docker容器都是互相獨(dú)立的，其內(nèi)部想要互相訪問只能通過容器名訪問。例如容器fame-front想要訪問容器fame-server，就設(shè)置baseURL = fame-server(fame-server是服務(wù)器的容器的container_name)。

這樣設(shè)置之后打開瀏覽器輸入網(wǎng)址:http://xx.xxx.xxx.xx可以成功...，但是隨便點(diǎn)擊一個(gè)鏈接，就會(huì)看到瀏覽器提示錯(cuò)誤無法訪問到地址http://fame-server/...

vendor.e2feb665ef91f298be86.js:2?GET?http://fame-server/api/article/1?net::ERR_CONNECTION_REFUSED

這是必然的結(jié)果，在容器里http://fame-server/就是服務(wù)器...，但是你本地的瀏覽器當(dāng)然是不知道http://fame-server/是個(gè)什么鬼...，所以就瀏覽器就報(bào)出無法訪問的錯(cuò)誤。

什么？可是剛才不是說Nuxt是服務(wù)器渲染的頁面嗎，怎么又讓本地瀏覽器報(bào)這個(gè)錯(cuò)誤了。

原來是因?yàn)楫?dāng)通過瀏覽器鏈接直接訪問的時(shí)候，Nuxt的確是從后端渲染了頁面再傳過來，但是在頁面中點(diǎn)擊鏈接的時(shí)候是通過Vue-Router跳轉(zhuǎn)的，這時(shí)候不在Nuxt的控制范圍，而是和Vue一樣在瀏覽器渲染的，這時(shí)候就要從瀏覽器里向服務(wù)端獲取數(shù)據(jù)來渲染，瀏覽器就會(huì)報(bào)錯(cuò)。

如何解決呢

這個(gè)問題開始的時(shí)候一直想要嘗試配置Docker容器的網(wǎng)絡(luò)模式來解決，可是都沒有解決。直到后面我看axios文檔的時(shí)候才注意到axios的代理功能，其本質(zhì)是解決跨域的問題的，因?yàn)橹灰?code style>axios設(shè)置了代理，在服務(wù)端渲染的時(shí)候就會(huì)使用代理的地址，同時(shí)在瀏覽器訪問的時(shí)候會(huì)用baseUrl?的地址，這個(gè)特點(diǎn)完美解決我的問題啊。

在server-config.js文件里增加以下代碼（在nuxt.config.js里獲取環(huán)境變量里的proxyHost和proxyPort）

...
const?localProxy?=?{
??host:?'127.0.0.1',
??port:?9090
}
const?baseProxy?=?{
??host:?process.env.proxyHost?||?localProxy.host,
??port:?process.env.proxyPort?||?localProxy.port
}
exports.baseProxy?=?isProd???baseProxy?:?localProxy
...

然后在axios配置文件里增加代碼

//?fame-front/plugins/http.js
const?Axios?=?axios.create({
??proxy:?serverConfig.baseProxy
?...
})
????
...

就可以完美的解決問題了。

Dockerfile的環(huán)境參數(shù)統(tǒng)一設(shè)置

在上文解決動(dòng)態(tài)配置axios地址的部分把baseUrl的設(shè)置放在了Dockerfile中，現(xiàn)在就再把Dockerfile中的硬編碼提取出來，放到統(tǒng)一的配置文件中。

首先在docker-compose.yml文件目錄下(即項(xiàng)目跟目錄)創(chuàng)建環(huán)境文件.env并編寫一下內(nèi)容

BASE_URL=http://xx.xxx.xxx.xxx

PROXY_HOST=fame-nginx
PROXY_PORT=80

這個(gè)是docker-compose的env_file參數(shù)，從文件中獲取環(huán)境變量，可以為單獨(dú)的文件路徑或列表，如果同目錄下有.env文件則會(huì)默認(rèn)讀取，也可以自己在docker-compose里設(shè)置路徑。

已經(jīng)在.env設(shè)置了環(huán)境變量BASE_URL的值，就能在docker-compose.yml里直接使用了。修改docker-compose.yml的fame-front部分：

fame-front:
?...
?environment:
??BASE_URL:?${BASE_URL}
??PROXY_HOST:?${PROXY_HOST}
??PROXY_PORT:?${PROXY_PORT}
??...

這樣在fame-front的容器里就有對(duì)應(yīng)的BASE_URL,PROXY_HOST,PROXY_PORT環(huán)境變量，Nuxt也能夠成功獲取并設(shè)置。

不過對(duì)于fame-admin容器來說就要稍微復(fù)雜一點(diǎn)點(diǎn)了。先來看一下fame-admin容器的Dockerfile文件fame-admin-Dockerfile

#?build?stage
FROM?node:10.10.0-alpine?as?build-stage

#中間一些操作省略...

RUN?npm?run?build

#?production?stage
FROM?nginx:1.15.3-alpine?as?production-stage

COPY?./fame-docker/fame-admin/nginx.conf?/etc/nginx/conf.d/default.conf
COPY?--from=build-stage?/app/dist?/usr/share/nginx/html
EXPOSE?80
CMD?["nginx",?"-g",?"daemon?off;"]

這里用了多階段構(gòu)建容器，如果直接通過docker-compose設(shè)置環(huán)境變量只會(huì)在后面一個(gè)階段生效，但是npm run build是在第一個(gè)階段執(zhí)行的，所以環(huán)境變量不能應(yīng)用到Vue當(dāng)中。為了讓環(huán)境變量在第一階段就應(yīng)用，必須要在構(gòu)建的時(shí)候就把變量從docker-compose傳到fame-admin-Dockerfile中，然后在Dockerfile中的第一階段把這個(gè)環(huán)境變量應(yīng)用到容器里。下面修改docker-compose.yml的fame-admin部分：

?fame-admin:
???...
???build:?
????context:?./
????dockerfile:?./fame-docker/fame-admin/fame-admin-Dockerfile
????args:
??????BASE_URL:?${BASE_URL}?#?這里把環(huán)境變量當(dāng)做ARG傳給Dockerfile
???...

然后在fame-admin-Dockerfile的第一階段增加步驟

#?build?stage
FROM?node:10.10.0-alpine?as?build-stage

ARG?BASE_URL?#?必須申明這個(gè)ARG才能從docker-compose里獲取

ENV?VUE_APP_API_URL?$BASE_URL

#?以下省略...

這樣就可以在構(gòu)建階段一鏡像的時(shí)候就把環(huán)境變量傳入到階段一的鏡像里，讓Vue里的變量生效了。

總結(jié)

現(xiàn)在網(wǎng)上很多復(fù)雜一點(diǎn)的項(xiàng)目即使用了docker-compose部署，也多少依賴shell腳本來操作，比如復(fù)制文件設(shè)置環(huán)境等，我覺得這樣會(huì)降低docker-compose的意義。如果都使用了shell腳本，那不如直接不用docker-compose而全用shell來構(gòu)建和啟動(dòng)鏡像。

所以在Docker化的過程中雖然遇到一些坎坷，但堅(jiān)持實(shí)現(xiàn)了只用docker-compose部署，以后上線和下線就及其方便了。也希望我的Docker化思路可以給其他項(xiàng)目做一些參考。

對(duì)比以前恐怖的步驟，現(xiàn)在Fame博客的上線和下線只需要兩行命令，真的十分的便捷。

docker-compose?up
docker-compose?down

源碼地址 https://github.com/zzzzbw/Fame

作者：zzzzbw
segmentfault.com/a/1190000016557755
最近熬夜給大家準(zhǔn)備了515套Java代碼，有一些是業(yè)務(wù)類的小項(xiàng)目，比如Java博客項(xiàng)目，也有腳手架、也有平時(shí)用一些的工具類、21套小程序代碼，也有一些游戲類的項(xiàng)目。
掃以下二維碼并回復(fù)“828”即可獲取

或者在本公眾號(hào)對(duì)話框回復(fù)【828】馬上獲取