nginx + 一个端口部署多个单页应用（history模式）

stefan 发布于2019-08-26 13:22 / 3338人阅读

摘要：介绍种相同端口部署多个单页应用前端路由的方法。使用子域名区分，此种方法最是简单。子域名访问时路径，盘下面文件为的服务器目录。采用与作为区分，分别表示不同的项目。

目前web开发使用一般前后端分离技术，并且前端负责路由。为了美观，会采用前端会采用h5 history 模式的路由。但刷新页面时，前端真的会按照假路由去后端寻找文件。此时，后端必须返回index（index.html）文件才不至于返回404。

nginx 部署一个单页应用很简单：

   location / {
      root   html;
      try_files $uri /index.html index.html;
   }

root是web服务器目录，try_files 为文件匹配，先找真实的地址($uri)，如果找不到，再找index.html文件。
#此处注意，history模式不可以使用相对位置引入方式（./）

但如果几个单页应用同时需要部署在同一台电脑上，并且都需要占用80或者443端口，就不太容易了。

介绍2种相同ip端口部署多个单页应用（前端路由）的方法。

使用子域名区分，此种方法最是简单。但是限制也大，必须要买域名，或者修改访问者电脑的hosts文件。

server {
    listen       80;
    server_name  aa.gs.com;  #子域名aa访问时
    localtion / {
       root E:/ee; #windows 路径，E盘下面ee文件为aa.gs.com的服务器目录。
       try_files $uri /index.html index.html;
    }
}
server {
   listen       80;
   server_name bb.gs.com; #访问子域名bb时。
   location / {
       root   /root/bb; # linux /root/bb文件夹作为服务器目录。
       try_files $uri /index.html index.html;
   }

}

采用路径的第一个文件夹名字作为区分。例如：https://aa.com/a/xx 与 https://aa.com/b/xx。采用a与b作为区分，分别表示不同的项目。
需要设置点：

前端打包后的文件引用地址，需要加上"/a/" "/b/"为前缀。比如 (webpack 为设置publicPath: "/a")

前端的路由路径必须加上/a/前缀：比如真正地址test.com/ss,需改成test.com/a/ss

   server {
       listen       80;
       root /root/test; #web服务器目录；
       location ^~ /a/{
         try_files $uri /a/index.html;  #如果找不到文件，就返回 /root/test/a/index.html
       }
       location ^~ /b/{
        try_files $uri /b/index.html; #如果找不到文件，就返回 /root/test/b/index.html
       }
      
  }

私有云服务器托管一个服务器多个端口一个端口多个服务器吗一个应用多个负载均衡一个云服务器怎么加多个应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108676.html

nginx + 一个端口部署多个单页应用（history模式）

摘要：介绍种相同端口部署多个单页应用前端路由的方法。使用子域名区分，此种方法最是简单。子域名访问时路径，盘下面文件为的服务器目录。采用与作为区分，分别表示不同的项目。目前web开发使用一般前后端分离技术，并且前端负责路由。为了美观，会采用前端会采用h5 history 模式的路由。但刷新页面时，前端真的会按照假路由去后端寻找文件。此时，后端必须返回index（index.html）文件才...

wemall 2019-08-02 12:01 评论0 收藏0
nginx + 一个端口部署多个单页应用（history模式）

摘要：介绍种相同端口部署多个单页应用前端路由的方法。使用子域名区分，此种方法最是简单。子域名访问时路径，盘下面文件为的服务器目录。采用与作为区分，分别表示不同的项目。目前web开发使用一般前后端分离技术，并且前端负责路由。为了美观，会采用前端会采用h5 history 模式的路由。但刷新页面时，前端真的会按照假路由去后端寻找文件。此时，后端必须返回index（index.html）文件才...

luoyibu 2019-08-29 17:19 评论0 收藏0
nginx + 一个端口部署多个单页应用（history模式）

摘要：介绍种相同端口部署多个单页应用前端路由的方法。使用子域名区分，此种方法最是简单。子域名访问时路径，盘下面文件为的服务器目录。采用与作为区分，分别表示不同的项目。目前web开发使用一般前后端分离技术，并且前端负责路由。为了美观，会采用前端会采用h5 history 模式的路由。但刷新页面时，前端真的会按照假路由去后端寻找文件。此时，后端必须返回index（index.html）文件才...

legendaryedu 2019-08-05 18:08 评论0 收藏0
nginx + 一个端口部署多个单页应用（history模式）

摘要：介绍种相同端口部署多个单页应用前端路由的方法。使用子域名区分，此种方法最是简单。子域名访问时路径，盘下面文件为的服务器目录。采用与作为区分，分别表示不同的项目。目前web开发使用一般前后端分离技术，并且前端负责路由。为了美观，会采用前端会采用h5 history 模式的路由。但刷新页面时，前端真的会按照假路由去后端寻找文件。此时，后端必须返回index（index.html）文件才...

Ilikewhite 2019-07-25 14:31 评论0 收藏0
前后端分离的一点实践

摘要：怎么做前后端的分离我目前的做法是将作为一种服务存在，仅需要提供接口即可，前端目前采用，调用后端，解析数据，静态页面。采用，充当层，前后端实现了真正的分离，但还是有点问题的。什么是前后端分离对于这个问题，其实可以看看我的学习历程，我觉得很好的体现了Web开发模式的演化。石器时代：那正是本人刚学JSP的时候，写了一个简单的商城DEMO，所有的业务逻辑，数据库的交互以及Javascri...

enda 2019-08-14 12:53 评论0 收藏0