Docker Compose
首先分别部署前后端项目，确定没问题之后使用compose统一管理
Vue项目部署到nginx使用docker镜像
打包前端项目
npm run build ? #我是用的vue2版本，使用此命令打包，生成到dist文件夹下
?
上传并编写配置文件
接下来要把这个包上传到服务器，我用的是FileZilla，目录结构如下图所示
?
?
路径是/usr/local/nginx/vue，这里放创建nginx镜像所需要的文件，dist就是打包后的文件夹，Dockerfile是创建dock儿镜像时用到的文件，default.conf是nginx的配置文件
然后是Dockerfile文件内容
FROM nginx ? ? ? ? ? ? ? #原始镜像肯定是用nginx官方，不加版本就是取最新 ? COPY dist/ /usr/share/nginx/html/ ? ? #将dist目录下文件放到对应nginx的html目录下，这里需要注意一下路径和default.conf文件的资源路径要匹配，不然会出现500错误 COPY default.conf /etc/nginx/conf.d/default.conf ? #这个就是放配置文件，注意是default.conf而不是nginx.conf，这两个是不一样的，具体请学习nginx ? CMD ["nginx", "-g", "daemon off;"] ? #添加守护进程，让docker启动后不会立即停止，其实不加也行，没影响
接下来default.conf
? ?server {
? ? ? ?listen ? ? ? 80;
? ? ? ?server_name localhost;
?
? ? ? ?#charset koi8-r;
?
? ? ? ?#access_log logs/host.access.log main;
?
? ? ? ?#静态资源目录
? ? ? ?root /usr/share/nginx/html;
? ? ? ?index index.html index.htm;
?
? ? ? ?location / {
? ? ? ? ? ? root ? /usr/share/nginx/html;
? ? ? ? ? ? index ?index.html index.htm;
? ? ? ? ? ? try_files ?$uri $uri/ /index.html;
? ? ? }
? ? ? ?#后端服务配置
? ? ? ?location /api {
? ? ? ? ? ? ? ?# proxy_redirect off;
? ? ? ? ? ? ? ?rewrite ^/api/(.*)$ /$1 break; # 去除本地接口/api前缀, 否则会出现404
? ? ? ? ? ? ? ?proxy_set_header Host $host;
? ? ? ? ? ? ? ?proxy_set_header X-Real-IP $remote_addr;
? ? ? ? ? ? ? ?proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
?
? ? ? ? ? ? ? ?proxy_pass http://java:8081; ? ?#这里ip一定要和compose服务名一样
? ? ? }
? ? ? # location / {
? ? ? # ? ? root ? html;
? ? ? # ? ? index index.html index.htm;
? ? ? # }
?
? ? ? ?#error_page 404 ? ? ? ? ? ? /404.html;
?
? ? ? ?# redirect server error pages to the static page /50x.html
? ? ? ?#
? ? ? ?error_page ? 500 502 503 504 /50x.html;
? ? ? ?location = /50x.html {
? ? ? ? ? ?root ? /usr/share/nginx/html;
? ? ? }
? }
注意location root的路径和资源存放路径匹配
docker创建镜像及启动容器验证
进入到vue目录下，也就是Dockerfile同级目录，这样不用加-f参数
[root@VM-16-15-centos vue]# docker build -t vue:1.0 . ? ? #创建vue项目对应的镜像-t参数是取别名 ? [root@VM-16-15-centos vue]# docker images ? ? ? ? ? #查看镜像可以看到第一个就是创建成功的 REPOSITORY ? TAG ? ? ? IMAGE ID ? ? ? CREATED ? ? ? ? ? ? SIZE vue ? ? ? ? ?1.0 ? ? ? a9c4ed23861b ? About an hour ago ? 147MB mycentos ? ? 0.1 ? ? ? e0b12094946f ? 2 weeks ago ? ? ? ? 580MB nginx ? ? ? latest ? 605c77e624dd ? 3 months ago ? ? ? 141MB centos ? ? ? 7 ? ? ? ? eeb6ee3f44bd ? 6 months ago ? ? ? 204MB centos ? ? ? latest ? 5d0da3dc9764 ? 6 months ago ? ? ? 231MB
[root@VM-16-15-centos vue]# docker run -p 80:80 -d --name vueApp vue:1.0 ? #根据vue:1.0镜像创建对应容器并运行 #-p 绑定主机80端口对应容器80端口，前面是主机，后面是容器 #-d 表示容器后台运行 #--name 容器名字为vueApp ? [root@VM-16-15-centos vue]# docker ps CONTAINER ID ? IMAGE ? ? COMMAND ? ? ? ? ? ? ? ? CREATED ? ? ? ? ? ? STATUS ? ? ? ? ? ? PORTS ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? NAMES a00c821e8f7c ? vue:1.0 ? ?"/docker-entrypoint.…" ? About an hour ago ? Up About an hour ? 0.0.0.0:80->80/tcp, :::80->80/tcp ? ? ? vueApp ? ? #已经可以看到容器运行相关信息了，然后本机访问下
[root@VM-16-15-centos vue]# curl 127.0.0.1 <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>webcalculator</title><link href="/css/chunk-73878fe2.f43ab34e.css" rel="prefetch"><link href="/js/about.6fd8e682.js" rel="prefetch"><link href="/js/chunk-73878fe2.e1b38611.js" rel="prefetch"><link href="/css/app.e2390a88.css" rel="preload" as="style"><link href="/css/chunk-vendors.4cb5fce1.css" rel="preload" as="style"><link href="/js/app.5abe6144.js" rel="preload" as="script"><link href="/js/chunk-vendors.53c5cd65.js" rel="preload" as="script"><link href="/css/chunk-vendors.4cb5fce1.css" rel="stylesheet"><link href="/css/app.e2390a88.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but webcalculator doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.53c5cd65.js"></script><script src="/js/app.5abe6144.js"></script></body></html>[root@VM-16-15-centos vue]# #已经可以访问到了，然后在用网页访问试一下，如果访问超时则需要配置安全组 ? #如果容器启动不报错，然后立即停止了docker ps命令查不到，那可能是容器内部的问题，使用下面的命令启动容器，查看资源和配置文件是否有问题,nginx是否正常启动， [root@VM-16-15-centos vue]# docker run -p 80:80 -it --name vueApp vue:1.0 /bin/bash ? #如果容器正常启动，但是访问不到，或者500，使用下面的命令进入容器检查资源和配置文件 [root@VM-16-15-centos vue]# docker exec -it vueApp /bin/bash
到这里第一部分已经完成了。
Springboot项目使用docker制作镜像
打包后端项目
maven打包自然不用多说，命令都可以不用
其实idea可以直接写Dockfile然后通过插件制作镜像的，本次不采用此方案
上传并编写配置文件
?
?
和前端相似的结构，只是不需要dist，只需要jar包就行了。
Dockerfile内容如下
FROM java:8 ? ? ?#基础镜像就是jdk环境呗 ? ADD risk-back-0.0.1-SNAPSHOT.jar /risk-back-0.0.1-SNAPSHOT.jar ? #这个是项目的jar包，直接扔根目录了，容器不用纠结太多 ? EXPOSE 8081 ? #这里端口是要和项目声明相同的，最好写上，不写可能会出错 ? ENTRYPOINT ["java", "-jar", "/risk-back-0.0.1-SNAPSHOT.jar"] ?#这个就是命令执行jar包
docker创建镜像及启动容器验证
[root@VM-16-15-centos java]# docker build -t risk:1.0 . ? #语法无需多言 ? [root@VM-16-15-centos java]# docker images REPOSITORY ? TAG ? ? ? IMAGE ID ? ? ? CREATED ? ? ? ? SIZE risk ? ? ? ? 1.0 ? ? ? 29f49f578632 ? 27 minutes ago ? 671MB vue ? ? ? ? ?1.0 ? ? ? a9c4ed23861b ? 2 hours ago ? ? 147MB mycentos ? ? 0.1 ? ? ? e0b12094946f ? 2 weeks ago ? ? 580MB nginx ? ? ? latest ? 605c77e624dd ? 3 months ago ? ? 141MB centos ? ? ? 7 ? ? ? ? eeb6ee3f44bd ? 6 months ago ? ? 204MB centos ? ? ? latest ? 5d0da3dc9764 ? 6 months ago ? ? 231MB java ? ? ? ? 8 ? ? ? ? d23bdf5b1b1b ? 5 years ago ? ? 643MB ? ?#这里多了基础镜像，也是docker的特点之一，可以深入了解 ?
[root@VM-16-15-centos java]# docker run -p 8081:8081 -d --name risk1 risk:1.0 [root@VM-16-15-centos java]# docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 503094c920fb risk:1.0 "java -jar /risk-bac…" 22 minutes ago Up 22 minutes 0.0.0.0:8081->8081/tcp, :::8081->8081/tcp risk1 a00c821e8f7c vue:1.0 "/docker-entrypoint.…" 2 hours ago Up 2 hours 0.0.0.0:80->80/tcp, :::80->80/tcp vueApp #如果出现问题，可以用下面命令进入容器查看，我的应用是有logs日志的，根目录下就能找到 [root@VM-16-15-centos java]# docker exec -it risk1 /bin/bash
验证
[root@VM-16-15-centos java]# curl 127.0.0.1:8081/test/getList?param=1
{"code":1,"info":"成功","data":"1"}
本机验证没有问题，在进行外网测试
目前为止前后端 单独配置都能成功启动，但是因为这样处理不在一个网段，无法实现前后端交互，而且步骤也还是比较繁琐，所以使用compose进行管理
使用docker-compose部署
安装docker-compose
#这个源可能下载慢，可以百度下其他安装方案 [root@VM-16-15-centos java]# curl -L https://github.com/docker/compose/releases/download/1.29.2/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose #查看版本 [root@VM-16-15-centos java]# docker-compose version docker-compose version 1.29.2, build 5becea4c docker-py version: 5.0.0 CPython version: 3.7.10 OpenSSL version: OpenSSL 1.1.0l 10 Sep 2019
因为vue项目我直接部署在nginx，所以前端就不用build镜像了，我们就在后端文件夹下面写docker-compose.yml文件了。其实只要里面路径配好，执行命令时候找到yml文件，放在哪里无所谓的
[root@VM-16-15-centos java]# ll total 27620 -rw-r--r-- 1 root root 424 Mar 31 18:24 docker-compose.yml -rw-r--r-- 1 root root 151 Mar 31 17:03 Dockerfile drwxr-xr-x 2 root root 4096 Mar 31 18:26 logs -rw-r--r-- 1 root root 28266620 Mar 31 16:53 risk-back-0.0.1-SNAPSHOT.jar
docker-compose.yml文件内容
version: '3' #docker版本，目前一般是3
services: #编排的服务
nginx: #服务名
image: nginx:latest #使用的镜像
ports: #对外端口映射
- 80:80
volumes: #挂载目录前端代码和nginx配置，这样前端更新代码甚至不用重新编排
- /usr/local/nginx/vue/dist:/usr/share/nginx/html
- /usr/local/nginx/vue/default.conf:/etc/nginx/conf.d/default.conf
privileged: true #这个必须有，解决nginx的文件调用的权限问题
java: #服务名，我这个就叫java，需要在default.conf配置文件中将nginx跳转后端的ip配置成java，前面配置文件里有说
restart: always
build: #不使用已有镜像，而是利用dockerfile创建新镜像
context: ./
dockerfile: ./Dockerfile
working_dir: / #容器内工作目录
volumes: #把日志挂载出来，当然其他想要的都能挂载出来
- /usr/local/java/logs:/logs
expose: #暴露端口8081
- 8081
开始编排
[root@VM-16-15-centos java]# docker-compose up -d [root@VM-16-15-centos java]# docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES a3a82f0d3551 nginx:latest "/docker-entrypoint.…" 20 minutes ago Up 20 minutes 0.0.0.0:80->80/tcp, :::80->80/tcp java_nginx_1 0067941be40f java_java "java -jar /risk-bac…" 20 minutes ago Up 20 minutes 8081/tcp java_java_1
可以看到两个容器成功执行了，测试前后端联通也没问题。这里的name 第一个java是文件夹名，第二个是对应的服务名，默认的起名方式，yml可以配置的
总结
这次是比较简单的前后端联通部署，主要是为了熟悉docker的使用和docker-compose的使用，后面还可以深入研究一下dockerfile和docker-compose.yml的配置方案，比如如果加入mysql镜像，就应该让后端依赖mysql，在实际应用中这些肯定是不够用的，仍然需要努力学习。