首頁 後端開發 php教程 使用 Nginx 部署靜態頁面的方法

使用 Nginx 部署靜態頁面的方法

Jun 04, 2018 am 10:40 AM
nginx 靜態

這篇文章主要介紹了關於使用Nginx 部署靜態頁面的方法,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

Nginx 介紹

Nginx 是俄羅斯人編寫的十分輕量級的HTTP 伺服器, Nginx,它的發音為“ engine X ”,是一個高效能的HTTP 和反向代理伺服器,同時也是一個IMAP/ POP3/ SMTP 代理伺服器。 Nginx 是由俄羅斯人 Igor Sysoev 為俄羅斯訪問量第二的 Rambler.ru 站點開發的,它已經在該站點運行超過兩年半了。 Igor Sysoev 在建立的專案時,使用基於 BSD 許可。

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 上的連接請求以反向代理的方式動態地轉發給內部網路上的多台伺服器進行處理,從而達到負載平衡的目的。

真巧, 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进行负载均衡

使用nginx搭建高可用,高并发的wcf集群

以上是使用 Nginx 部署靜態頁面的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
nginx在windows中怎麼配置 nginx在windows中怎麼配置 Apr 14, 2025 pm 12:57 PM

如何在 Windows 中配置 Nginx?安裝 Nginx 並創建虛擬主機配置。修改主配置文件並包含虛擬主機配置。啟動或重新加載 Nginx。測試配置並查看網站。選擇性啟用 SSL 並配置 SSL 證書。選擇性設置防火牆允許 80 和 443 端口流量。

docker容器名稱怎麼查 docker容器名稱怎麼查 Apr 15, 2025 pm 12:21 PM

可以通過以下步驟查詢 Docker 容器名稱:列出所有容器(docker ps)。篩選容器列表(使用 grep 命令)。獲取容器名稱(位於 "NAMES" 列中)。

docker怎麼啟動容器 docker怎麼啟動容器 Apr 15, 2025 pm 12:27 PM

Docker 容器啟動步驟:拉取容器鏡像:運行 "docker pull [鏡像名稱]"。創建容器:使用 "docker create [選項] [鏡像名稱] [命令和參數]"。啟動容器:執行 "docker start [容器名稱或 ID]"。檢查容器狀態:通過 "docker ps" 驗證容器是否正在運行。

怎麼查看nginx是否啟動 怎麼查看nginx是否啟動 Apr 14, 2025 pm 01:03 PM

確認 Nginx 是否啟動的方法:1. 使用命令行:systemctl status nginx(Linux/Unix)、netstat -ano | findstr 80(Windows);2. 檢查端口 80 是否開放;3. 查看系統日誌中 Nginx 啟動消息;4. 使用第三方工具,如 Nagios、Zabbix、Icinga。

docker怎麼創建容器 docker怎麼創建容器 Apr 15, 2025 pm 12:18 PM

在 Docker 中創建容器: 1. 拉取鏡像: docker pull [鏡像名] 2. 創建容器: docker run [選項] [鏡像名] [命令] 3. 啟動容器: docker start [容器名]

nginx怎麼配置雲服務器域名 nginx怎麼配置雲服務器域名 Apr 14, 2025 pm 12:18 PM

在雲服務器上配置 Nginx 域名的方法:創建 A 記錄,指向雲服務器的公共 IP 地址。在 Nginx 配置文件中添加虛擬主機塊,指定偵聽端口、域名和網站根目錄。重啟 Nginx 以應用更改。訪問域名測試配置。其他注意事項:安裝 SSL 證書啟用 HTTPS、確保防火牆允許 80 端口流量、等待 DNS 解析生效。

nginx怎麼查版本 nginx怎麼查版本 Apr 14, 2025 am 11:57 AM

可以查詢 Nginx 版本的方法有:使用 nginx -v 命令;查看 nginx.conf 文件中的 version 指令;打開 Nginx 錯誤頁,查看頁面的標題。

nginx服務器掛了怎麼辦 nginx服務器掛了怎麼辦 Apr 14, 2025 am 11:42 AM

當 Nginx 服務器宕機時,可執行以下故障排除步驟:檢查 nginx 進程是否正在運行。查看錯誤日誌以獲取錯誤消息。檢查 nginx 配置語法正確性。確保 nginx 具有訪問文件所需的權限。檢查文件描述符打開限制。確認 nginx 正在偵聽正確的端口。添加防火牆規則以允許nginx流量。檢查反向代理設置,包括後端服務器可用性。如需進一步幫助,請聯繫技術支持。

See all articles