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

本文主要介绍了nginx代理实现静态资源访问的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧！

一. 目标:

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

二. 实现效果:

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

三. 具体配置

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

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

1. server{ 
2. listen       80; 
3.  
4. #前端门户工程 
5. location / { 
6.     alias   D:/workspace/sc-multipl-static-web-project/; 
7.     index  index.html; 
8. } 

说明: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配置文件

1. server{ 
2.     listen       80; 
3.     server_name  www.chen123.com; 
4.     ssi on; 
5.     ssi_silent_errors on; 
6.     #前端门户工程 
7.     location / { 
8.         alias   D:/workspace/sc-multipl-static-web-project/; 
9.         index  index.html; 
10.     } 
11.      
12.    } 

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

3.nginx配置页面预览路由

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

1. http { 
2.     include       mime.types; 
3.     default_type  application/octet-stream; 
4.  
5.     sendfile        on; 
6.     #tcp_nopush     on; 
7.  
8.     #keepalive_timeout  0; 
9.     keepalive_timeout  65; 
10.  
11.     #gzip  on; 
12.     #cms页面预览路由 
13.     upstream cms_server_pool { 
14.         server 127.0.0.1:31001 weight=10; 
15.     } 
16.  
17.     server{ 
18.     listen       80; 
19.     server_name  www.xuecheng.com; 
20.     ssi on; 
21.     ssi_silent_errors on; 
22.     #前端门户工程 
23.     location / { 
24.         alias   D:/workspace/sc-multipl-static-web-project/; 
25.         index  index.html; 
26.     } 
27.     #页面预览 
28.     location /cms/preview/ { 
29.         proxy_pass http://cms_server_pool/cms/preview/; 
30.     } 
31.      
32.    } 
33. } 

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

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

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

我本地的nginx配置如下

1. events { 
2.     worker_connections  1024; 
3. } 
4.  
5. http { 
6.     include       mime.types; 
7.     default_type  application/octet-stream; 
8.  
9.     sendfile        on; 
10.     keepalive_timeout  65; 
11.  
12.     #gzip  on; 
13.     #cms页面预览路由 
14.     upstream cms_server_pool { 
15.         server 127.0.0.1:31001 weight=10; 
16.     } 
17.  
18.     server{ 
19.     listen       80; 
20.     server_name  www.xuecheng.com; 
21.     ssi on; 
22.     ssi_silent_errors on; 
23.     #前端门户工程 
24.     location / { 
25.         alias   D:/workspace/sc-multipl-static-web-project/; 
26.         index  index.html; 
27.     } 
28.     #页面预览 
29.     location /cms/preview/ { 
30.         proxy_pass http://cms_server_pool/cms/preview/; 
31.     } 
32.    } 
33. }