MakeupSwan: nginx + Node.js

玩膩了Apache+PHP或是IIS+ASP了嗎?

來試試新的組合吧
nginx+Node.js

nginx是由俄羅斯人Igor Sysoev所撰寫的一個Http伺服器，根據netcraft在2012一月份的調查，其市佔率來到了9.63%(Apache:64.9%, Microsoft:14.46%)。

看nginx連續幾個月的市佔上昇讓我非常好奇。當然這數據看看就好，不同家的調查都不太一樣，不過從nginx都能拿到大約10%的市佔來看，它應該是小有看頭。

Node.js建構在Chrome的JavaScritp引擎之上，它使用了JavaScript語言當作編寫語言，有著event-driven, non-blocking I/O的特性。目前算是一個伺服端語言的新星。

Node.js的一個特色就是能讓前端工程師和後端工程師都使用JavaScript和JSON來溝通，例如，jQuery就能被共同使用。這樣一來，前後端工程師彼此之間討論起程式毫無阻礙，出了問題還可以共同努力把它處理掉，一家和樂榮榮多麼開心呀。但是在台灣，我們要體認一個事實，那就是前端工程師和後端工程師通常都是同一個人在擔任.....不過至少以後就不用早上寫javascript，下午再強迫腦袋轉個彎去寫php了!!

關於nginx和node.js，想看介紹文直接去google這二個關鍵字即可。不過在一陣搜尋後，我不禁被他們的訴求重點給吸引了，那就是他們都宣稱"超級快"。

看過[功夫]的都知道，天下武功無堅不破唯快不破，看到這裡還能不幻想一下自已是當年的終極殺人王火雲邪神嗎? 那還不架個站來試試此武功組合!

以下就教你一步一步來探索架設這傳奇武功:

1.
首先請把Ubuntu準備好，雖然在Windows上也能架設，但用個command line在那邊敲鍵盤的時後，旁人眼中看來就是高深莫測，就算你只是在那邊cd ls dir也沒關系。

2.
下載nginx和node.js
解壓縮

./configure
make
sudo make install

看有缺什什麼套件就裝一裝即可，若是在安裝階段遇到問題無法解決，就留個言來討論討論吧，因為我無腦裝一裝完全沒遇到問題，因此無法提供任何有用的建議給你。
對了，記得裝這個套件sudo apt-get install libpcre3-dev，否則nginx會編譯不了

3.
為了發揮二者的最大的效能，我們希望讓nginx負責靜態檔案(ex: *.html, *.jpg, *.css, *.js)並讓node.js負責動態的運算，所以我們的規劃如下:

nginx:

管控一個公開的資料夾html/ 裡面有index.html和jQuery檔案
在index.html中引入jQuery(此檔案也放置在我們的html/中)
在index.html中透過jQuery發出一個AJAX來取得1+1的答案
nginx在port:80上提供服務

node.js

在node.js上建構一個服務，此服務會計算並回傳1+1的答案，也就是2
node.js在port號8001上提供服務

並希望有這個限制

node.js不提供直接的服務，也就是別人不能靠著http://網址:8001連過來得知1+1=2這個祕密，只有localhost才能存取。

4.
好，那就可以開始了，首先把node.js的服務實作出來

nano /usr/local/nginx/html/app.js

並寫入以下內容

var http = require('http');

http.createServer(function (req, res) {

res.writeHead(200);
res.end(""+(1+1));

}).listen(8001, "127.0.0.1");

5.
執行 node app.js，此時連到http://127.0.0.1:8001就可以看到2了，因我們設定只回應127.0.0.1:8001的服務，非本機的機器通通都看不到這個答案。
雖然這樣非常好，但我們也希望其他人能知道這個答案，於是我們可以透過nginx來讓我們的網頁回答別人1+1等於多少。

6.
把nginx設定一下

mkdir /usr/local/nginx/conf/sites-enabled
cd /usr/local/nginx/conf/sites-enabled
nano app.conf

並寫入以下內容

server {

# nginx所聆聽的port號
listen 80;

# 主機名
server_name likecheap.com;

# 設定不同log的放置地方
access_log /usr/local/nginx/logs/likecheap.access.log;
error_log /usr/local/nginx/logs/likecheap.error.log;

# 設定靜態檔案的根目錄
root /usr/local/nginx/html/;

# 設置nginx要直接回應的副檔名，
# 這裡我們設定若是css js html就直接從根目錄回應
location ~* ^.+.(css|js|html)$ {
# access_log off;
# expires 15d;
}

# 設置nginx要如何proxy給node.js
# 因為nginx是從上下較長的匹配進行proxy判斷的，所以若不符合上述較長的匹配條件才會進入這裡
# 除了css js html檔案之外全轉給node.js處理
location / {
proxy_pass http://127.0.0.1:8001;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_redirect off;
}
}

7.
nano /usr/local/nginx/conf/nginx.conf
把#user nobody去掉#號並改成index.html的擁有者，否則會有權限問題，例如user IOwnIndex
接著修改http {}裡面的內容，放入這二行即可

http {

include mime.types; # set for mime type sent to browser

include sites-enabled/*; # where site configuration files are located

}

cd /usr/local/nginx/html
nano index.html

內容如下:

記得把jQuery檔案也一併放入html裡。

9.
把整個html資料夾設定成可執行

sudo chmod +x -R /usr/local/nginx/html/

執行nginx

sudo ./usr/local/nginx/sbin/nginx

若是設定有問題，改一改後可以

sudo ./usr/local/nginx/sbin/nginx -s reload

10.
此時不管到那一台電腦，只要知道IP就可以知道1+1等於多少了
假設安裝的電腦ip是 192.168.100.100
http://192.168.100.100/index.html
就可以看到被AJAX出來的2囉

11.
幾點要注意的

ubuntu的gedit預設是會產生備份的，例如xxx~，當nginx在讀取/usr/local/nginx/conf時會產生問題，記得把備份檔刪掉
改動index.html內容時記得清除瀏覽器的暫存

2012年1月14日星期六

nginx + Node.js

沒有留言:

張貼留言

2012年1月14日 星期六

nginx + Node.js

沒有留言:

張貼留言

2012年1月14日星期六