docker-compose部署vue+nginx接口转发

1、docker-compose文件内容

version: "3"
services:  
  dp-ui: #vue前端服务 
    container_name: robot
    build:
      context: ./
      dockerfile: dockerfile
    ports: #避免出现端口映射错误，建议采用字符串格式
      - "5000:80" ## 左侧端口是容器对外端口，也就是我们浏览器访问的端口，右侧端口为nginx的监听端口，下面配置文件中会说明
    volumes:
      - ./dist/:/usr/share/nginx/html/ ## 指定根html的文件目录
    restart: always ## 自动重启

2、dockerfile文件

# 基础镜像
FROM  nginx:1.10
# author
MAINTAINER ruoyi

 

把这两个文件放到服务器和前端dist打包的文件同一个目录下
比如：
docker-compose.yml
dockerfile
dist
这三个在同一目录下。
3、进到这个目录执行命令启动容器

docker-compose -f docker-compose.yml  up -d --build

4、在nginx配置接口
在nginx的server配置接口

#WebSocket的配置
location /robotDpSocket/ {
                proxy_pass http://192.168.110.10:8080/;
                # support websocket
                proxy_set_header Upgrade $http_upgrade; #此处配置 上面定义的变量
                proxy_set_header Connection $connection_upgrade;
        }
#http接口的配置
        location /robotDpApi/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr; 
            proxy_set_header REMOTE-HOST $remote_addr; 
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.110.10:8080/;
            
        }

5、最后在浏览器上输入http://192.168.110.10:5000就可以访问到页面。这个5000端口是docker-compose配置文件里面映射出来的访问端口。
6、如果想通过域名和去掉端口访问。那就在nginx的server模块里面server_name 配置访问的域名，然后加上

		location / {
			proxy_pass http://192.168.110.10:5000;#代理地址
	  		add_header 'Access-Control-Allow-Origin' *;  
	    		add_header 'Access-Control-Allow-Credentials' 'true';  
	    		add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT';  
	    		add_header 'Access-Control-Allow-Headers' *;  
	    		add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';  
	    		if ($request_method = 'OPTIONS') {  
	    			return 204;  
	         }
		}

就可以通过域名访问nginx，nginx再转发的前端容器。