Nginx部署前段VUE---docker-compose编排方式

Nginx部署前端VUE—docker-compose编排方式

前段时间和甲方申请的机器到位了，目前有一台16核64g机器用于测试环境部署博客城市的微服务项目。全部使用docker-compose编排。后端就像之前的写的博客那样进行编排，前段用nginx进行部署。因为vue跨越问题，使用nginx转发的时候也遇到一些坑，再次记录一下。

往期文章：

1. Dokcer简介与安装以及Springcloud部署
2. Docker Compose编排部署微服务项目

1. 后端微服务部署

大体和Dokcer简介与安装以及Springcloud部署 介绍的一样。
只不过有两个docker-compose的yml文件，docker-compose-env.yml 和 docker-compose-pook.yml

1. docker-compose-pook.yml ------>编排后端微服务项目

version: '3'
services:
  boke-packageserver:
    image: boke/boke-packageserver
    build: ./boke-packageserver
    container_name: boke-packageserver
    ports:
      - 13330:13330
    volumes:
      - /etc/localtime:/etc/localtime:ro 
      - /pook/PackageWebClient/client/android:/pook/PackageWebClient/client/android # 打包路径映射(读取宿主机文件)
      - /pook/PackageWebClient/data:/pook/PackageWebClient/data #  文件路径映射(读取宿主机文件)
    external_links:  
      - nacos:nacos  
    restart: always
  boke-official:
    image: boke/boke-official
    build: ./boke-official
    container_name: boke-official
    ports:
      - 9000:9000
    volumes:
      - /etc/localtime:/etc/localtime:ro
    external_links:  
      - nacos:nacos        
    restart: always
  boke-authcenter:
    image: boke/boke-authcenter  
    build: ./boke-authcenter  
    container_name: boke-authcenter  
    ports:
      - 8899:8899
    volumes:
      - /etc/localtime:/etc/localtime:ro
    external_links:  
      - nacos:nacos      
    depends_on:
      - boke-official
    restart: always
  boke-gateway:
    image: boke/boke-gateway
    build: ./boke-gateway
    container_name: boke-gateway
    ports:
      - 8888:8888
    volumes:
      - /etc/localtime:/etc/localtime:ro
    external_links:  
      - nacos:nacos        
    depends_on:
      - boke-authcenter 

docker-compose-env.yml------>微服务需要的中间件等
mysql和redis用的是阿里云的，这里用到nacos和nginx

version: '3'
services:
  nginx:
    image: docker.io/nginx
    container_name: nginx 
    restart: always
    volumes:
      - /pook/nginx/html:/usr/share/nginx/html            # html 文件挂载（前面是服务器目录，后面是docker容器目录）
      - /pook/nginx/nginx.conf:/etc/nginx/nginx.conf    # conf  文件挂载
      - /pook/nginx/log:/var/log/nginx                        # 日志  文件挂载
    ports:
      - "80:80"
  nacos:
    image: nacos/nacos-server
    container_name: nacos
    environment:
      - MODE=standalone
    volumes:
      - /mydata/nacos/logs/:/home/nacos/logs
    ports:
      - "8848:8848"

docker-compose -f docker-compose-pook.yml up -d 微服务编排
docker-compose -f docker-compose-ebv.yml up -d 环境中间件编排

2. 前端VUE部署

1. 将前端打好包的vue文件丢到docker映射的服务器目录下
   即 /pook/nginx/html
2. 修改 nginx.conf 文件
   这里有个坑，博主微服务项目网管原本是 8888 端口，前端调用我们后台接口 就是 ip:8888,但是这样网页虽然能访问，但是接口会报 跨域问题，出现如：Access-Control-Allow-Origin，大概如下图
   
   所以，这样就不能让前段访问 8888 端口，而是也访问ng的80端口，前端接口加上一个统一前缀，用 nginx 进行转发。
   比如，原本 前段直接访问 8888 网关，由网关再转发到各个微服务。现在，让前段访问nginx的80端口，写两个 location ：
   第一个location / ，映射 到 vue的目录。
   第二个location /pook/ , 凡是请求带 /pook 的 ，全部转发到 8888 的网关服务上去。
   这里， proxy_pass http://ip(写自己的):8888/ / 不要忘记 。
   在nginx中配置proxy_pass代理转发时，如果在proxy_pass后面的url加/，表示绝对根路径；如果没有/，表示相对路径，把匹配的路径部分也给代理走。
   即： 希望的 是 前端访问 ip:80/pook/xx 转发到 ip:8888/xx 上去，所以用的绝对路径。如果不加 / ,就会变成 ip:8888/pook/xx ，多了个 pook 。
   这里转载一篇关于nginx 的 proxy_pass 博客 nginx 之 proxy_pass详解，写的十分详细。

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
	add_header Access-Control-Allow-Headers X-Requested-With;

    server {
        listen       80;
        server_name  vue;
         
		 # 用于 vue 页面 
        location / {
            autoindex on;
            root    /usr/share/nginx/html;    # /usr/share/nginx/html docker容器里面的目录
            try_files $uri $uri/ /index.html;  #history 模式
            index  index.html index.htm;
        }
	    # 用于 接口 访问
        location /pook/ {
			proxy_pass http://ip(写自己的):8888/;  # 绝对路径，将 ip:80/pook/xx 转发到 ip:8888/xx 上去
			proxy_redirect default;
        }
    }
}

3.结语

世上无难事，只怕有心人，每天积累一点点，fighting！！！
之前对nginx理解不深，经过这次，以后不管前端后端都可以快速部署了~