资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/nginx + 一个端口 部署多个单页应用（history模式）

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

stefan / 3550人阅读

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

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

nginx 部署一个单页应用很简单： 
</>复制代码 
  1.    location / {
  2.       root   html;
  3.       try_files $uri /index.html index.html;
  4.    }

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

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

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

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

</>复制代码 
  1. server {
  2.     listen       80;
  3.     server_name  aa.gs.com;  #子域名aa访问时
  4.     localtion / {
  5.        root E:/ee; #windows 路径，E盘下面ee文件为aa.gs.com的服务器目录。
  6.        try_files $uri /index.html index.html;
  7.     }
  8. }
  9. server {
  10.    listen       80;
  11.    server_name bb.gs.com; #访问子域名bb时。
  12.    location / {
  13.        root   /root/bb; # linux /root/bb文件夹作为服务器目录。
  14.        try_files $uri /index.html index.html;
  15.    }
  16. }

采用路径的第一个文件夹名字作为区分。例如：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 

</>复制代码 
  1.    server {
  2.        listen       80;
  3.        root /root/test; #web服务器目录；
  4.        location ^~ /a/{
  5.          try_files $uri /a/index.html;  #如果找不到文件，就返回 /root/test/a/index.html
  6.        }
  7.        location ^~ /b/{
  8.         try_files $uri /b/index.html; #如果找不到文件，就返回 /root/test/b/index.html
  9.        }
  10.       
  11.   }

GPU云服务器 云服务器 一个服务器多个端口 一个端口多个服务器吗 一个应用多个负载均衡 一个云服务器怎么加多个应用

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

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

相关文章

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

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

    wemall 评论0 收藏0

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

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

    luoyibu 评论0 收藏0

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

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

    Ilikewhite 评论0 收藏0

  • 前后端分离的一点实践

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

    enda 评论0 收藏0

发表评论

登陆后可评论

0条评论

stefan

男|高级讲师
我要私信

TA的文章

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