Nginx的DockerCompose文件编写及解释说明，以及Docker容器前后端项目部署。

Nginx的DockerCompose文件编写及解释说明，以及前后端项目部署。

一、DockerCompose文件编写

1. volumes挂载的本机目录提前创建好（有的不创建也可以，报错在建也行），但是nginx.conf要放入对应的文件夹内。
2. 静态页面也放一下，可以在Windows解压一个拿出来放进去。（/local/App）
3. 建议先创建好网络（默认创建的自定义网络是bridge类型）。
4. 演示的是自定义网络。
5. Redis与MySQL参考之前发的文章。

 docker network create my

• DockerCompose文件

version: '3'
services:
  nginx:
    # 指定服务名称，命令：--name nginx
    # 如果不指定，则将默认用docker-compose.yml所在文件夹名_服务名称_n命名
    container_name: nginx
    # docker启动nginx启动
    restart: always
    # 镜像
    image: nginx:1.24.0
    # 暴露端口
    ports:
      - 80:80
      - 443:443
    # 挂载
    volumes:
      - /dockerData/compose/nginx/conf.d:/etc/nginx/conf.d
      - /dockerData/compose/nginx/log:/var/log/nginx
      - /dockerData/compose/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - /dockerData/compose/nginx/local/App:/usr/share/nginx/html
      # 证书
      - /dockerData/compose/nginx/letsencrypt:/etc/letsencrypt
    networks:
      - my
    # 创建网络      
networks:
  # 默认将会创建为 docker-compose.yml所在 文件夹名_public 网络名称
  my:
    #表示网络已经在Docker外部定义好了
    external: true
    # 使用bridge驱动创建网络
    # driver: bridge

• 运行DockerCompose文件
• 在docker-compose.yaml所在文件夹里运行 -d表示后台启动

docker compose up -d

• 测试直接用ip访问浏览器会出现nginx默认欢迎页（挂载的目录手动放进去）

二、后端项目打包

• 需要改的配置自己处理一下
• （重点）不管是Redis还是MySQL以及nginx要在同一个network中。弄错不要急，容器都启动之后也可以更改，推荐使用下面的管理工具会很方便。(需要安装很简单这里不再阐述)
  
• 启动容器没有指定--network my默认就是bridge，或者Compose文件处理好（可以先创建网络使容器加入指定的network中）创建命令docker network create 网络名。就可以忽略上面说的问题。

• 说明一个容器是可以加多个网络
  
• 部署成功的一个容器图，感觉放到这里合适一点。
  
• 下面有后端yml文件示例，按需修改。

  redis:
    # 容器同一个network使用容器名称访问,我的叫redis,所以写redis.MySQL也一样。
    host: redis
    port: 6379
    password: root
    timeout: 6000ms
    jedis:
      pool:
        max-active: 1000  #连接池最大连接数（使用负值表示没有限制）
        max-wait: -1ms # 连接池最大阻塞等待时间（使用负值表示没有限制）
        max-idle: 8 # 连接池中的最大空闲连接
        min-idle: 0 # 连接池中的最小空闲连接

• 构建镜像上传jar包，编写Dockerfile，启动参数按需配置。

FROM adoptopenjdk/openjdk8
COPY baseApp-1.0.0-SNAPSHOT.jar  baseApp.jar
EXPOSE 8088
ENTRYPOINT ["java","-jar","-Xms512m","-Xmx1024m","/baseApp.jar"]

• 进入上传jar包根目录

• 执行build命令

# me-work/baseapp:3.0 . 镜像名称:版本号 注意有个 点
docker build -t me-work/baseapp:3.0 .

• 创建的3.0版本

• 启动项目（后端结束）

# --network my 上面解释过了 没有自定义网络忽略 -d后台启动演示的是前台ctrl+c停止运行
docker run -p 8088:8088 -d --network my  --name baseapp3 me-work/baseapp:3.0 

三、前端打包

• Vue
• vue.config.js

 module.exports = {
    #这里要注意,不是根路径部署项目的话要改拦截路径,下面nginx前端拦截的是根路径.
    publicPath: '/', 
 }

• 然后打好的包直接扔到 /dockerData/compose/nginx/local/App(演示的是这个目录下)
  

四、nginx.conf配置

server {
		# 监听80
        listen       80;
        # 配置域名 本地要在 C:\Windows\System32\drivers\etc 目录下找到host文件，
        # 最后添加一个 虚拟机ip和对应域名 例：192.168.1.4  www.abc.com
        server_name  www.abc.com;
        # 前端访问根
        location / {
            root   /usr/share/nginx/html;
            index index.html index.htm;
            # 解决刷新404
            try_files  $uri $uri/ /index.html;
        }

        # 拦截 /base和后端的公共路径一样的话proxy_pass最后加不加/base都可以访问到后端接口 
        # 这个底层应该有什么处理逻辑 暂时没有理解
        # 部署成功后端拦截使用的是这个下面那个忽略
        location /base {
        # proxy_pass       http://172.17.0.3:8088/base;
        proxy_pass         http://172.17.0.3:8088/base;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        }

        # 拦截 /pro-api和后端的公共路径不一样的话proxy_pass最后必须要/base才可以访问到后端接口
        location /pro-api {
        proxy_pass         http://172.17.0.3:8088/base;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

• 重启nginx容器(有管理工具点一下就可以)
  

五、测试访问即可，不方便截图。

• 域名：就是host配置过就可以使用。
• ip: 虚拟机的ip直接浏览器访问不加端口。
• 写的匆忙有错误或建议欢迎指出，有问题也可以提问，看到会回复。
• 后面有问题会继续优化文章。