nginx代理实现静态资源访问的示例代码


Posted in Servers onJuly 07, 2022

一. 目标:

为了通过nginx请求静态资源(css、图片等),通过nginx代理进行页面预览。

二. 实现效果:

通过浏览器输入nginx代理地址以打开页面方式访问本地html文件,也可以通过访问代理路由访问接口实现页面预览功能.
注:我演示的是在本地windows开发环境下的配置

三. 具体配置

1. nginx配置本地静态工程代理

找到nginx配置文件nginx.conf,配置nginx代理

server{
listen       80;

#前端门户工程
location / {
    alias   D:/workspace/sc-multipl-static-web-project/;
    index  index.html;
}

说明:
D:/workspace/sc-multipl-static-web-project/ 是你的前端工程文件路径

保存配置文件并重启nginx,浏览器输入 localhost:80 验证

2. win10配置本地域名实现域名访问

域名访问实际上是通过对应ip地址,再通过ip访问服务的,如果我们没有开通互联网域名,可以通过配置本地域名映射模拟域名访问的(只在本机有效)
打开C:\Windows\System32\drivers\etc,找到hosts文件,如果没有则自己新增一个,以管理员身份打开编辑,输入

127.0.0.1 www.chen123.com

再打开nginx配置文件

server{
    listen       80;
    server_name  www.chen123.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    
   }

保存配置文件并重启nginx,浏览器输入 localhost:chen123 验证

3.nginx配置页面预览路由

首先,你要先实现一个页面预览接口,返回格式为String类型,内容其实就是html的文本内容
再打开nginx配置文件

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    #cms页面预览路由
    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
    }

    server{
    listen       80;
    server_name  www.xuecheng.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    #页面预览
    location /cms/preview/ {
        proxy_pass http://cms_server_pool/cms/preview/;
    }
    
   }
}

http://cms_server_pool/cms/preview/ 就是你要实现的页面预览接口,通过配置路由实现跳转到真实地址,

upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
        #如果有多个服务器,可以写在下面,例如
        #server 127.0.0.1:31002 weight=10;
    }

保存配置文件并重启nginx,浏览器输入 http://cms_server_pool/cms/preview 验证

我本地的nginx配置如下

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;
    #cms页面预览路由
    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
    }

    server{
    listen       80;
    server_name  www.xuecheng.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    #页面预览
    location /cms/preview/ {
        proxy_pass http://cms_server_pool/cms/preview/;
    }
   }
}

到此这篇关于nginx代理实现静态资源访问的示例代码的文章就介绍到这了,更多相关nginx 静态资源访问内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Servers 相关文章推荐
Nginx反向代理及负载均衡如何实现(基于linux)
Mar 31 Servers
Nginx下配置Https证书详细过程
Apr 01 Servers
nginx反向代理配置去除前缀案例教程
Jul 26 Servers
Nginx内网单机反向代理的实现
Nov 07 Servers
教你使用Jenkins集成Harbor自动发布镜像
Apr 03 Servers
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
Apr 07 Servers
Nginx动静分离配置实现与说明
Apr 07 Servers
如何通过cmd 连接阿里云服务器
Apr 18 Servers
Tomcat项目启动失败的原因和解决办法
Apr 20 Servers
CentOS7安装MySQL8的超级详细教程(无坑!)
Jun 10 Servers
centos环境下nginx高可用集群的搭建指南
Jul 23 Servers
Flink 侧流输出源码示例解析
Sep 23 Servers
使用 DataAnt 监控 Apache APISIX的原理解析
设置IIS Express并发数
Linux中sftp常用命令整理
Jun 28 #Servers
TaiShan 200服务器安装Ubuntu 18.04的图文教程
Jun 28 #Servers
Linux中各个目录的作用与内容
Windows Server 2008配置防火墙策略详解
nginx之queue的具体使用
You might like
php redis实现对200w用户的即时推送
2017/03/04 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
2013/09/16 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
九年级化学教学反思
2016/02/22 职场文书
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技
python语言中pandas字符串分割str.split()函数
2022/08/05 Python