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

相关文章

  • 详解nginx upstream 配置和作用

    详解nginx upstream 配置和作用

    这篇文章主要介绍了详解nginx upstream 配置和作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • nginx做代理时如何修改querystring方法详解

    nginx做代理时如何修改querystring方法详解

    这篇文章主要介绍了nginx做代理时如何修改querystring的方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • nginx如何通过proxy_pass设置反向代理,隐藏端口号

    nginx如何通过proxy_pass设置反向代理,隐藏端口号

    这篇文章主要介绍了nginx如何通过proxy_pass设置反向代理,隐藏端口号方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • nginx location块配置小结

    nginx location块配置小结

    nginx可以通过配置文件中的location指令来定义不同的请求匹配规则和处理逻辑,也就是描述不同请求资源在服务器的位置或者配置代理转发路径,这篇文章主要介绍了nginx location块配置,需要的朋友可以参考下
    2024-03-03
  • Nginx限流配置详解

    Nginx限流配置详解

    限流是服务降级的一种方式,通过限制系统的输入和输出流量以达到保护系统的目的,本文主要介绍了Nginx限流配置详解,感兴趣的可以了解一下
    2023-11-11
  • Nginx的一些基本功能极速入门

    Nginx的一些基本功能极速入门

    本文主要介绍一些Nginx的最基本功能以及简单配置,但不包括Nginx的安装部署以及实现原理。有兴趣的可以了解一下。
    2016-12-12
  • Nginx+Keepalived实现双机热备

    Nginx+Keepalived实现双机热备

    这篇文章主要介绍了Nginx+Keepalived实现双机热备,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • nginx 匹配规则小总结(推荐)

    nginx 匹配规则小总结(推荐)

    这篇文章主要介绍了nginx 匹配规则小总结及nginx配置proxy_pass路径带/问题,需要的朋友可以参考下
    2018-07-07
  • 在nginx中配置pathinfo模式支持thinkphp的URL重写

    在nginx中配置pathinfo模式支持thinkphp的URL重写

    这篇文章主要介绍了在nginx中配置pathinfo模式的例子,用来支持thinkphp的URL重写,并解决了thinkphp一个路径问题,需要的朋友可以参考下
    2014-04-04
  • Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)

    Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)

    这篇文章主要介绍了Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度),需要的朋友可以参考下
    2022-01-01

最新评论