一、前言

本文將通過docker-compose來部署前端Vue專案到Nginx中，和執行後端SpringBoot專案

伺服器基本環境：

1. CentOS7.3
2. Dokcer
3. MySQL

二、docker-compose 部署Vue+SpringBoot 前後端分離專案

整體專案配置結構，這裡在不影響原來專案的結構，因此將所有配置檔案都提出來存放到docker資料夾內了，但注意docker-compose檔案須放到專案總的根目錄下哦！

1、新增後端所需配置檔案api-Dockerfile

# 指定基礎映象
FROM maven:3.5.4-jdk-8
# 維護者資訊
MAINTAINER zhengqing "[email protected]"

RUN echo "-------------------- api環境配置 --------------------"

#
 
 暴露9101埠
EXPOSE 9101
# 設定環境編碼UTF-8
ENV LANG C.UTF-8
# 執行 - 配置容器，使其可執行化
#ENTRYPOINT ["java","-jar","app.jar","--spring.profiles.active=dev"]
複製程式碼

2、新增前端Vue所需配置檔案web-Dockerfile、nginx.conf、.dockerignore

web-Dockerfile ： 安裝依賴，打包生成執行訪問所需資原始檔，然後存放到nginx下的html目錄中執行

# node映象
FROM node:latest as build-stage
#
 
 維護者資訊
MAINTAINER zhengqing "[email protected]"

RUN echo "-------------------- web環境配置 --------------------"

# 指定接下來的工作路徑為/app  - 類似於cd命令
WORKDIR /app
# 拷貝前端專案到app目錄下
COPY ./code-web .

# 設定淘寶npm映象
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安裝依賴
RUN cnpm install

# 打包 - 目的：丟到nginx下跑
 

RUN cnpm run build:prod

# 前端專案執行命令
#CMD ["npm","run","start"]


# ======================== 上：npm打包  下：nginx執行 ========================
# nginx映象
FROM nginx:1.15.3-alpine as production-stage
# 維護者資訊
MAINTAINER zhengqing "[email protected]"

# 移除nginx容器的default.conf檔案、nginx配置檔案
RUN rm /etc/nginx/conf.d/default.conf
RUN rm /etc/nginx/nginx.conf
# 把主機的nginx.conf檔案複製到nginx容器的/etc/nginx資料夾下
COPY ./docker/web/nginx.conf /etc/nginx/
# 拷貝前端vue專案打包後生成的檔案到nginx下執行
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露8101埠
EXPOSE 8101

# 注：CMD不同於RUN，CMD用於指定在容器啟動時所要執行的命令，而RUN用於指定映象構建時所要執行的命令。
#    RUN指令建立的中間映象會被快取，並會在下次構建中使用。如果不想使用這些快取映象，可以在構建時指定--no-cache引數，如：docker build --no-cache

# 使用daemon off的方式將nginx執行在前臺保證映象不至於退出
CMD ["nginx","-g","daemon off;"]
複製程式碼

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;

    # include /etc/nginx/conf.d/*.conf;

  	server {
        listen       8101;
        charset utf-8;
        server_name  www.zhengqing520.com;# 伺服器地址或繫結域名

    	# start ---------------------------------------------------------------------------------------------

        location / {
           root   /usr/share/nginx/html;
           try_files $uri $uri/ /index.html;
        }

        # end ---------------------------------------------------------------------------------------------

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
   }
}
複製程式碼

.dockerignore 作用：在傳遞給docker引擎時忽略掉不必要的檔案或資料夾。

/code-web/node_modules
複製程式碼

3、docker-compose.yml 作用：編排容器執行順序，相對於一個一個docker run方式執行專案更方便

version: '3'
services:
  api:                                  # 後端springboot容器
    container_name: xiao-xiao-su-api    # 容器名為'xiao-xiao-su-api'
    restart: always                     # 重啟策略: 容器退出時總是重啟容器
    build:
      context: ./                       # 指定設定上下文根目錄，然後以該目錄為準指定Dockerfile
      dockerfile: ./docker/api-Dockerfile
    working_dir: /app                   # 設定工作目錄為容器內的app資料夾
    environment:
      TZ: Asia/Shanghai
    volumes:                            # 掛載檔案
      - ./code-api:/app                 # 將主機的code-api資料夾(java程式碼)對映到容器內的app資料夾
      - ./logs/:/app/log                # 對映容器產生的日誌到主機的logs資料夾
    ports:                              # 對映埠
      - "9101:9101"
    command: mvn clean spring-boot:run -Dspring-boot.run.profiles=dev '-Dmaven.test.skip=true' # 容器建立後執行命令執行springboot專案

  web:                                  # 前端node容器(執行nginx中的Vue專案)
    container_name: xiao-xiao-su-web    # 容器名為'xiao-xiao-su-web'
    restart: always                     # 重啟策略: 容器退出時總是重啟容器
    build:
      context: ./                       # 指定設定上下文根目錄，然後以該目錄為準指定Dockerfile
      dockerfile: docker/web/web-Dockerfile
    environment:
      TZ: Asia/Shanghai
    ports:
      - "8101:8101"                      # 對映埠
    depends_on:                          # 依賴於api容器，被依賴容器啟動後此web容器才可啟動
      - api
複製程式碼

三、伺服器執行

將專案丟到伺服器上，進入專案根目錄依次執行如下命令即可

# 1. 構建映象
docker-compose build
# 2. 執行服務
docker-compose up -d
複製程式碼

溫馨小提示：第一次構建的時候會很慢哦，可以先坐下來喝杯涼茶 ~

四、訪問測試

前端頁面：www.zhengqing520.com:8101/xiao-xiao-s…

後端介面：www.zhengqing520.com:9101/swagger-ui.…

五、總結

1. 部署vue專案：npm拉取專案所需依賴node_modules -> 打包生成dist資料夾 -> 拷貝到nginx中執行
2. 部署springboot專案：小編這裡採用的是maven命令執行，其次也可通過mvn install -Dmaven.test.skip=true -> cd target -> java -jar ***.jar 執行
3. 通過docker-compose編排一下執行順序，①後端api容器 ②前端web容器
4. 放到伺服器下通過docker-compose build構建映象 -> docker-compose up -d啟動應用服務

關於Dockerfile的命令理解，這裡貼一張網上看見比較有意思的圖吧

案例demo原始碼

github.com/zhengqingya…