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

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

往期文章：

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

文章目录

Nginx部署前端VUE---docker-compose编排方式1. 后端微服务部署2. 前端VUE部署3.结语

1. 后端微服务部署

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

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部署

将前端打好包的vue文件丢到docker映射的服务器目录下 即 /pook/nginx/html修改 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理解不深，经过这次，以后不管前端后端都可以快速部署了~