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。并删除掉 /api2306
        
         location ~ ^/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。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值