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

 更新时间:2022年06月29日 11:53:43   作者:chenhaotao  
本文主要介绍了nginx代理实现静态资源访问的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一. 目标:

为了通过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 静态资源访问内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • window下使用nginx提供文件下载服务器配置

    window下使用nginx提供文件下载服务器配置

    这篇文章主要介绍了window下使用nginx提供文件下载服务器配置,需要的朋友可以参考下
    2017-06-06
  • 基于Nginx+lua实现简单的XSS攻击拦截

    基于Nginx+lua实现简单的XSS攻击拦截

    WAF即web应用防火墙,Nginx是一个主流的代理服务,除了本身的Nginx日志,作为用户肯定也支持对请求信息进行操作, 很多都是通过在代理服务器上挂载规则特征,实现软件层面的软WAF进行WEB防护,本文主要给大家介绍了Nginx+Lua实现一个简单的XSS攻击拦截,需要的朋友可以参考下
    2024-01-01
  • Nginx反向代理proxy_cache_path directive is not allowed错误解决方法

    Nginx反向代理proxy_cache_path directive is not allowed错误解决方法

    这篇文章主要介绍了Nginx反向代理proxy_cache_path directive is not allowed错误解决方法,需要的朋友可以参考下
    2015-04-04
  • shell脚本实战之部署nginx脚本实例

    shell脚本实战之部署nginx脚本实例

    最近自己编写的Linux一键部署脚本,可以一键部署Nginx,分享给大家,这篇文章主要给大家介绍了关于shell脚本实战之部署nginx脚本的相关资料,需要的朋友可以参考下
    2022-12-12
  • 全面解析Nginx到底能做什么

    全面解析Nginx到底能做什么

    本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文本身也可能介绍的不完整,具体内容详情大家跟随小编一起通过本文学习吧
    2018-10-10
  • Nginx实现负载均衡和反向代理的方法

    Nginx实现负载均衡和反向代理的方法

    Nginx是由俄罗斯人研发的,应对Rambler的网站,并且2004年发布的第一个版本,Nginx功能丰富,可作为HTTP服务器,也可作为反向代理服务器,邮件服务器,本文给大家介绍了Nginx实现负载均衡和反向代理的方法,需要的朋友可以参考下
    2024-02-02
  • centos6.4下nginx1.12.1安装教程

    centos6.4下nginx1.12.1安装教程

    这篇文章主要为大家详细介绍了centos6.4下nginx1.12.1安装教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • nginx配置多个站点共用80端口的解决方法

    nginx配置多个站点共用80端口的解决方法

    这篇文章主要介绍了nginx配置多个站点共用80端口的解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • Nginx部署SpringBoot项目的实现

    Nginx部署SpringBoot项目的实现

    本文主要介绍了Nginx部署SpringBoot项目的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • 基于nginx反向代理获取用户真实Ip地址详解

    基于nginx反向代理获取用户真实Ip地址详解

    我们访问互联网上的服务时,大多数时客户端并不是直接访问到服务端的,而是客户端首先请求到反向代理,反向代理再转发到服务端实现服务访问,这篇文章主要给大家介绍了关于如何基于nginx反向代理获取用户真实Ip地址的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论