最近想要部署一個純前端的靜態(tài)頁面,項目的內(nèi)容很簡單,也就是一些簡單的html、css、js、jpg、mp3等靜態(tài)資源,不涉及后端開發(fā)。
之前一直都是使用Tomcat來部署項目的,因為涉及后端接口等方面的內(nèi)容,這次再用它來部署純前端的東西,顯得大材小用,過于笨重。
此時,使用nginx,便是最合適的選擇了,輕量、簡單、靈活。
我的服務(wù)器是在騰訊云上買的,操作系統(tǒng)是Centos,Linux中的一種。
安裝使用自帶的命令yum即可
yum install nginx
安裝完,nginx的相關(guān)目錄就都有了,最重要的一個配置文件nginx.conf在于
/etc/nginx/nginx.conf
我們一般在這里配置完項目的相關(guān)信息的配置,如訪問權(quán)限、訪問端口、訪問機器、訪問項目、訪問文件等:
#1.注意user使用root,以便輕松訪問任何文件
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
include /etc/nginx/conf.d/*.conf;
server {
#2.這里監(jiān)聽我們常用的80端口
listen 80;
#3.這里配置機器地址,一般是本機localhost
server_name localhost;
#4.這里配置項目根路徑
root /root/love;
#5.這里配置項目的訪問頁面
index index.html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
}
配置完畢,我們便可啟動nginx,完成部署,如果期間修改配置文件,我們則在reload下即可,下面羅列下幾個常用的命令:
篇文章主要介紹了關(guān)于使用 Nginx 部署靜態(tài)頁面的方法,有著一定的參考價值,現(xiàn)在分享給大家,有需要的朋友可以參考一下
Nginx 介紹
Nginx 是俄羅斯人編寫的十分輕量級的 HTTP 服務(wù)器, Nginx,它的發(fā)音為 “ engine X ”,是一個高性能的 HTTP 和反向代理服務(wù)器,同時也是一個 IMAP/ POP3/ SMTP 代理服務(wù)器。Nginx 是由俄羅斯人 Igor Sysoev 為俄羅斯訪問量第二的 Rambler.ru 站點開發(fā)的,它已經(jīng)在該站點運行超過兩年半了。Igor Sysoev 在建立的項目時,使用基于 BSD 許可。
Nginx 作為 HTTP 服務(wù)器,有以下幾項基本特性:
即 Nginx 的優(yōu)點:輕量、高性能、并發(fā)能力強。用來部署靜態(tài)頁面也是相當便捷。
這種高性能得益于 Nginx 的框架。在 Nginx 啟動后,會有一個 master 進程和多個 worker 進程。master 進程主要用來管理 worker 進程,包含:接收來自外界的信號,向各 worker 進程發(fā)送信號,監(jiān)控 worker 進程的運行狀態(tài),當 worker 進程退出后(異常情況下),會自動重新啟動新的 worker 進程。而基本的網(wǎng)絡(luò)事件,則是放在 worker 進程中來處理的。多個 worker 進程之間是對等的,他們同等競爭來自客戶端的請求,各進程互相之間是獨立的。一個請求,只可能在一個 worker 進程中處理,一個 worker 進程,不可能處理其它進程的請求。worker 進程的個數(shù)是可以設(shè)置的,一般我們會設(shè)置與機器 cpu 核數(shù)一致,這與 Nginx 的進程模型以及事件處理模型有關(guān)。
為何選用 Nginx
說到 Nginx,可能第一反應(yīng)就是 反向代理 和 負載均衡 了。那么什么是 反向代理,什么又是 負載均衡 呢?
反向代理
首先了解一下什么是 前向代理 。代理 (Proxy) 也稱網(wǎng)絡(luò)代理,是一種特殊的網(wǎng)絡(luò)服務(wù),通俗來講,就是在客戶端和目標服務(wù)器之間的充當中間人,接收客戶端的請求,再根據(jù)客戶端請求向目標服務(wù)器發(fā)起相應(yīng)的請求,從目標服務(wù)器獲得指定資源后返回給客戶端。且代理服務(wù)器可以對目標服務(wù)器的資源下載至本地緩存,如果客戶端所要獲取的資源在代理服務(wù)器的緩存之中,則代理服務(wù)器并不會再向目標服務(wù)器發(fā)起請求,而是直接返回緩存的資源。
其實代理服務(wù)器非常常見,就比如因為 GWF 而存在的一些科學(xué)上網(wǎng)的代理商,就是利用國外服務(wù)器作為代理服務(wù)器,從而正確解析域名來實現(xiàn)科學(xué)上網(wǎng)。代理服務(wù)器也可以實現(xiàn)隱藏真實 IP,比如著名的 Tor (洋蔥路由器)就是通過多重代理和一些加密技術(shù)來實現(xiàn)匿名交流。
而 反向代理 則是在服務(wù)器端作為代理使用,而不是客戶端。也就是說,前向代理 是代理內(nèi)部網(wǎng)絡(luò)用戶訪問 Internet 上服務(wù)器的連接請求,反向代理 是以代理服務(wù)器來接受 Internet 上的連接請求,然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器,并將從服務(wù)器上得到的結(jié)果返回給 Internet 上請求連接的客戶端,此時的代理服務(wù)器對外就表現(xiàn)為一個服務(wù)器。
負載均衡
反向代理負載均衡技術(shù)是把將來自 Internet 上的連接請求以反向代理的方式動態(tài)地轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的多臺服務(wù)器進行處理,從而達到負載均衡的目的。
真巧, Nginx 都做到了
Nginx 作為一個優(yōu)秀的代理服務(wù)器,反向代理和負載均衡必然是都具備的。想要更詳細得了解這方面的知識和使用方法,可參見文末給出的參考資料: Nginx 入門指南。
Nginx 安裝
本人使用的是騰訊云的服務(wù)器,版本為: Ubuntu Server 14.04.1 LTS 32 位。
$ apt-get install nginx
Mac OS 系統(tǒng)參考這篇文章:Installing Nginx in Mac OS X
Nginx 配置
簡單地配置 Nginx 的配置文件,以便在啟動 Nginx 時去啟用這些配置。而本文的重點也是于此。
Nginx 的配置系統(tǒng)由一個主配置文件和其他一些輔助的配置文件構(gòu)成。這些配置文件均是純文本文件,一般地,我們只需要配置主配置文件就行了。例如在我的服務(wù)器上是在:/etc/nginx/nginx.conf 。
指令上下文
nginx.conf 中的配置信息,根據(jù)其邏輯上的意義,對它們進行了分類,也就是分成了多個作用域,或者稱之為配置指令上下文。不同的作用域含有一個或者多個配置項。
其中每個配置項由配置指令和指令參數(shù)構(gòu)成,形成一個鍵值對,# 后面地為注釋,理解起來也非常容易。
一般配置文件的結(jié)構(gòu)和通用配置如下:
user www-data; # 運行 nginx 的所屬組和所有者
worker_processes 1; # 開啟一個 nginx 工作進程,一般 CPU 幾核就寫幾
pid /run/nginx.pid; # pid 路徑
events {
worker_connections 768; # 一個進程能同時處理 768 個請求
# multi_accept on;
}
# 與提供 http 服務(wù)相關(guān)的配置參數(shù),一般默認配置就可以,主要配置在于 http 上下文里的 server 上下文
http {
##
# Basic Settings
##
... 此處省略通用默認配置
##
# Logging Settings
##
... 此處省略通用默認配置
##
# Gzip Settings
##
... 此處省略通用默認配置
##
# nginx-naxsi config
##
... 此處省略通用默認配置
##
# nginx-passenger config
##
... 此處省略通用默認配置
##
# Virtual Host Configs
##
... 此處省略通用默認配置
# 此時,在此添加 server 上下文,開始配置一個域名,一個 server 配置段一般對應(yīng)一個域名
server {
listen 80; # 監(jiān)聽本機所有 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; # 監(jiān)聽本機所有 ip 上的 80 端口
server_name _; # 域名:www.example.com 這里 "_" 代表獲取匹配所有
root /home/filename/; # 站點根目錄
location / { # 可有多個 location 用于配置路由地址
try_files index.html =404;
}
}
這里的 root 字段最好寫在 location 字段的外邊,防止出現(xiàn)無法加載 css、js 的情況。因為 css、js 的加載并不是自動的,nginx 無法執(zhí)行,需要額外的配置來返回資源,所以,對于靜態(tài)頁面的部署,這樣做是最為方便的。
這里對 root 作進一步解釋,例如在服務(wù)器上有 /home/zhihu/ 目錄,其下有 index.html 文件和 css/ 以及 img/ , root /home/zhihu/; 就將指定服務(wù)器加載資源時是在 /home/zhihu/ 下查找。
其次, location 后的匹配分多種,其各類匹配方式優(yōu)先級也各不相同。這里列舉一精確匹配例子:
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 這個路由時才會正確響應(yīng),而且此時要通過 rewrite 正則匹配,把 /zhihu 解析替換成原來的 / 。關(guān)于更多 location 字段用法,可以在文章最后給出的參考資料中查看。
關(guān)于使用 nginx 部署靜態(tài)頁面,最簡單便捷的配置方法
上面說了挺多關(guān)于配置的說明,下面推薦一種個人認為最為便捷的配置方法。(特此感謝 guyskk 學(xué)長的答疑解惑)
首先創(chuàng)建一個目錄,例如: /home/ubuntu/website 然后在這個 website 文件夾下可以放置你需要部署的靜態(tài)頁面文件,例如 website 下我有 google、zhihu、fenghuang 這三個文件夾,其中 server 字段配置如下:
server {
listen 80;
server_name _;
root /home/ubuntu/website;
index index.html;
}
這里每個文件夾下面的靜態(tài)頁面文件名都是 index.html ,我以前有個很不好的習(xí)慣,比如 zhihu 頁面就喜歡命名為 zhihu.html ,但就從前端來看,這也是不符合規(guī)范的。
這樣配置的話,例如當你訪問 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 調(diào)試會發(fā)現(xiàn) www.showzeng.cn/zhihu 為 301 狀態(tài)碼,因為 index.html 是在 zhihu/ 文件夾下,所以在搜索過程中會重定向到 www.showzeng.cn/zhihu/ ,起初我是接受不了的,那一 / 看起來太難受了,但是只要一想到要一個一個 location 字段去匹配,我一下子就接受了。不知道你怎么看,反正我是接受了。
Nginx 啟動運行
$ sudo nginx -s reload
使用 reload 方法不用重啟服務(wù),直接重新加載配置文件,客戶端感覺不到服務(wù)異常,實現(xiàn)平滑切換。當然你也可以重新啟動 nginx 服務(wù)。
$ sudo service nginx restart
Nginx 停止運行
$ sudo nginx -s stop
相關(guān)推薦:
nginx應(yīng)用:使用nginx進行負載均衡
使用nginx搭建高可用,高并發(fā)的wcf集群
以上就是使用 Nginx 部署靜態(tài)頁面的方法的詳細內(nèi)容,更多請關(guān)注其它相關(guān)文章!
更多技巧請《轉(zhuǎn)發(fā) + 關(guān)注》哦!
搭建靜態(tài)網(wǎng)站,首先需要部署環(huán)境。下面的步驟,將告訴大家如何在服務(wù)器上通過 Nginx 部署 HTTP 靜態(tài)服務(wù)。
在 CentOS 上,可直接使用 yum
來安裝 Nginx
yum install nginx -y
安裝完成后,使用 nginx
命令啟動 Nginx:
nginx
此時,訪問 http://你的域名 可以看到 Nginx 的測試頁面
如果無法訪問,請重試用
nginx -s reload
命令重啟 Nginx
外網(wǎng)用戶訪問服務(wù)器的 Web 服務(wù)由 Nginx 提供,Nginx 需要配置靜態(tài)資源的路徑信息才能通過 url 正確訪問到服務(wù)器上的靜態(tài)資源。
打開 Nginx 的默認配置文件 /etc/nginx/nginx.conf ,修改 Nginx 配置,將默認的 root /usr/share/nginx/html;
修改為: root /data/www;
,如下:
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
include /etc/nginx/conf.d/*.conf;
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /data/www;
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
}
配置文件將 /data/www/static 作為所有靜態(tài)資源請求的根路徑,如訪問: http://<您的域名>/static/index.js
,將會去 /data/www/static/ 目錄下去查找 index.js
。現(xiàn)在我們需要重啟 Nginx 讓新的配置生效,如:
nginx -s reload
重啟后,現(xiàn)在我們應(yīng)該已經(jīng)可以使用我們的靜態(tài)服務(wù)器了,現(xiàn)在讓我們新建一個靜態(tài)文件,查看服務(wù)是否運行正常。
首先讓我們在 /data 目錄 下創(chuàng)建 www
目錄,如:
mkdir -p /data/www
在 /data/www 目錄下創(chuàng)建我們的第一個靜態(tài)文件 index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>第一個靜態(tài)文件</title>
</head>
<body>
Hello world!
</body>
</html>
現(xiàn)在訪問 http://<您的域名>/index.html 應(yīng)該可以看到頁面輸出 [Hello world!]
到此,一個基于 Nginx 的靜態(tài)服務(wù)器就搭建完成了,現(xiàn)在所有放在 /data/www 目錄下的的靜態(tài)資源都可以直接通過域名訪問。
如果無顯示,請刷新瀏覽器頁面
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。