资讯专栏INFORMATION COLUMN

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

luoyibu / 2075人阅读

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

目前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/xxhttps://aa.com/b/xx。采用ab作为区分,分别表示不同的项目。
需要设置点:

前端打包后的文件引用地址,需要加上"/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/114245.html

相关文章

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

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

    wemall 评论0 收藏0
  • nginx + 一个端口 部署多个单页应用history模式

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

    stefan 评论0 收藏0
  • nginx + 一个端口 部署多个单页应用history模式

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

    Ilikewhite 评论0 收藏0
  • 前后端分离的一点实践

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

    enda 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<