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之类的直接取法。
这样部署基本就可以了。