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实现动静分离的负载均衡集群实战教程

    利用nginx实现动静分离的负载均衡集群实战教程

    这篇文章介绍了利用nginx实现动静分离的负载均衡集群实战,本次用到的操作系统及服务,本次实验一共需要3台服务器,一台nginx做为负载均衡分发器和动静分离的分发器,两台apache做为后端服务器,使用nginx实现两台apache服务器的负载均衡和动静分离,需要的朋友可以参考下
    2023-03-03
  • 如何利用map实现Nginx允许多个域名跨域

    如何利用map实现Nginx允许多个域名跨域

    这篇文章主要给大家介绍了关于如何利用map实现Nginx允许多个域名跨域的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • nginx各种代理配置大全

    nginx各种代理配置大全

    本文主要介绍了nginx各种代理配置大全,主要包括了路径配置,http跳转https,微信支付的校验等,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • Nginx服务器实现数据静态压缩的方法

    Nginx服务器实现数据静态压缩的方法

    这篇文章主要介绍了Nginx服务器实现数据静态压缩的方法,服务器中压缩CSS和JavaScript进行缓存一定程度上可以帮助提高服务器的IO速度,需要的朋友可以参考下
    2015-07-07
  • nginx使用ssl模块配置支持HTTPS访问的方法

    nginx使用ssl模块配置支持HTTPS访问的方法

    这篇文章主要介绍了nginx使用ssl模块配置支持HTTPS访问的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • nginx 平滑重启的实现方法

    nginx 平滑重启的实现方法

    这篇文章主要介绍了nginx 平滑重启的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 使用supervisor管理nginx+tomcat容器的方法示例

    使用supervisor管理nginx+tomcat容器的方法示例

    这篇文章主要介绍了使用supervisor管理nginx+tomcat容器的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Nginx服务器配置性能优化方案

    Nginx服务器配置性能优化方案

    这篇文章主要为大家详细介绍了Nginx服务器配置性能优化方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • nginx部署前端项目后刷新浏览器报错404问题解决

    nginx部署前端项目后刷新浏览器报错404问题解决

    现在前端页面部署正常访问,但是刷新的时候出现了404,所以下面给整理下,这篇文章主要给大家介绍了关于nginx部署前端项目后刷新浏览器报错404问题的解决办法,需要的朋友可以参考下
    2023-11-11
  • Nginx下配置Https证书详细过程

    Nginx下配置Https证书详细过程

    这篇文章主要介绍了Nginx下配置Https证书详细过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09

最新评论