Введение
Эта статья пройдетdocker-composeЧтобы развернуть внешний проект Vue в Nginx и запустить внутренний проект SpringBoot
Базовая среда сервера:
- CentOS7.3
- Dokcer
- MySQL
2. 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环境配置 --------------------"
# 暴露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: Установите зависимости, упакуйте и сгенерируйте необходимые файлы ресурсов для запуска доступа, а затем сохраните их в каталоге html в nginx для запуска.
# node镜像
FROM node:latest as build-stage
# 维护者信息
MAINTAINER zhengqing "960869719@qq.com"
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 "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用于指定在容器启动时所要执行的命令，而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Роль: игнорировать ненужные файлы или папки при передаче в механизм докера.
/code-web/node_modules
3.docker-compose.ymlФункция: Организовать последовательность выполнения контейнеров, что удобнее, чем запускать проекты по одному в режиме запуска докера.
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
3. Работа сервера
Перетащите проект на сервер, войдите в корневой каталог проекта и последовательно выполните следующие команды.
# 1. 构建镜像
docker-compose build
# 2. 运行服务
docker-compose up -d
Теплый совет: первая сборка будет очень медленной, вы можете сначала сесть и выпить чашку травяного чая~
4. Проверка доступа
Титульная страница:Woohoo Чжэн Qing520.com: 8101/маленький-маленький-да…
Бэкэнд интерфейс:Woohoo. Чжэн Цин520.com:9101/swagger-UI. …
V. Резюме
- Разверните проект vue:
npmПринять необходимую зависимостьnode_modules-> Генерация пакетаdistпапка -> скопировать вnginxвбегает - Разверните проект springboot: редактор использует команду maven для запуска здесь, а затем ее также можно запустить через
mvn install -Dmaven.test.skip=true->cd target->java -jar ***.jarбегать - пройти через
docker-composeОрганизуйте последовательность выполнения: ① внутренний API-контейнер ② интерфейсный веб-контейнер. - поставить его под сервер
docker-compose buildпостроить образ ->docker-compose up -dзапустить службу приложений
оDockerfileКомандное понимание, вот еще интересную картинку можно посмотреть в интернете