00.背景
最近学校让一个小组做一个web项目最后部署到linux服务器上，项目本身并不难就是简单的增删改查，但是我想借着这个机会写一个docker部署的模板，方便自己以后用，也希望可以帮助到大家。
01.docker简介
docker可以快捷 轻量 高效 简单的部署服务，docker有两个重要概念 镜像(image)与容器(container) 镜像可以理解为类 容器可以理解为对象，假如我们需要部署一个web项目 这个项目由 vue springboot mysql构成，我们就可以先创造所需的镜像，再创造对应的容器 容器之间进行交互 最终实现这个服务。容器与容器之间是相互隔离的 只有身处同一个网络才能交互，一个镜像产生可以由很多容器。
02.环境整体目录
蓝色节点是目录 红色节点是压缩包 其余是文件。
03.所需材料
这是一个简单的web项目，总共有四大部分，前端vue 后端springboot 数据库mysql 以及nginx服务器。
04.创造镜像
拉取镜像
docker pull nginx
docker pull openjdk:8
docker pull mysql:5.7
这里我们拉取了三个镜像
nginx：用于反向代理 可以简单的理解为 我们前端的请求都会通过nginx进行转发
openjdk:8：jdk8 Java运行环境 我们的springboot项目需要java支持
mysql:5.7 ：mysql数据库
除了这三个镜像外我们还需要springboot后端的镜像
05.创造后端镜像
首先我们要用maven打包
我们把打包出来的app.jar放到app目录下
编写dockerfile文件
FROM openjdk:8
EXPOSE 8080
ADD ./app.jar /app.jar
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java","-jar","/app.jar","--spring.profiles.active=prod"]
dockerfile文件的作用是创造一个镜像，这个镜像创造过程有许多层，例如第一层是FROM openjdk:8 作用就是在openjdk:8环境的基础上搭建镜像，EXPOSE 8080则是这个镜像创造的容器向外暴露的端口
用dockerfile构建后端镜像app
在app目录下构建后端镜像
docker build -f ./dockerfile -t app .
查看现有镜像
docker images
可以看到我们现在有四个镜像，分别是app后端镜像、nginx服务器镜像、mysql镜像、jdk8镜像
06.创造mysql容器
我们首先创造宿主机(本机linux服务器)目录
mkdir -p /mnt/docker/mysql
cd /mnt/docker/mysql
创造mysql容器
docker run -id \
-p 3307:3306 \
--name=mysql \
-v /mnt/docker/mysql/data:/var/lib/mysql \ # 目录挂载
-e MYSQL_ROOT_PASSWORD=root \
mysql:5.7
参数解释
-p 宿主机端口:容器端口，我们后端调用数据库需要调用3307端口 Navicat连接数据库也需要连接3307端口
-v 宿主机mysql目录:容器mysql目录，目录挂载的目的是 把容器与宿主机的目录数据同步，防止因为删除容器而导致数据库中数据丢失
查看容器是否启动
docker ps
可以看到我们启动成功了
07.docker-compose服务编排
服务编排的目的是利用Docker Compose将springboot和nginx容器分批启动
安装Docker Compose
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
# 查看版本信息
docker-compose -version
编写docker-compose.yml文件
进入docker-compose目录 编写docker-compose.yml文件
version: '3'
services:
nginx:
image: nginx
container_name: nginx
ports: #ports：绑定容器的端口到主机的端口，前者为主机端口；expose：将当前容器的端口暴露给link到本容器的容器。
- 80:80
depends_on:
- app
volumes: #将本地目录挂载到容器的目录下，前者为linux的目录，后者为容器目录。（访问容器的目录即可访问到被挂载目录下的所有文件）
- /mnt/docker/docker-compose/nginx/:/etc/nginx/
network_mode: "bridge"
app:
image: app
container_name: app
ports:
- 8080:8080
network_mode: "bridge"
参数解释
version docker-compose版本
services 容器服务
image 容器属于那镜像
container_name 容器名
ports 宿主机端口:容器端口
depends_on 此容器启动所依赖的容器
volumes 挂载到宿主机的哪个目录
network_mode 容器网络，必须处于同一网络下容器才能互相访问
08.nginx相关配置
nginx的作用是反向代理和负载均衡
反向代理：反向代理简单来说就是nginx服务器监听网站请求，并且把这些请求转发到其它服务器处理。反向代理与正向代理相反，正向代理是服务器主动请求，比如我们常用的游戏加速器，比如这个游戏只能在美国玩，此时我们就需要一个美国服务器，此时我们自己的服务器并不会直接连接游戏而且把请求发给美国服务器再由美国服务器请求这个游戏，这个过程就是正向代理。
负载均衡：当我们网站的请求被nginx服务器监听到后 nginx会根据规则把这些请求发送给指定的服务器，比如我们有两个后端服务 一个是java一个是go，我们的其中一部分请求nginx转发给java服务另一部分转发给go服务，通过规则的合理分配以达到最优化资源使用、最大化吞吐率、最小化响应时间、同时避免过载的目的。
nginx相关配置文件编写
在nginx目录下编写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;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
我们可以看到这里面引入了两个文件 /etc/nginx/mime.types;与 /etc/nginx/conf.d/* .conf;
mime.types文件
types {
text/html html htm shtml;
text/css css;
text/xml xml;
image/gif gif;
image/jpeg jpeg jpg;
application/javascript js;
application/atom+xml atom;
application/rss+xml rss;
text/mathml mml;
text/plain txt;
text/vnd.sun.j2me.app-descriptor jad;
text/vnd.wap.wml wml;
text/x-component htc;
image/png png;
image/svg+xml svg svgz;
image/tiff tif tiff;
image/vnd.wap.wbmp wbmp;
image/webp webp;
image/x-icon ico;
image/x-jng jng;
image/x-ms-bmp bmp;
font/woff woff;
font/woff2 woff2;
application/java-archive jar war ear;
application/json json;
application/mac-binhex40 hqx;
application/msword doc;
application/pdf pdf;
application/postscript ps eps ai;
application/rtf rtf;
application/vnd.apple.mpegurl m3u8;
application/vnd.google-earth.kml+xml kml;
application/vnd.google-earth.kmz kmz;
application/vnd.ms-excel xls;
application/vnd.ms-fontobject eot;
application/vnd.ms-powerpoint ppt;
application/vnd.oasis.opendocument.graphics odg;
application/vnd.oasis.opendocument.presentation odp;
application/vnd.oasis.opendocument.spreadsheet ods;
application/vnd.oasis.opendocument.text odt;
application/vnd.openxmlformats-officedocument.presentationml.presentation
pptx;
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
xlsx;
application/vnd.openxmlformats-officedocument.wordprocessingml.document
docx;
application/vnd.wap.wmlc wmlc;
application/x-7z-compressed 7z;
application/x-cocoa cco;
application/x-java-archive-diff jardiff;
application/x-java-jnlp-file jnlp;
application/x-makeself run;
application/x-perl pl pm;
application/x-pilot prc pdb;
application/x-rar-compressed rar;
application/x-redhat-package-manager rpm;
application/x-sea sea;
application/x-shockwave-flash swf;
application/x-stuffit sit;
application/x-tcl tcl tk;
application/x-x509-ca-cert der pem crt;
application/x-xpinstall xpi;
application/xhtml+xml xhtml;
application/xspf+xml xspf;
application/zip zip;
application/octet-stream bin exe dll;
application/octet-stream deb;
application/octet-stream dmg;
application/octet-stream iso img;
application/octet-stream msi msp msm;
audio/midi mid midi kar;
audio/mpeg mp3;
audio/ogg ogg;
audio/x-m4a m4a;
audio/x-realaudio ra;
video/3gpp 3gpp 3gp;
video/mp2t ts;
video/mp4 mp4;
video/mpeg mpeg mpg;
video/quicktime mov;
video/webm webm;
video/x-flv flv;
video/x-m4v m4v;
video/x-mng mng;
video/x-ms-asf asx asf;
video/x-ms-wmv wmv;
video/x-msvideo avi;
}
这个文件的作用是定义用户访问的文件类型
/etc/nginx/conf.d/ .conf;*
这个则是引入了conf.d下的所有文件
这里主要指的是app.conf
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_vary off;
upstream appstream{
server 私网ip:8080;
}
server {
listen 80;
server_name 公网ip;
error_page 500 502 503 504 /50x.html;
error_page 404 /404.html;
location = /50x.html {
root html;
}
location = /404.html{
root html;
}
location /api/ {
proxy_pass http://appstream/;
}
location / {
root /etc/nginx/html;
index index.html;
}
}
参数解释
upstream appstream 代表上游服务，也就是nginx把请求转发给它，这里指的是本地的8080端口也就是后端服务
server nginx监听的服务
listen 监听的端口 这里是80
server_name 监听的ip
error_page 出现错误指定请求哪个文件
location = /404.html
{root html;} 当请求产生404报错时，nginx展示html目录下404.html
location /api/
{ proxy_pass http://appstream/;}
所有的80端口的请求带/api的都由上游服务处理 这里指的是后端处理，比如我们现在请求
http://公网ip/api/sub/findAccounts 通过 nginx转发就变为了
http://私网ip/sub/findAccounts
location / {
root /etc/nginx/html;
index index.html;
}
同理所以/(根目录)的请求都转发到/etc/nginx/html/index.html
09.前端文件
你们可能发现一个问题前端为什么没有镜像，因为前端只是一堆静态文件，并不需要处理请求，只是用来发送请求接收响应，所以我们只需要把前端放到特点位置，然后我们的nginx根据服务规则 调用需要的前端文件 就像上述app.conf中的location /，http://47.95.49.40/(根请求)就转发到了/etc/nginx/html/index.html 这个指定的前端文件，从而展示前端。
打包前端
我们通过 npm run build 命令打包vue项目 打包完成后会有一个文件一个目录
我们把它们放到html目录下，同时我们可以发现html目录下处理这两个文件 还有一个404.html与50x.html 这两个是我专门写的如果出现错误 指定展示的文件
10 编排启动
我们进入docker-compose 目录下
docker-compose up #直接启动
docker-compose up -d #代表后台启动
docker-compose down #停止并删除容器
docker-compose start #启动已有容器
docker-compose stop #停止运行的容器
我们执行docker-compose up -d 启动 nginx容器与app容器
查看此时的容器
docker ps
我们可以看到我们现在有三个容器 分别是 nginx、app、mysql。
此时我们这个网站就部署成功了
11 整个项目的运行逻辑
首先我们访问 公网ip:80 也就是直接访问公网ip 例如http://47.95.49.40/，此时我们先访问了/(根目录)，通过nginx的转发我们知道 展示了/etc/nginx/html/index.html 也就是上述的登录界面，之后我们输入账号密码，发送请求 http://47.95.49.40/api/user/login 我们发现请求是带着/api的 此时我们的nginx转发到我们的后端进行处理 http://私网ipi/user/login 最终完成请求、转发、响应，实现了一个基本的网站。
12 总结
总的来说，我们在用docker部署时要先确定目录结构，之后便是 理清自己的镜像需要哪些依赖从而编写dockerfile文件 ，理清自己需要的容器之间的关系 编写docker-compose.yml文件，理清前后端请求的逻辑编写nginx相关配置。注意要把所需端口放开。
最后 祝各位小伙伴都能部署顺利。
