聊聊關於基本的 nginx reverse proxies and nodejs Express web server
由於上一篇的「nodejs Express + 10 分鐘申請 letsencrypt」有大大們告知我應該要使用反向代理(reverse proxies)而不是直接使用 nodejs 當 web server,因而讓我去了解何謂反向代理(reverse proxies),看了網站上各種教學文章,終於比較能夠理解,並將自己的伺服器都利用反向代理(reverse proxies),記錄下來並分享心得,若有地方理解的不正確,歡迎告知或留言給我~
環境:ubuntu 16.04 LTS
在電腦網路中,反向代理是代理伺服器的一種。它根據用戶端的請求,從後端的伺服器(如Web伺服器)上取得資源,然後再將這些資源返回給用戶端。與前向代理不同,前向代理作為一個媒介將網際網路上取得的資源返回給相關聯的用戶端,而反向代理是在伺服器端(如Web伺服器)作為代理使用,而不是用戶端。用戶端通過前向代理可以存取很多不同的資源,而反向代理是很多用戶端都通過它存取不同後端伺服器上的資源,而不需要知道這些後端伺服器的存在,而以為所有資源都來自於這個反向代理伺服器。
從 wiki 上的解釋大致上意思應該是說,當使用者在 Internet 上連接我們的 nginx 伺服器的時候,nginx 會在利用像使用者開瀏覽器抓取資料的行為再向我們內部的伺服器發一次取得資源,拿回來後,再轉發回去給使用者結果,這樣整體速度會變慢嗎?在內部應該不會。

稍微理解了一點的反向代理(reverse proxies)後接下來就是做一點實作的部分,而流程上大致上是:
- 架設一個簡單的 nodejs express web server,聽 3000 port
- 安裝 nginx
- 撰寫反向代理(reverse proxies)
OK, let go !
架設一個簡單的網頁伺服器
首先快速的用 nodejs 寫一個只有 Hello World 的網站,聆聽 3000 port
建立一個 nginxProxy 的資料夾,並完成基本安裝
mkdir nginxProxy && cd nginxProxy
npm init -y
npm install express --save建立一個 server.js 檔案,撰寫網頁伺服器程式
const express = require('express')
const app = express()
app.get('/', (req, res) => res.send('Hello World'))
app.listen(3000, () => console.log('Server listen on 3000 port...'))啟動網頁伺服器
node server.js看到 Server listen on 3000 port… 並打開網頁輸入 http://localhost:3000 只要看到 Hello World 就完成了。

安裝 nginx
因為我的伺服器是架設在 ubuntu 的環境中,重點是在設定反向代理的部分,所以就帶過 nginx 安裝的環節。
第一步安裝 nginx
sudo apt-get update
sudo apt-get install nginx安裝完成以後,nginx 會在 /etc/nginx 底下輸入 nginx start 後就能順利啟動 nginx。

撰寫反向代理(reverse proxies)
在 nginx 的資料夾中,有兩個資料夾分別是
- sites-available
- sites-enabled
sites-available
sites-available 可以讓我們撰寫我們會使用到的伺服器設定檔,但並未正式啟用,並且可以依照不同的 subdomain 寫不同的設定檔,例如最近撰寫的一個 ubike-map 而網域在 letfreecode.com 之下,所以我就建立了一個叫「ubike-map.letfreecode.com」的檔案來好整理我的設定檔,內容大致為
server {
listen 80;
server_name ubike-map.letfreecode.com; location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Host $host;
}
}
nginx 的設定檔案也算是一種巢狀的格式,而我都把左邊當作 key,右邊當作 value,最後面分號就是一個段落的結束。
listen 是 key,80 是 value,一來就是要聽 80 port
server_name 應該是設定進來的 subdomain,而我希望對 ubike-map.letfreecode.com 這個網址進來的人做導向。
location 底下就是我們重要的反向代理(reverse proxies)設定內容,後面接的來源是「/」也就是所有來自於「ubike-map.letfreecode.com」的使用者,而我用的內部的設定分別是
- proxy_pass 要反向代理的內部網頁伺服器位置,這裡設定的就是我們的nodejs express server http://127.0.0.1:3000
- proxy_http_version 設定反向代理 http 使用的版本
- proxy_set_header 設定反向代理要帶的 header 內容
完成後存檔就可以關閉了。
sites-enabled
這個資料夾中作用就是把我們在 sites-available 中撰寫的設定檔實際拿過來使用,大多數都是直接用 link 的方式,例如剛剛所撰寫的,我們將它拿過來使用
ln ../sites-available/ubike-map.letfreecode.com ubike-map.letfreecode.com輸入完後就會看到這樣的結果

最後重新啟動 nginx 輸入
nginx restart
接下來透過瀏覽器連結到自己在 nginx 所設定的網址就可以看到回應的網頁中是透過 nginx 當 server

一切就完成囉,如果您有需要更複雜的設定 nginx 都可以做到很強大,不過這裡就是我對於 nginx 初學的一個簡單心得分享。
參考資料
最後感謝各大教學與分享網站,因為看太多了,有些都忘記哪裡看到的,無法一一轉貼上來。

