nginx支持一个端口访问多个前端项目(http以及https)

简介: 最近做项目结构优化,前端项目都是部署在nginx上,想实现同一个端口可以访问多个前端项目.

前言


   最近做项目结构优化,前端项目都是部署在nginx上,想实现同一个端口可以访问多个前端项目.这样可以提高服务器的端口复用率,降低项目部署以及维护成本.根据平常的需求,用两台nginx服务器分别支持http、https同一端口访问不同项目。下面将配置方式以及相关注意事项做简单梳理,希望对有相同需求的同学有所帮助,尽量提升效率,专注业务开发!


http方式同一端口访问不同项目


   nginx安装步骤这里不在介绍,有安装需求的同学可以参考:

超详细的linux部署nginx实战记录,直接介绍如何如何配置:

22服务器的8099设置为访问多个项目,关键配置文件如下:

server {
        listen       8099;
        server_name  100.100.100.22;
        # 修改root默认目录
        root         /data/www;
        include /etc/nginx/default.d/*.conf;
  # 项目A
   location /A{
    alias /staticresource/kawa_two_activity/A;
    index index.html;
        }
  # 项目B
  location /B {
  alias /staticresource/kawa_two_activity/B;
  index index.html;
        }
        error_page 404 /404.html;
            location = /40x.html {
        }
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }


项目部署位置:

/staticresource/kawa_two_activity/A;
/staticresource/kawa_two_activity/B;


项目访问方式:

100.100.100.22:8099/A
100.100.100.22:8099/B


https方式同一端口访问不同项目


   平常的项目中有些三方平台考虑到安全性,会要求服务端提供的链接为https,所以需要支持https访问.nginx默认是不支持https访问的,开启的方式可以参考:nginx中如何开启https访问功能,这里不在讲述,直接看配置文件.实际上同http的部署方式.250服务器80端口部署多个项目.


server {
        listen       80;
        server_name  wx.kwxy.com;
  #将请求转成https
  rewrite ^(.*)$ https://$host$1 permanent;
    }
  server {
    #监听443端口
  listen 443;
  #域名
  server_name wx.kwxy.com; 
  ssl on;
  #ssl证书的pem文件路径
  ssl_certificate  /usr/local/nginx/ssl_cert/kwxy.com.pem;
  #ssl证书的key文件路径
  ssl_certificate_key /usr/local/nginx/ssl_cert/kwxy.com.key;
  # 项目A
  location /A{
    alias        /staticresource/activity/A;
    index       index.html;
  }
  # 项目B
  location /B{
    alias        /staticresource/activity/B;
    index       index.html;
  }
    }


项目部署位置:

/staticresource/activity/A;
/staticresource/activity/B;


项目访问方式:

wx.kwxy.com/A
wx.kwxy.com/B


   实际生产中用两台nginx服务器分别支持http、https基本上能满足大部分需求,后期有时间会看一下如何在一个nginx上同时支持https和http。如果对你有所帮助,欢迎评论区留言点赞!


相关文章
|
2月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
84 1
|
24天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
100 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
13天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
28 2
|
24天前
|
缓存 负载均衡 应用服务中间件
Nginx 实现一个端口代理多个前后端服务
【10月更文挑战第19天】Nginx 的强大功能不仅限于此,它还可以与其他技术和工具相结合,为我们的应用提供更强大的支持和保障。在不断发展的互联网时代,掌握 Nginx 的使用技巧将为我们的工作和生活带来更多的便利和效益。
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
283 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
25天前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
1月前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
34 0
|
1月前
|
Web App开发 前端开发 JavaScript
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
48 0
|
1月前
|
Web App开发 移动开发 前端开发
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
45 0
|
1月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
138 0