使用 Nginx 部署静态页面的方法

Nginx 介绍

Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器, Nginx,它的发音为 “ engine X ”,是一个高性能的 HTTP 和反向代理服务器,同时也是一个 IMAP/ POP3/ SMTP 代理服务器。Nginx 是由俄罗斯人 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年半了。Igor Sysoev 在建立的项目时,使用基于 BSD 许可。

英文主页:http://nginx.net

Nginx 作为 HTTP 服务器,有以下几项基本特性:

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

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

这种高性能得益于 Nginx 的框架。在 Nginx 启动后,会有一个 master 进程和多个 worker 进程。master 进程主要用来管理 worker 进程,包含:接收来自外界的信号,向各 worker 进程发送信号,监控 worker 进程的运行状态,当 worker 进程退出后(异常情况下),会自动重新启动新的 worker 进程。而基本的网络事件,则是放在 worker 进程中来处理的。多个 worker 进程之间是对等的,他们同等竞争来自客户端的请求,各进程互相之间是独立的。一个请求,只可能在一个 worker 进程中处理,一个 worker 进程,不可能处理其它进程的请求。worker 进程的个数是可以设置的,一般我们会设置与机器 cpu 核数一致,这与 Nginx 的进程模型以及事件处理模型有关。

为何选用 Nginx

说到 Nginx,可能第一反应就是 反向代理 和 负载均衡 了。那么什么是 反向代理,什么又是 负载均衡 呢?

反向代理

首先了解一下什么是 前向代理 。代理 (Proxy) 也称网络代理,是一种特殊的网络服务,通俗来讲,就是在客户端和目标服务器之间的充当中间人,接收客户端的请求,再根据客户端请求向目标服务器发起相应的请求,从目标服务器获得指定资源后返回给客户端。且代理服务器可以对目标服务器的资源下载至本地缓存,如果客户端所要获取的资源在代理服务器的缓存之中,则代理服务器并不会再向目标服务器发起请求,而是直接返回缓存的资源。

其实代理服务器非常常见,就比如因为 GWF 而存在的一些科学上网的代理商,就是利用国外服务器作为代理服务器,从而正确解析域名来实现科学上网。代理服务器也可以实现隐藏真实 IP,比如著名的 Tor (洋葱路由器)就是通过多重代理和一些加密技术来实现匿名交流。

而 反向代理 则是在服务器端作为代理使用,而不是客户端。也就是说,前向代理 是代理内部网络用户访问 Internet 上服务器的连接请求,反向代理 是以代理服务器来接受 Internet 上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给 Internet 上请求连接的客户端,此时的代理服务器对外就表现为一个服务器。

负载均衡

反向代理负载均衡技术是把将来自 Internet 上的连接请求以反向代理的方式动态地转发给内部网络上的多台服务器进行处理,从而达到负载均衡的目的。

真巧, Nginx 都做到了

Nginx 作为一个优秀的代理服务器,反向代理和负载均衡必然是都具备的。想要更详细得了解这方面的知识和使用方法,可参见文末给出的参考资料: Nginx 入门指南。

Nginx 安装

本人使用的是腾讯云的服务器,版本为: Ubuntu Server 14.04.1 LTS 32 位。

$ apt-get install nginx

Mac OS 系统参考这篇文章:Installing Nginx in Mac OS X

Nginx 配置

简单地配置 Nginx 的配置文件,以便在启动 Nginx 时去启用这些配置。而本文的重点也是于此。

Nginx 的配置系统由一个主配置文件和其他一些辅助的配置文件构成。这些配置文件均是纯文本文件,一般地,我们只需要配置主配置文件就行了。例如在我的服务器上是在:/etc/nginx/nginx.conf

指令上下文

nginx.conf 中的配置信息,根据其逻辑上的意义,对它们进行了分类,也就是分成了多个作用域,或者称之为配置指令上下文。不同的作用域含有一个或者多个配置项。

其中每个配置项由配置指令和指令参数构成,形成一个键值对,# 后面地为注释,理解起来也非常容易。

一般配置文件的结构和通用配置如下:

user www-data;  # 运行 nginx 的所属组和所有者
worker_processes 1;  # 开启一个 nginx 工作进程,一般 CPU 几核就写几
pid /run/nginx.pid;  # pid 路径

events {
    worker_connections 768;  # 一个进程能同时处理 768 个请求
    # multi_accept on;
}

# 与提供 http 服务相关的配置参数,一般默认配置就可以,主要配置在于 http 上下文里的 server 上下文
http {
    ##
    # Basic Settings
    ##

    ... 此处省略通用默认配置

    ##
    # Logging Settings
    ##
    ... 此处省略通用默认配置

    ##
    # Gzip Settings
    ##

    ... 此处省略通用默认配置

    ##
    # nginx-naxsi config
    ##

    ... 此处省略通用默认配置

    ##
    # nginx-passenger config
    ##

    ... 此处省略通用默认配置

    ##
    # Virtual Host Configs
    ##

    ... 此处省略通用默认配置

    # 此时,在此添加 server 上下文,开始配置一个域名,一个 server 配置段一般对应一个域名
    server {
        listen 80;        # 监听本机所有 ip 上的 80 端口
        server_name _;      # 域名:www.example.com 这里 "_" 代表获取匹配所有
        root /home/filename/;  # 站点根目录

        location / {       # 可有多个 location 用于配置路由地址
            try_files index.html =404;
        }
}

# 邮箱的配置,因为用不到,所以把这个 mail 上下文给注释掉
#mail {
#    # See sample authentication script at:
#    # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#    # auth_http localhost/auth.php;
#    # pop3_capabilities "TOP" "USER";
#    # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#    server {
#        listen   localhost:110;
#        protocol  pop3;
#        proxy    on;
#    }
#
#    server {
#        listen   localhost:143;
#        protocol  imap;
#        proxy    on;
#    }
#}

这里需要注意的是 http 上下文里的 server 上下文。

server {
    listen 80;        # 监听本机所有 ip 上的 80 端口
    server_name _;      # 域名:www.example.com 这里 "_" 代表获取匹配所有
    root /home/filename/;  # 站点根目录

    location / {       # 可有多个 location 用于配置路由地址
      try_files index.html =404;
    }
}

这里的 root 字段最好写在 location 字段的外边,防止出现无法加载 css、js 的情况。因为 css、js 的加载并不是自动的,nginx 无法执行,需要额外的配置来返回资源,所以,对于静态页面的部署,这样做是最为方便的。

这里对 root 作进一步解释,例如在服务器上有 /home/zhihu/ 目录,其下有 index.html 文件和 css/ 以及 img/ , root /home/zhihu/; 就将指定服务器加载资源时是在 /home/zhihu/ 下查找。

其次, location 后的匹配分多种,其各类匹配方式优先级也各不相同。这里列举一精确匹配例子:

server {
    listen 80;
    server_name _;
    root /home/zhihu/;  

    location = /zhihu {
      rewrite ^/.* / break;
      try_files index.html =404;
    }
}

此时,访问 www.example.com/zhihu 就会加载 zhihu.html 出来了。由于 location 的精确匹配,只有访问 www.example.com/zhihu 这个路由时才会正确响应,而且此时要通过 rewrite 正则匹配,把 /zhihu 解析替换成原来的 / 。关于更多 location 字段用法,可以在文章最后给出的参考资料中查看。

关于使用 nginx 部署静态页面,最简单便捷的配置方法

上面说了挺多关于配置的说明,下面推荐一种个人认为最为便捷的配置方法。(特此感谢 guyskk学长的答疑解惑)

首先创建一个目录,例如: /home/ubuntu/website 然后在这个 website 文件夹下可以放置你需要部署的静态页面文件,例如 website 下我有 google、zhihu、fenghuang 这三个文件夹,其中 server 字段配置如下:

server {
    listen 80;
    server_name _;
    root /home/ubuntu/website;
    index index.html;
}

这里每个文件夹下面的静态页面文件名都是 index.html ,我以前有个很不好的习惯,比如 zhihu 页面就喜欢命名为 zhihu.html ,但就从前端来看,这也是不符合规范的。

这样配置的话,例如当你访问 www.showzeng.cn/google/ 时,nginx 就会去 website 目录下的 google 文件夹下寻找到 index.html 并把 google 页面返回,同理,访问 www.showzeng.cn/zhihu/ 时,会寻找到 zhihu 文件夹下的 index.html 并把 zhihu 页面返回。

而在 zhihu、google 、fenghuang 文件夹的同级目录上,再添加你的域名首页 index.html 时,访问 www.example.com 时就会返回了。

这里唯一美中不足的是,访问域名中 www.showzeng.cn/zhihu 末尾会自动加上 / ,在浏览器中按 F12 调试会发现 www.showzeng.cn/zhihu 为 301 状态码,因为 index.html 是在 zhihu/ 文件夹下,所以在搜索过程中会重定向到 www.showzeng.cn/zhihu/ ,起初我是接受不了的,那一 / 看起来太难受了,但是只要一想到要一个一个 location 字段去匹配,我一下子就接受了。不知道你怎么看,反正我是接受了。

Nginx 启动运行

$ sudo nginx -s reload

使用 reload 方法不用重启服务,直接重新加载配置文件,客户端感觉不到服务异常,实现平滑切换。当然你也可以重新启动 nginx 服务。

$ sudo service nginx restart

Nginx 停止运行

$ sudo nginx -s stop

参考资料

Nginx 入门指南

Nginx for Developers: An Introduction (译文)

nginx 配置 location 总结及 rewrite 规则写法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • nginx和tomcat访问图片和静态页面的配置方法

    生产环境下,有时候需要访问图片,正常需要应用ftp.nginx等配套使用,但是有时候为了简化,可以用以下的两种简单的访问,说实话,就是为了偷懒,但是效果是能有的,这就行了,所以今天做这个简化版的方便大家应急之用. 第一种方法:nginx配置下 1.创建文件路径: [root@localhost /]# mkdir /data/soft/ [root@localhost ~]# cd /data/soft/ [root@localhost soft]# mkdir html images 2.在i

  • nginx配置访问图片路径以及html静态页面的调取方法

    给大家讲一个快速配置nginx访问图片地址,以及访问html静态页面的配置. 1.实验环境 首先随便某个路径下创建相应的目录.如图下 2.在里面放自定义的html或者图片. 3.nginx配置 user root; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events {

  • Nginx设置静态页面压缩和缓存过期时间的方法

    使用nginx服务器的朋友可能都知道需要设置html静态页面缓存与页面压缩与过期时间的设置了,下面我来给各位同学介绍一下配置方法,包括对ico,gif,bmp,jpg,jpeg,swf,js,css,mp3文件进行本地缓存. 可以通过nginx对服务器上的静态资源进行过期时间设置和对资源进行压缩传输来减少服务器的带宽开销. 以下是nginx对静态资源过期时间的设置方法: location ~* .(ico|gif|bmp|jpg|jpeg|png|swf|js|css|mp3) { root /

  • nginx配置React静态页面的方法教程

    前言 本文主要给大家介绍了关于nginx配置React静态页面的相关内容,文中给大家详细介绍了关于nginx的安装以及一些基本操作,然后给大家分享了React 静态页面 nginx 配置简洁版的示例代码,下面话不多说了,来一起看看详细的介绍吧. 关于nginx的安装启动以及80端口被占用的解决方法,大家也可以参考这篇文章:http://www.jb51.net/article/110291.htm 第一步:安装 1.http://nginx.org/en/download.html 下载 2.t

  • 使用 Nginx 部署静态页面的方法

    Nginx 介绍 Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器, Nginx,它的发音为 " engine X ",是一个高性能的 HTTP 和反向代理服务器,同时也是一个 IMAP/ POP3/ SMTP 代理服务器.Nginx 是由俄罗斯人 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年半了.Igor Sysoev 在建立的项目时,使用基于 BSD 许可. 英文主页:http://nginx.net. Ngi

  • Docker镜像+nginx 部署 vue 项目的方法

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西. 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. 二.获取nginx 镜像 nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像. 在终端输入: docker pull nginx 即可以获取到ngin

  • Nginx实现404页面的方法小结

    第一种:Nginx自己的错误页面 Nginx访问一个静态的html 页面,当这个页面没有的时候,Nginx抛出404,那么如何返回给客户端404呢? 看下面的配置,这种情况下不需要修改任何参数,就能实现这个功能. server { listen 80; server_name www.test.com; root /var/www/test; index index.html index.htm; location / { } # 定义错误页面码,如果出现相应的错误页面码,转发到那里. erro

  • ASP.NET编程简单实现生成静态页面的方法【附demo源码下载】

    本文实例讲述了ASP.NET编程简单实现生成静态页面的方法.分享给大家供大家参考,具体如下: 1. 使用场景 当页面的数据不需要经常更改时可采用静态页面方式. 2. 使用静态页面的好处 (1)提高网站的访问速度 (2)减轻服务器负担 (3)利于搜索引擎抓取 3. ASP.NET生成静态页面 生成静态页面方法有很多种,先说下我使用的其中的一种.参考资料 基本思路: (1)创建模板template.html文件,在里面定义一些特殊的字符串格式用于替换内容,如$htmlformat (2)读取模板,赋

  • jsp实现将动态网页转换成静态页面的方法

    本文实例讲述了jsp实现将动态网页转换成静态页面的方法.分享给大家供大家参考.具体如下: 如果我可以将jsp动态网页转换成静态页面,那么访问的时候就不需要频繁的访问数据库了. jsp 显示内容缓存技巧 前段时间做自己社区的论坛,在jive 的基础上做一个页面显示所有论坛的帖子,可以称之为总版,模仿forum 类的接口做个superforum 并且实现cachable,不过因为这个页面刷新量比较大,虽然被cache 了,我还是想办法进行页面的缓存,感觉用jsp 产生的html静态内容当缓存,页面访

  • JSP技术实现动态页面到静态页面的方法

    本文是介绍了jsp技术实现动态页面到静态页面的方法,分享给大家,具体如下: 对于JSP技术实现动态页面到静态页面的方案,我们从三个步骤来说明: JSP技术实现动态页面到静态页面的方案第一: 为了能深入浅出的理解这个框架的由来,我们首先来了解一下JSP解析器将我们写的JSP代码转换成的JAVA文件的内容. 下面是一个JSP文件test.jsp ﹤%@ page language=java contentType=text/html;charset=GB2312 %﹥ ﹤% out.write(﹤!

  • Django之使用celery和NGINX生成静态页面实现性能优化

    性能优化原理: 当我们要给client浏览器返回一个页面时,我们需要去数据库查询数据并将数据和基本页面模板渲染形成页面返回给客户端,但如果每一个用户访问时都去查询一次首页的的数据时,当日访问量很大时那么无疑会给数据库查询带来很大的性能问题.为了解决这个问题,我们可以给未登录用户返回一个早就渲染好的静态首页(给已登录的用户返回一个调用缓存数据和个人数据渲染的页面),这样就可以提高网站的性能了. 使用celery生成静态首页 生成静态页面原理: 在一个为静态首页准备的基础模板之上,获取数据,使用dj

  • ASP.NET MVC生成静态页面的方法

    本文主要讲述了在asp.NET mvc中,页面静态化的方法.对于网站来说,生成纯html静态页面除了有利于seo外,还可以减轻网站的负载能力和提高网站性能. 1.先付上封装好生成静态页的原代码: public class Common { #region 获取模板页的Html代码 /// <summary> /// 获取页面的Html代码 /// </summary> /// <param name="url">模板页面路径</param>

随机推荐