目前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端口部署多个单页应用(前端路由)的方法。

  1. 使用子域名区分,此种方法最是简单。但是限制也大,必须要买域名,或者修改访问者电脑的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;
} }
  1. 采用路径的第一个文件夹名字作为区分。例如:https://aa.com/a/xxhttps://aa.com/b/xx。采用ab作为区分,分别表示不同的项目。
    需要设置点:

    1. 前端打包后的文件引用地址,需要加上'/a/' '/b/'为前缀 。比如 <script scr="/a/test.js"></script>(webpack 为设置publicPath: '/a')
    2. 前端的路由路径必须加上/a/前缀:比如真正地址test.com/ss,需改成test.com/a/ss

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

原文地址:https://segmentfault.com/a/1190000017055132

nginx + 一个端口 部署多个单页应用(history模式)的更多相关文章

  1. nginx 一个端口布署多个单页应用(history路由模式)。

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

  2. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  3. nginx 80 端口 部署多个Web

    1.修改默认nginx.conf 文件 加入 include /usr/www/ngconfs/*.conf; 读取ngconfs文件下所有 *.conf文件 2.ngconfs 下多个文件创建 第二 ...

  4. vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案

    项目背景 vue-cli生成的单页面项目,router使用history模式.产品会在公众号内使用,需要添加微信JSSDK,做分享相关配置. 遇到的问题 相关配置与JS接口安全域名都已经ok,发布后, ...

  5. nginx一个端口配置多个不同服务映射

    upstream tomcat_server{ server 127.0.0.1:8087; server 192.168.149.117:8088; } server { listen 8088; ...

  6. layuiAdmin pro v1.x 【单页版】开发者文档

    layuiAdmin std v1.x [iframe版]开发者文档 题外 该文档适用于 layuiAdmin 专业版(单页面),阅读之前请务必确认是否与你使用的版本对应. 熟练掌握 layuiAdm ...

  7. Senna.js – 速度极快的单页应用程序引擎

    Senna.js 是一个速度超快的单页应用程序引擎,提供了几个低级别的 API,可以帮助你打造现代化的基于 Web 的应用程序.更重要的是,搜索引擎蜘蛛应该能够索引相同的内容. 通过使用 HTML5 ...

  8. 你应该知道的10个奇特的 HTML5 单页网站

    网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站. 下面是10个令人惊叹的单页 H​​ ...

  9. jquery单页网站导航插件One Page Nav

    这是一个轻量级的jQuery的单页网站导航插件.增加了单击后平滑滚动导航和当你浏览不同的部分时自动选择正确的导航项. changeHash: false, 改变当用户单击导航,就改变changeHas ...

随机推荐

  1. zookeeper master 选举

    原文地址: http://www.cnblogs.com/nevermorewang/p/5611807.html 选主原理介绍:zookeeper的节点有两种类型,持久节点跟临时节点.临时节点有个特 ...

  2. js模拟冒泡排序动态图(1轮)

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  3. C# 基础之密封类

    C#密封类 一.密封类 1. 密封类的定义 如果我们不希望自己编写的类被继承:如果有的类已经没有再被继承的必要,这时,我们可以使用sealed修饰符在类中进行声明,以达到该类不能派生其它类的目的,该类 ...

  4. layer窗口抖动

    详细学习网址 http://www.layui.com/doc/modules/layer.html#use ..................................... //使用方法 ...

  5. 使用高性能Pipelines构建.NET通讯程序

    .NET Standard支持一组新的API,System.Span, System.Memory,还有System.IO.Pipelines.这几个新的API极大了提升了.NET程序的效能,将来.N ...

  6. 接口测试03 - Python HTTP库requests

    概述: 整理一些requests的相关知识,及如何使用requests进行接口测试. requests号称:是唯一的一个非转基因的Python HTTP库,人类可以安全享用. 安装: 先看下怎么安装r ...

  7. 使用express+mongoDB搭建多人博客 学习(6)发表文章

    发表文章 1.在modules文件夹下新建post.js var mongodb=require("./db"); function Post(name,title,post){ ...

  8. SVM为什么需要核函数

    生存?还是毁灭?——哈姆雷特 可分?还是不可分?——支持向量机 之前一直在讨论的线性分类器,器如其名(汗,这是什么说法啊),只能对线性可分的样本做处理.如果提供的样本线性不可分,结果很简单,线性分类器 ...

  9. vue从入门到开发--2-基本结构

    1.App.vue 是根文件,所有的其他组件的执行均需要在此文件内导入并调用才能实现. import (导入其他组件) Test (其他组件的名字) from ‘./components/test’( ...

  10. NF!=1

    NF表示列数,不等于1表示列数不为1列