脚手架打包并部署到服务器,nginx配置入门"/>
vite脚手架打包并部署到服务器,nginx配置入门
一、申请服务器:
腾讯云服务器购买和部署
Windows Server 购买部署步骤详解
二、打包
npm run build
默认打包结果在项目目录下的dist目录下
三、部署到nginx:
1、在你的申请服务器上安装nginx。
2、把dist目录下的文件,放在nginx下的html文件夹下。
如何放:不同的服务器(如:腾讯云,阿里云)做法不同,具体可以看腾讯云官网(或者百度);
四、nginx配置:(conf/nginx.conf文件)
1、服务器ip地址(域名)和端口号
http {………………………… server {listen 8081; 端口号server_name 10.36.188.104; ip地址或者域名 …………………………} }
2、指定(网站)的路径
http {………………………… server {………………………………以下表示:当你访问根路径时,会去html文件夹查找文件,默认打开的页面名字依次为 index.html index.htm default.html。location / {root html;index index.html index.htm default.html;} ……………………………… } }
3、反向代理:
http {………………………… server {以下表示:凡是以 /api2306 开头的请求,都转到http://121.89.205.189:3000。并删除掉 /api2306location ~ ^/api2306/ {proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header REMOTE-HOST $remote_addr;rewrite ^/api2306/(.*)$ /$1 break;proxy_pass http://121.89.205.189:3000;} } }
4、404页面和其它响应状态码对应的页面配置。
http {………………………… server {……………………以下表示:如果找不到对应的文件(404),那么就去访问 /index.html 。并指定了 /index.html在html文件夹下【此处为什么这样配置,请回忆:history模式和hash的区别(跟后端相关的区别)】error_page 404 /index.html;location = /index.html {root html;} 以下表示:http响应状态码为500 502 503 504 时,都去找 /50x.html。并指定了 /50x.html 在html文件夹下。error_page 500 502 503 504 /50x.html;location = /50x.html {root html;} } }
补充:
在路由模式区别,有跟后端(服务器端)有关的配置,也就是nginx的配置,就是上面的404页面的配置。此处特指部署后前后端依然是分离的情况:
路由模式分为两种:hash和history:
区别(面试题):
1)、外观上
hash模式时,路径上有#。
history模式时,路径上没有#。
2)、原理上
hash:location.href结合 window.onhashchange事件。
history:history.pushState()
3)、跟后端有关的区别
hash模式:跟后端没有关系。解释:不会给后端发请求。因为hash就是锚点连接(页内连接)
history模式:需要服务器端(nginx)配合,服务器端会做好。解释:
前后端分离场景:请求页面时,会找前端服务器(一般是nginx),如果在nginx(的html文件夹)里没有提供路径对应的文件,那就会报404。此时,需要给nginx里配置404页面为index.html。
前后端不分离的场景:当你给后端发送请求时, 要在服务端(不一定是nginx服务器,后端服务器如:tomcat)增加一个覆盖所有情况的候选资源(需要给服务器里配置404页面为index.html)。否则,就会返回404。如果后端有同名的url,那么就会找后端的url。
更多推荐
vite脚手架打包并部署到服务器,nginx配置入门
发布评论