使用Docker部署SpringBoot+Vue博客系統

Python實戰社羣

Java實戰社羣

長按識別下方二維碼，按需求添加

掃碼關注添加客服

進Python社羣▲

掃碼關注添加客服

進Java社羣▲

作者丨zzzzbw

segmentfault.com/a/1190000016557755

在今年年初的時候，完成了自己的個Fame博客系統的實現，當時也做了一篇博文Spring-boot+Vue = Fame 寫blog的一次小結作爲記錄和介紹。從完成實現到現在，也斷斷續續的根據實際的使用情況進行更新。

只不過每次上線部署的時候都覺得有些麻煩，因爲我的服務器內存太小，每次即使只更新了前臺部分(fame-front)的代碼，在執行npm build的時候都還必須把我的後端服務(fame-server)的進程關掉，不然會造成服務器卡死(慘啊)。

而且這個項目是前後端分離的，博客前臺頁面還爲了SEO用了Nuxt框架，假如是第一次部署或者要服務器遷移的話，麻煩的要死啊，部署一次的話要以下步驟

安裝mysql，修改相關配置文件，設置編碼時區等，然後重啓
下載安裝java，配置java環境
下載安裝maven，配置maven環境
下載安裝nginx，修改配置文件，設計反向代理等
啓動spring-boot項目
打包vue項目，npm install,npm run build等
啓動nuxt項目,npm install,npm run start等

如果能夠順利的完成這七個步驟算是幸運兒了，假如中間哪個步驟報錯出了問題，可能還要回頭查找哪個步驟出了問題，然後又重新部署。

我選擇死亡

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

項目地址：https://github.com/zzzzbw/Fame

Docker和Docker-compose安裝

Docker和Docker-compose的功能和使用可以看線上的一箇中文文檔Docker — 從入門到實踐

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

#!/bin/sh

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

### 安裝docker ###
# 安裝一些必要的系統工具
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
# 啓動docker並設置爲開機啓動(centos7)
systemctl  start docker.service
systemctl  enable docker.service
# 替換docker爲國內源
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
# 安裝命令補全工具
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結束 ###

Docker化改造

改造後目錄結構

先看一下改造後的項目的結構

├─Fame
│  │  .env                            // docker-compose環境參數配置文件
│  │  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服務器配置文件
│  │  │      
│  │  ├─fame-mysql
│  │  │      fame-mysql-Dockerfile    // mysql的Dockerfile文件
│  │  │      mysqld.cnf               // mysql的配置文件mysqld.cnf
│  │  │      
│  │  └─fame-nginx
│  │          nginx-Dockerfile        // 整個項目的nginx服務器的Dockerfile文件
│  │          nginx.conf              // 整個項目的nginx的配置文件
│  │          
│  ├─fame-admin   // 博客管理後臺，基於Vue+elementui
│  ├─fame-front   // 博客前端，基於Nuxt
│  └─fame-server  // 博客服務端，基於spring-boot

爲了不破壞原有項目的結構，無論前端還是後端的docker的相關配置文件全部提取出來，單獨放在了fame-docker文件夾中。搜索Java知音公衆號，回覆“後端面試“，送你一份Java面試體驗寶典.pdf

docker-compose.yml放在項目根目錄下，直接在根目錄運行命令：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

就啓動項目了，再也不用重複繁瑣的步驟！

改造後的docker項目結構

fame-structure

改造後的`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的結構和剛纔目錄結構大體類似，也是分以下幾個部分

fame-nginx
fame-mysql
fame-server
fame-admin
fame-front

這個docker-compose.yml中有幾個要點

fame-mysql和fame-server的restart要設置爲always，因爲目前Docker-compose是沒有一個方案可以解決容器啓動的先後的問題的。即使設置了depends_on，那也只是控制容器開始啓動的時間，不能控制容器啓動完成的時間，所以讓fame-mysql和fame-server這兩個容器設置restart，防止spring-boot在mysql啓動完成之前啓動而報錯啓動失敗
fame-server，fame-mysql，fame-nginx這三個容器都設置了volumes，把容器裏的logs日誌文件掛載到宿主機的項目目錄裏，方便隨時看日誌文件
fame-mysql容器的mysql存儲文件也設置了volumes掛載在項目目錄裏(./mysql/mysql_data:/var/lib/mysql)，這個建議大家可以根據實際的情況設置到宿主機的其他目錄裏，不然不小心刪除項目的話那麼容器裏的數據庫數據也都沒了

幾個鏡像的Dockerfile大部分都比較簡單，這部分就不全部詳細介紹了，可以直接去我項目中瞭解。

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

spring-boot雙配置切換

爲了能夠讓spring-boot能夠在開發環境和Docker環境下快速切換，需要將spring-boot的配置文件進行修改

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

在原有的application.properties基礎上增加application-dev.properties和application-docker.properties配置文件，把application.properties裏的數據庫日誌等信息分別放到application-dev.properties和application-docker.properties這兩個文件中，實現開發環境和Docker環境的快速切換。

# application.properties文件
#端口號
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

#默認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的內容和application-docker.properties文件類似，只是根據自己開發環境的情況修改mysql和log配置。

動態配置axios的`baseUrl`地址

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

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

fame-admin是基於Vue CLI 3搭建的，相對於cli 2.0官方把webpack的一些配置文件都封裝起來了，所以沒有config和build文件夾。不過對應的官網也給了一些設置更加方便的配置參數。

在官方文檔中提到:

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你可以在應用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_SECRET)

在構建過程中，process.env.VUE_APP_SECRET 將會被相應的值所取代。在 VUE_APP_SECRET=secret 的情況下，它會被替換爲 "sercet"。

利用這個特性來設置環境變量來動態的設置Docker模式和手動部署模式的baseUrl的值

在fame-admin目錄下創建文件server-config.js，編寫以下內容

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
}

那麼只要在環境變量中有VUE_APP_API_URL的值，且NODE_ENV === 'production'，baseUrl就等於VUE_APP_API_URL的值，否則就是localhost的值。

接着在axios配置文件中引用該文件設置

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

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

現在只要將docker的環境變量設置一個VUE_APP_API_URL的值就行了，只要在對應的Dockerfile中增加一個步驟就可以了。

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

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

同樣的，對於用Nuxt搭建fame-front博客前臺修改也是類似的思路。

在Nuxt的官方文檔中寫到：

Nuxt.js 讓你可以配置在客戶端和服務端共享的環境變量。

例如 (nuxt.config.js)：

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

以上配置我們創建了一個 baseUrl 環境變量，如果應用設定了 BASE_URL 環境變量，那麼 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以及對應的Dockerfile文件中編寫和上面fame-admin部分一樣的代碼就可以了

現在已經把baseUrl的設置從代碼的硬編碼中解放出來了，但事實上我們只是把這個參數的編碼從代碼從轉移到Dockerfile文件裏了，要是想要修改的話也要去這兩個文件裏查找然後修改，這樣也不方便。後面會解決這個問題把所有環境配置統一起來。

Nuxt在Docker中無法訪問到宿主機ip問題

先要說明一點，爲什麼博客前端要單獨去使用的Nuxt而不是和博客後臺一樣用Vue呢，因爲博客前端有SEO的需求的，像Vue這樣的對搜索引擎很不友好。

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

這樣就產生了問題

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

這樣設置之後打開瀏覽器輸入網址:http://xx.xxx.xxx.xx可以成功...，但是隨便點擊一個鏈接，就會看到瀏覽器提示錯誤無法訪問到地址http://fame-server/...

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

這是必然的結果，在容器裏http://fame-server/就是服務器...，但是你本地的瀏覽器當然是不知道http://fame-server/是個什麼鬼...，所以就瀏覽器就報出無法訪問的錯誤。

什麼？可是剛纔不是說Nuxt是服務器渲染的頁面嗎，怎麼又讓本地瀏覽器報這個錯誤了。

原來是因爲當通過瀏覽器鏈接直接訪問的時候，Nuxt的確是從後端渲染了頁面再傳過來，但是在頁面中點擊鏈接的時候是通過Vue-Router跳轉的，這時候不在Nuxt的控制範圍，而是和Vue一樣在瀏覽器渲染的，這時候就要從瀏覽器裏向服務端獲取數據來渲染，瀏覽器就會報錯。

如何解決呢

這個問題開始的時候一直想要嘗試配置Docker容器的網絡模式來解決，可是都沒有解決。直到後面我看axios文檔的時候才注意到axios的代理功能，其本質是解決跨域的問題的，因爲只要在axios設置了代理，在服務端渲染的時候就會使用代理的地址，同時在瀏覽器訪問的時候會用baseUrl 的地址，這個特點完美解決我的問題啊。

在server-config.js文件裏增加以下代碼（在nuxt.config.js裏獲取環境變量裏的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的環境參數統一設置

在上文解決動態配置axios地址的部分把baseUrl的設置放在了Dockerfile中，現在就再把Dockerfile中的硬編碼提取出來，放到統一的配置文件中。

首先在docker-compose.yml文件目錄下(即項目跟目錄)創建環境文件.env並編寫一下內容

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

PROXY_HOST=fame-nginx
PROXY_PORT=80

這個是docker-compose的env_file參數，從文件中獲取環境變量，可以爲單獨的文件路徑或列表，如果同目錄下有.env文件則會默認讀取，也可以自己在docker-compose裏設置路徑。

已經在.env設置了環境變量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的容器裏就有對應的BASE_URL,PROXY_HOST,PROXY_PORT環境變量，Nuxt也能夠成功獲取並設置。

不過對於fame-admin容器來說就要稍微複雜一點點了。先來看一下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;"]

這裏用了多階段構建容器，如果直接通過docker-compose設置環境變量只會在後面一個階段生效，但是npm run build是在第一個階段執行的，所以環境變量不能應用到Vue當中。爲了讓環境變量在第一階段就應用，必須要在構建的時候就把變量從docker-compose傳到fame-admin-Dockerfile中，然後在Dockerfile中的第一階段把這個環境變量應用到容器裏。下面修改docker-compose.yml的fame-admin部分：

 fame-admin:
   ...
   build: 
    context: ./
    dockerfile: ./fame-docker/fame-admin/fame-admin-Dockerfile
    args:
      BASE_URL: ${BASE_URL} # 這裏把環境變量當做ARG傳給Dockerfile
   ...

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

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

ARG BASE_URL # 必須申明這個ARG才能從docker-compose裏獲取

ENV VUE_APP_API_URL $BASE_URL

# 以下省略...

這樣就可以在構建階段一鏡像的時候就把環境變量傳入到階段一的鏡像裏，讓Vue裏的變量生效了。

總結

現在網上很多複雜一點的項目即使用了docker-compose部署，也多少依賴shell腳本來操作，比如複製文件設置環境等，我覺得這樣會降低docker-compose的意義。如果都使用了shell腳本，那不如直接不用docker-compose而全用shell來構建和啓動鏡像。

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

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

docker-compose up
docker-compose down

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

程序員專欄 掃碼關注填加客服 長按識別下方二維碼進羣

近期精彩內容推薦：   爲何說IT科技公司應該留住35歲員工？ 工友們！大家好，今天你摸魚了嗎？ 緩存穿透，雪崩，擊穿以及解決方案分析 圖文詳解：如何給女朋友解釋什麼是微服務？


在看點這裏好文分享給更多人↓↓

使用Docker部署SpringBoot+Vue博客系統

Docker和Docker-compose安裝

Docker化改造

改造後目錄結構

改造後的docker項目結構

改造後的`docker-compose.yaml`文件

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

spring-boot雙配置切換

動態配置axios的`baseUrl`地址

Nuxt在Docker中無法訪問到宿主機ip問題

這樣就產生了問題

如何解決呢

Dockerfile的環境參數統一設置

總結

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

Springcloud項目向RabbitMQ消息中間件發送信息（RabbitMQ安裝在虛擬機）

Mac11.0.1 phpize失效問題

Linux之grep中的正則表達式

【程序員腦洞故事】宇宙盡頭的描述符（上）

使用Docker部署SpringBoot+Vue博客系統

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

使用Docker部署SpringBoot+Vue博客系統

Docker和Docker-compose安裝

Docker化改造

改造後目錄結構

改造後的docker項目結構

改造後的docker-compose.yaml文件

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

spring-boot雙配置切換

動態配置axios的baseUrl地址

Nuxt在Docker中無法訪問到宿主機ip問題

這樣就產生了問題

如何解決呢

Dockerfile的環境參數統一設置

總結

改造後的`docker-compose.yaml`文件

動態配置axios的`baseUrl`地址