通过Nginx访问静态页面

痛定思痛。 2021-10-19 05:42 819阅读 0赞

# 通过Nginx访问静态页面 #

> 转载请标明出处^\_^  
> 原文首发于： [www.zhangruibin.com][]  
> 本文出自于： [RebornChang的博客][www.zhangruibin.com]

# nginx的用途 #

1.  处理静态文件，索引文件以及自动索引；打开文件描述符缓冲；
2.  无缓存的反向代理加速，简单的负载均衡和容错；
3.  FastCGI，简单的负载均衡和容错；
4.  模块化的结构。包括 gzipping, byte ranges, chunked responses,以及 SSI-filter 等 filter。如果由 Fast CGI 或其它代理服务器处理单页中存在的多个 SSI，则这项处理可以并行运行，而不需要相互等待；
5.  支持 SSL 和 TLSSNI。

# nginx优点 #

轻量、高性能、并发能力强。用来部署静态页面也是相当便捷。

# 动静分离的好处 #

当我们访问一些系统的时候，往往是页面发起一个请求，这个请求指定到我们的项目，然后由项目去根据request进行路径的路由寻址。但是系统有时候会有很多的静态资源需要访问，如果都通过项目去路由寻址有几点坏处：  
1.静态资源堆积，增加了项目包大小；  
2.造成大量线程开销。  
etc  
所以，通用的解决办法是把静态资源单独放置，使用nginx做代理，这样就可以直接对静态资源进行访问而不需要通过系统，大大的减少了系统的负载。  
那有没有坏处？有。  
1.任何人都可以根据资源路径进行访问，容易受到恶意攻击；  
2.容易造成静态资源泄露。

# linux上准备nginx环境 #

具体的准备nginx环境这里不再重复说了，可以参考链接 ：  
[连接][Link 1]

# 准备静态资源 #

将静态资源长传至服务器，博主是将一个静态页面及静态页面所需要用的js以及css和图片，上传到了nginx的安装目录下 路径为/usr/local/nginx/template，然后就可以配置nginx.conf文件了。  
上传后静态资源目录树如下所示：

[root@zhrb template]# tree ka
    ka
    ├── css
    │   ├── index.css
    │   └── reset.css
    ├── images
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.png
    │   ├── 4.png
    │   ├── background.png
    │   ├── banner.png
    │   ├── w-1-1.png
    │   ├── w-1-2.png
    │   ├── w-2-1.png
    │   ├── w-2-2.png
    │   └── w.png
    ├── index.html
    └── js
    
    3 directories, 14 files

# 配置nginx #

## 最简单的配置 ##

server {
        listen 80 ；# 监听本机所有 ip 上的 80 端口
        server_name _  ；# 域名：www.example.com 这里 "_" 代表获取匹配所有
        root /usr/local/nginx/template;# 站点根目录
        index index.html;
    }

## 其他类型配置1 ##

server {
        listen 80;        # 监听本机所有 ip 上的 80 端口
        server_name _;      # 域名：www.example.com 这里 "_" 代表获取匹配所有
        #server_name temp.zhangruibin.com www.temp.zhangruibin.com;在域名解析处增加一个二级子域名解析，可以使用域名直接访问静态资源，效果如下图所示；
        root /usr/local/nginx/template;  # 站点根目录
    
        location =/temp {       # 可有多个 location 用于配置路由地址
          try_files index.html =404;
        }
    }

这里的 root 字段最好写在 location 字段的外边，防止出现无法加载 css、js 的情况。因为 css、js 的加载并不是自动的，nginx 无法执行，需要额外的配置来返回资源。

此时直接访问服务器IP就可以访问到静态页面了。

![aHR0cHM6Ly93d3cuemhhbmdydWliaW4uY29tL3VwbG9hZC8yMDE5LzA4LzQxbjRzbzR0aWdnM2JvbzQ3Z3RvdnQ5ZzJxLnBuZw][]

## 其他类型配置2 ##

server {  
        listen    80;#端口号  
        server_name localhost;#本机  
    
        charset utf-8;  
    
        #access_log logs/host.access.log main;  
    
      location ~ .*\.(gif|jpg|jpeg|png)$ {  
        expires 24h;  
          root /usr/local/nginx/template/images/;#指定图片存放路径  
          access_log /usr/local/images.log;#日志存放路径  
          proxy_store on;  
          proxy_store_access user:rw group:rw all:rw;  
          proxy_temp_path     /local/images/;#图片访问路径  
          proxy_redirect     off;  
          proxy_set_header    Host 127.0.0.1;  
          client_max_body_size  10m;  
          client_body_buffer_size 1280k;  
          proxy_connect_timeout  900;  
          proxy_send_timeout   900;  
          proxy_read_timeout   900;  
          proxy_buffer_size    40k;  
          proxy_buffers      40 320k;  
          proxy_busy_buffers_size 640k;  
          proxy_temp_file_write_size 640k;  
          if ( !-e $request_filename)  
          {  
             proxy_pass http://127.0.0.1;#默认80端口  
          }  
      }   
    
        location / {  
          root  /usr/local/nginx/template; #html访问路径 
          index index.html ; #html文件名称 
    
        }
       }

# 重载nginx配置文件 #

nginx安装目录下，sbin目录里面执行：

./nginx -s reload

# nginx常用命令 #

1. 启动 Nginx
    
    poechant@ubuntu:sudo ./sbin/nginx
    
    2. 停止 Nginx
    
    poechant@ubuntu:sudo ./sbin/nginx -s stop
    poechant@ubuntu:sudo ./sbin/nginx -s quit
    
    -s都是采用向 Nginx 发送信号的方式。
    
    3. Nginx 重载配置
    
    sudo ./sbin/nginx -s reload`
    
    
    上述是采用向 Nginx 发送信号的方式，或者使用：
    
    service nginx reload
    
    4. 指定配置文件
    
    sudo ./sbin/nginx -c /usr/local/nginx/conf/nginx.conf
    
    -c表示configuration，指定配置文件。
    
    5. 查看 Nginx 版本
    有两种可以查看 Nginx 的版本信息的参数。第一种如下：
    
    /usr/local/nginx$ ./sbin/nginx -v
    nginx: nginx version: nginx/1.0.0
    
    另一种显示的是详细的版本信息：
    
    
    poechant@ubuntu:/usr/local/nginx$ ./sbin/nginx -V
    nginx: nginx version: nginx/1.0.0 nginx: built by gcc 4.3.3 (Ubuntu 4.3.3-5ubuntu4) 
    nginx: TLS SNI support enabled
    nginx: configure arguments: --with-http_ssl_module --with-openssl=/home/luming/openssl-1.0.0d/
    
    
    
    6. 检查配置文件是否正确
    
    
    /usr/local/nginx$ ./sbin/nginx -t
    nginx: [alert] could not open error log file: open() "/usr/local/nginx/logs/error.log" failed (13: Permission denied)
    nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok 2012/01/09 16:45:09 [emerg] 23898#0: open() "/usr/local/nginx/logs/nginx.pid" failed (13: Permission denied)
    nginx: configuration file /usr/local/nginx/conf/nginx.conf test failed
    
    
    
    如果出现如上的提示信息，表示没有访问错误日志文件和进程，可以sudo（super user do）一下：
    
    poerchant@ubuntu:/usr/local/nginx$ sudo ./sbin/nginx -t
    nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
    nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
    
    如果显示如上，则表示配置文件正确。否则，会有相关提示。
    
    7. 显示帮助信息
    
    poechant@ubuntu:/user/local/nginx$ ./sbin/nginx -h
    
    或者：
    
    poechant@ubuntu:/user/local/nginx$ ./sbin/nginx -?

（如侵删）  
亲，博主的微信公众号

‘程序员小圈圈’开始持续更新了哟~~

长按图片识别二维码或者微信扫描二维码或者直接搜索名字 ‘CXYXQQ’ 即可关注本公众号哟~~

不只是有技术哟~~

还可以学下教育知识以及消遣娱乐哟~~

求关注哟~~

![aHR0cHM6Ly93d3cuemhhbmdydWliaW4uY29tL3VwbG9hZC8yMDE5LzA4LzZyZTV1Z2dnNGtobXRycml0NTM0dWJoNzU5LnBuZw][]

[www.zhangruibin.com]: http://www.zhangruibin.com
[Link 1]: https://www.cnblogs.com/zhoading/p/8514050.html
[aHR0cHM6Ly93d3cuemhhbmdydWliaW4uY29tL3VwbG9hZC8yMDE5LzA4LzQxbjRzbzR0aWdnM2JvbzQ3Z3RvdnQ5ZzJxLnBuZw]: /images/20211018/50bf19cc30d147ed96c154a6ba79f2e4.png
[aHR0cHM6Ly93d3cuemhhbmdydWliaW4uY29tL3VwbG9hZC8yMDE5LzA4LzZyZTV1Z2dnNGtobXRycml0NTM0dWJoNzU5LnBuZw]: /images/20211018/7eb511aefcb04beeafee6e8fe11409aa.png