Nginx部署前端VUE—docker-compose编排方式
前段时间和甲方申请的机器到位了,目前有一台16核64g机器用于测试环境部署博客城市的微服务项目。全部使用docker-compose编排。后端就像之前的写的博客那样进行编排,前段用nginx进行部署。因为vue跨越问题,使用nginx转发的时候也遇到一些坑,再次记录一下。
文章目录
- 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.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理解不深,经过这次,以后不管前端后端都可以快速部署了~