目录

• 一. 目标:
• 二. 实现效果:
• 三. 具体配置
• 1. nginx配置本地静态工程代理
• 2. win10配置本地域名实现域名访问
• 3.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 静态资源访问内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！