一、前言
本文將通過docker-compose來部署前端Vue項目到Nginx中，和運行后端SpringBoot項目
服務器基本環(huán)境：
- CentOS7.3
- Dokcer
- MySQL
二、docker-compose 部署Vue+SpringBoot 前后端分離項目
整體項目配置結構，這里在不影響原來項目的結構，因此將所有配置文件都提出來存放到docker文件夾內了，但注意docker-compose文件須放到項目總的根目錄下哦！
在這里插入圖片描述
1、新增后端所需配置文件api-Dockerfile
# 指定基礎鏡像
FROM maven:3.5.4-jdk-8
# 維護者信息
MAINTAINER zhengqing "960869719@qq.com"
RUN echo "-------------------- api環(huán)境配置 --------------------"
# 暴露9101端口
EXPOSE 9101
# 設置環(huán)境編碼UTF-8
ENV LANG C.UTF-8
# 運行 - 配置容器，使其可執(zhí)行化
#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 "960869719@qq.com"
RUN echo "-------------------- web環(huán)境配置 --------------------"
# 指定接下來的工作路徑為/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 "960869719@qq.com"
# 移除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用于指定在容器啟動時所要執(zhí)行的命令，而RUN用于指定鏡像構建時所要執(zhí)行的命令。
# RUN指令創(chuàng)建的中間鏡像會被緩存，并會在下次構建中使用。如果不想使用這些緩存鏡像，可以在構建時指定--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 作用：編排容器執(zhí)行順序，相對于一個一個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' # 容器創(chuàng)建后執(zhí)行命令運行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
三、服務器運行
將項目丟到服務器上，進入項目根目錄依次執(zhí)行如下命令即可
# 1. 構建鏡像
docker-compose build
# 2. 運行服務
docker-compose up -d
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
溫馨小提示：第一次構建的時候會很慢哦，可以先坐下來喝杯涼茶 ~
四、訪問測試
前端頁面：http://www.zhengqing520.com:8101/xiao-xiao-su/dashboard
在這里插入圖片描述
后端接口：http://www.zhengqing520.com:9101/swagger-ui.html#
在這里插入圖片描述
五、總結
- 部署vue項目：
npm拉取項目所需依賴node_modules-> 打包生成dist文件夾 -> 拷貝到nginx中運行 - 部署springboot項目：小編這里采用的是maven命令運行，其次也可通過
mvn install -Dmaven.test.skip=true->cd target->java -jar ***.jar運行 - 通過
docker-compose編排一下執(zhí)行順序，①后端api容器 ②前端web容器 - 放到服務器下通過
docker-compose build構建鏡像 ->docker-compose up -d啟動應用服務
關于Dockerfile的命令理解，這里貼一張網上看見比較有意思的圖吧
在這里插入圖片描述
