nginx配置多个angular项目

场景:

同一个服务器,同一个ip下,需要部署多个angular项目

一、打包命令:

项目1(pc端项目):ng build --base-href /pc/view --aot --prod

项目2(移动端项目):ng build --base-href /moblie/view --aot --prod

二、服务器上文件:

windows:

项目1(pc端项目):D:\html\aaa\(aaa为文件名示例)

项目2(移动端项目):D:\html\bbb\(bbb为文件名示例)

linux:

项目1(pc端项目):\...\html\aaa\(aaa为文件名示例)

项目2(移动端项目):\...\html\bbb\(bbb为文件名示例)

三、nginx配置

windows:

location /pc/view {
    rewrite .* /index.html break;
    root D:/html/aaa;
}
location /pc {
    alias D:/html/aaa;
}
location /moblie/view {
    rewrite .* /index.html break;
    root D:/html/bbb;
}
location /moblie {
    alias D:/html/bbb;
}

linux:

location /pc/view/ {
    rewrite .* /index.html break;
    root /.../html/aaa/;
}
location /pc/ {
    alias /.../html/aaa/;
}
location /moblie/view/ {
    rewrite .* /index.html break;
    root /.../html/bbb/;
}
location /moblie/ {
    alias /.../html/bbb/;
}

四、总结

ng build --base-href /pc/view 时,会在html的<head>中 增加 <base href="/pc/view">

1、angular请求的路由,会自动在路由前增加--base-href /pc/view 中的 /pc/view 部分

http://www.****.com:***/pc/view/login

http://www.****.com:***/pc/view/home

http://www.****.com:***/pc/view/about

通过

location /pc/view/ {
    rewrite .* /index.html break;
    root D:/html/aaa/;
}

将请求代理到 D:/html/aaa/index.html

2、资源文件请求时,会自动在资源文件前增加--base-href /pc/view 中的 /pc 部分,如下图

通过

location /pc/ {
    alias D:/html/aaa/;
}

将静态资源的映射到 D:/html/aaa/ 目录下。

注:

1、nginx中alias与root的区别与用法,这里不做深入,感兴趣的同学可以自己去了解

2、这里的angular路由是通过 rewrite 配置的,也可以使用 try_files 配置,感兴趣的同学可以自己去研究下,附上相关博文 https://www.cnblogs.com/defaultlee/p/7677034.html

原文地址:https://www.cnblogs.com/defaultlee/p/9223564.html

时间: 2024-10-02 09:54:31

nginx配置多个angular项目的相关文章

使用nginx反向代理,一个80端口下,配置多个微信项目

我们要接入微信公众号平台开发,需要填写服务器配置,然后依据接口文档才能实现业务逻辑.但是微信公众号接口只支持80接口(80端口).我们因业务需求需要在一个公众号域名下面,发布两个需要微信授权的项目,怎么办? 我们可以用nginx服务器做反向代理来解决这个问题.nginx服务器对外80端口,然后根据URL参数不同,对内访问不同的项目. nginx配置如下: 打开/usr/local/nginx/conf/nginx.conf 1 worker_processes 4; 2 error_log lo

CentOS7中配置基于Nginx+Supervisor+Gunicorn的Flask项目

配置Nginx 1.安装nginx yum install nginx 2.安装好后在/etc/nginx/default.d中添加location的配置,并指向8001端口,以后Gunicorn会监听8001端口 location / { proxy_pass http://127.0.0.1:8001 } 3.配置好后重新载入nginx配置 systemctl reload nginx.service 安装Python CentOS自带Python2.7,如果使用Python3,需要单独安装

零开始构建Angular项目----之路由配置 和 nav导航条

效果 接着上次 零开始构建Angular项目继续扯路由配置 和 nav导航条 1.增加about页面 about.component.html <!-- Docs nav ================================================== --> <div class="row"> <!-- <div class="col-md-3 "> <div class="bc-sid

nginx配置同一域名下,共存2个nodejs项目

项目背景: 1.官网需要改版,使用nodejs nuxt框架进行重构 2.官网改版没有全部完成.但需要上线首页 项目需求: 1.让首页内容显示为新项目 2.让老官网的内容可以被访问到(比如www.n.com/cart,但新项目没有cart接口) 3.首页域名必须是www.n.com 这样的话就会引出一些问题,比如我nginx配置的后端,目前是7100端口,但是新项目端口为3000,如果我直接替换location / port:3000,这样替换势必会使旧官网项目404 旧官网nginx配置如下:

如何在windows下使用Nginx配置前端项目

最近要接手一个新的项目,拿到文件后打开项目的一瞬间,我的脑壳是晕的,那个目录结构...嗯,跟我写过的和见过的太不一样了,文件名都是拼音首字母缩写,反正我是猜不出来... 而且项目还需要用nginx启动,我都没用过这个东西... 太难了,我真是太难了 后来在上一个负责人的远程指导+自己上网找方法+自己领悟+...反正各方面的作用下,终于给打开了 第一次使用nginx打开前端项目,比较鸡冻,写篇文章纪念下,哦...是记录下 1.下载nginx安装包 打开官网 http://nginx.org/ 点击

nginx 配置详解

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入口网站及搜索引擎Rambler(俄文:Рамблер)使用.其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:京东.新浪.网易.腾讯.淘宝等. 一.event模型 传统的基于进程和线程的模型在处理并发连接的时候针对每个连接

nginx 配置优化的几个参数

nginx 配置优化的几个参数 2011-04-22 本文地址: http://blog.phpbean.com/a.cn/7/ --水平有限欢迎指正-- -- 最近在服务器上搞了一些nginx 研究了一下 总结总结Sleep nginx配置文件里面需要注意的一些参数 worker_processes 8 nginx要开启的进程数 一般等于cpu的总核数 其实一般情况下开4个或8个就可 我开2个 以了 多了没有太多用 每个nginx进程消耗的内存10兆的模样 worker_cpu_affinit

Gixy Nginx 配置分析工具

项目简介 Gixy 是一款用来分析 Nginx 配置的工具. Gixy 的主要目标是防止安全配置错误,并自动进行缺陷检测. 目前支持的 Python 版本是 2.7 和 3.5+ . 免责声明:Gixy 仅在 GNU / Linux 上进行了很好的测试,其他操作系统可能会存在一些问题. 它能做什么 现在 Gixy 可以找出: [ssrf]服务器端请求伪造 [http_splitting]HTTP 拆分 [origins]referrer/origin 验证问题 [add_header_redef

使用etcd+confd管理nginx配置

1.前言 最近在项目中用nginx做反向代理,需要动态生成nginx的配置.大概流程是用户在页面上新增域名.http或https协议以及端口信息,后台会根据域名自动生成一个nginx的server配置,在nginx.conf配置文件中使用include将所有的server配置加载进来.遇到一个问题就是如何动态生成nginx的配置,以及配置更新.在此之前也接触过配置生成及更新,当时配置的格式都是基于xml的,使用protobuf与xml结合,先采用protobuf定义好配置的数据结构,然后将pro