nginx反向代理解决打前端项目打包环境下https与http混用的问题

前言:最近在处理http和https前端混用的时候需要用到反向代理,在nginx中设置反向代理需要编辑nginx的配置文件(一般是nginx.conf或者sites-available目录下的配置文件)。具体步骤如下:

  1. 打开nginx的配置文件,不同的安装方式可能位置有差异。

    复制代码
    vim /etc/nginx/nginx.conf
  2. http块中添加一个server块来定义反向代理服务器。

    复制代码
    server {
         listen       8081 ssl http2;
         listen       [::]:8081 ssl http2;
         server_name  _;  #这里可以替换成服务器域名your-domain.com
         
         ... #其他设置
         
         #>>>设置代理
         location ^~/api/ {
             proxy_pass  http://192.168.10.1:8088/;  #backend-server
         }
         #<<<设置代理
         
         #>>>https设置
         ssl_certificate "/etc/pki/nginx/ssl.crt";
         ssl_certificate_key "/etc/pki/nginx/private/ssl.key";
         client_max_body_size 10m;
         ssl_session_cache shared:SSL:1m;
         ssl_session_timeout  10m;
         ssl_ciphers HIGH:!aNULL:!MD5;
         ssl_prefer_server_ciphers on;
         #<<<https设置
         
         ...#其他设置
    }
  3. 保存并退出文件。

  4. 在我的测试环境centOS7.9中需要重新加载nginx配置文件以生效。在windows环境下注意结束掉所有的nginx进程然后重启nginx.exe以生效。

    复制代码
    #centOS7.9
    nginx -s reload
    
    #windows
    可以使用任务管理器关闭
  5. 现在,当你访问your-domain.com时,nginx会将请求转发到backend-server上,如:当前端请求为"https://192.168.9.99:8081/api/test"的接口时,请求将被转发到"http://192.168.10.1:8088/test"。并将响应返回给客户端。

请注意,上述示例中的配置是基本的反向代理配置。根据你的需求,你可能还需要进行其他配置,例如添加SSL证书、缓存、限速等。具体的配置取决于你的应用程序和服务器环境。

相关推荐
梵得儿SHI9 分钟前
Vue 项目实战与性能优化全攻略:从代码、渲染到首屏,一站式解决卡顿慢加载
前端·vue.js·性能优化·vite·前端面试·前端优化·首屏优化
专注搞钱10 分钟前
FAB设备OEE自动化分析工具:月度报表从2天缩短到30秒
运维·自动化
ShyanZh11 分钟前
【skill】HTML PPT Skill:用 Claude Code 一句话生成专业演示文稿
前端·ai·html·powerpoint·skill
加加and减减16 分钟前
Docker真实安装mysql8教程并优化配置
运维·mysql·docker·容器
AI视觉网奇17 分钟前
three教学 3d资产拼接源代码
前端·css·css3
程序猿阿伟1 小时前
《Chrome标签组搭建多任务高效浏览指南》
前端·chrome
2601_958352901 小时前
双麦 DSP 音频模块实战:一文梳理 A-68 在全行业场景的声学解决方案与落地要点
前端·嵌入式硬件·音视频·语音识别·降噪消回音·音频处理模块
十六年开源服务商1 小时前
2026社交媒体营销×WordPress运维:实战避坑指南
运维·媒体
半夜燃烧的香烟1 小时前
docker 安装minio nginx,配置nginx根据文根路由minio展示图片
java·nginx·docker
江南风月1 小时前
Hermes Agent 接入WGCLOUD实战:打造团队 AI 智能运维解决方案
运维·zabbix·运维开发·prometheus