我的需求:已经通过docker配置好了vue和springboot项目,通过http://101.201.210.12:7777 和http://101.201.210.12:9999 分别已经可以访问,现在我希望通过直接访问http://101.201.210.12/qianduan 进入vue项目,http://101.201.210.12/houduan 进入后端项目
思路:通过Nginx的反向代理(自定义服务器后面的/qianduan 或/houduan),配置默认的80端口(这样可以不用输入ip的端口)
1.docker拉取一下nginx:
docker pull nginx
2.进入/root/nginx
cd /root/nginx
3.在该文件夹下面创建一个nginx.conf文件,内容输入:标红的改为自己的项目url地址
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
include /etc/nginx/conf.d/*.conf;
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name 101.201.210.12;
location /houduan/ { #这个是代理到后端的接口
proxy_pass http://101.201.210.12:9999/;
}
location /qianduan/ { #这个是前端的接口
proxy_pass http://101.201.210.12:7777/;
}
location /assets/ { #这个就是解决找不到静态文件
proxy_pass http://101.201.210.12:7777/assets/;
}
error_page 404 /404.html;
location = /40x.html {}
error_page 500 502 503 504 /50x.html;
location = /50x.html {}
}
}
4.创建容器:b690f5f0a2d5是镜像id,端口一定是80:80,不要改
docker run --name nginx -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf -p 80:80 -d b690f5f0a2d5
5.运行
http://101.201.210.12/qianduan
注意:当vue项目配置完毕后页面什么都没有,一片空白,控制台也没有报错,就将代码中的router中的createWebHistory改为createWebHashHistory