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 tp3.2.3 404问题解决方案
Mar 31 Servers
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
May 27 Servers
Nginx进程调度问题详解
Sep 25 Servers
Nginx实现负载均衡的项目实践
Mar 18 Servers
Nginx动静分离配置实现与说明
Apr 07 Servers
阿里云 Windows server 2019 配置FTP
Apr 28 Servers
docker 制作mysql镜像并自动安装
May 20 Servers
openEuler 搭建java开发环境的详细过程
Jun 10 Servers
windows server2008 开启端口的实现方法
Jun 25 Servers
vscode内网访问服务器的方法
Jun 28 Servers
搭建zabbix监控以及邮件报警的超级详细教学
Jul 15 Servers
解决ubuntu安装软件时,status-code=409报错的问题
Dec 24 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
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
Python中异常重试的解决方案详解
2017/05/05 Python
python散点图实例之随机漫步
2018/08/27 Python
Python数据集切分实例
2018/12/08 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
Python如何在DataFrame增加数值
2020/02/14 Python
jupyter notebook实现显示行号
2020/04/13 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
网吧消防安全责任书
2014/07/29 职场文书
四风问题查摆材料
2014/08/25 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
祝酒词范文
2015/08/12 职场文书
健康教育主题班会
2015/08/14 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL