vue前端项目部署的一点小tip

一个典型的前后端分离项目,前端分用户入口和管理员入口,一般希望这样部署:

https://mydomain.com/    普通用户入口

https://mydomain.com/admin/  管理员入口

关键就是在vite.config.ts里要这么指定base:

base: './'

这样build出来的文件,不管放在哪个项目下面都可以正常运行,因为它使用的是相对路径。

相应的,在nginx里面需要这样配置:

server {
        listen       8888;
        server_name  mydomain.com;

        location / {
            root   F:/Projects/front-user/dist;
            index  index.html index.htm;
        }
		
		location /admin/ {
            alias   F:/Projects/front-admin/dist/;
            index  index.html index.htm;
        }
        
        location /proapi {
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;	 
            proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header User-Agent $http_user_agent;
            proxy_redirect off;
            proxy_pass http://127.0.0.1:8100;
        }
    }

 后端程序取客户端IP地址的时候,首先从Header里面取X-Real-IP,取不到再考虑request.remode_addr之类的直接取法。
这样部署基本就可以了。

posted @ 2024-11-05 13:59  黑月教主  阅读(3)  评论(0编辑  收藏  举报