I. Introduction
This article will docker-composeto Nginx, the running back-end and front-end Vue SpringBoot project to deploy the project
The basic server environment:
- CentOS7.3
- Dokcer
- MySQL
Two, docker-compose project deployment front end of the separation Vue + SpringBoot
Overall project configuration structure here does not affect the structure of the original project, so that all configuration files are stored in the docker proposed folder, but note that docker-composethe file should be placed at the root of the total project Oh!
1, the new back-end configuration file requiredapi-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, the front end of the new configuration file required Vue web-Dockerfile, nginx.conf,.dockerignore
web-Dockerfile : Install dependencies, run the package to generate the resources required to access the file, and then stored in the html directory under running nginx
# 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 Role: ignore the unnecessary files or folders when passed to docker engine.
/code-web/node_modules3, docker-compose.ymlaction: container arrangement order of execution with respect to a docker run a program run more convenient
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容器才可启动
- apiThird, the server runs
The items thrown on the server, enter the root of the project in order to execute the following command
# 1. 构建镜像
docker-compose build
# 2. 运行服务
docker-compose up -d
Warm Tips: The first time the building will be very slow Oh, you can sit down to a cup of herbal tea -
Fourth, test access
Front page: http://www.zhengqing520.com:8101/xiao-xiao-su/dashboard
Backend interface: http://www.zhengqing520.com:9101/swagger-ui.html#
V. Summary
- Deployment vue Project:
npmpulling the desired item dependencenode_modules-> package generateddistFolder -> copied to thenginxrun - Springboot deployment project: Xiao Bian here is the maven command to run, it can also be followed by
mvn install -Dmaven.test.skip=true->cd target->java -jar ***.jarRun - By
docker-composearrangement about the execution order, ① ② front-end web backend api container vessel - By decentralized server
docker-compose buildbuild image ->docker-compose up -dStart Application Services
About Dockerfilecommand understanding, posted here online to see a more interesting view of it
