聊聊關於基本的 nginx reverse proxies and nodejs Express web server

Whien_Liou
Jul 23, 2017 · 7 min read

由於上一篇的「nodejs Express + 10 分鐘申請 letsencrypt」有大大們告知我應該要使用反向代理(reverse proxies)而不是直接使用 nodejs 當 web server,因而讓我去了解何謂反向代理(reverse proxies),看了網站上各種教學文章,終於比較能夠理解,並將自己的伺服器都利用反向代理(reverse proxies),記錄下來並分享心得,若有地方理解的不正確,歡迎告知或留言給我~

環境:ubuntu 16.04 LTS

在電腦網路中,反向代理是代理伺服器的一種。它根據用戶端的請求,從後端的伺服器(如Web伺服器)上取得資源,然後再將這些資源返回給用戶端。與前向代理不同,前向代理作為一個媒介將網際網路上取得的資源返回給相關聯的用戶端,而反向代理是在伺服器端(如Web伺服器)作為代理使用,而不是用戶端。用戶端通過前向代理可以存取很多不同的資源,而反向代理是很多用戶端都通過它存取不同後端伺服器上的資源,而不需要知道這些後端伺服器的存在,而以為所有資源都來自於這個反向代理伺服器。

從 wiki 上的解釋大致上意思應該是說,當使用者在 Internet 上連接我們的 nginx 伺服器的時候,nginx 會在利用像使用者開瀏覽器抓取資料的行為再向我們內部的伺服器發一次取得資源,拿回來後,再轉發回去給使用者結果,這樣整體速度會變慢嗎?在內部應該不會。

圖片來源:https://zh.wikipedia.org/wiki/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86

稍微理解了一點的反向代理(reverse proxies)後接下來就是做一點實作的部分,而流程上大致上是:

  1. 架設一個簡單的 nodejs express web server,聽 3000 port
  2. 安裝 nginx
  3. 撰寫反向代理(reverse proxies)

OK, let go !

架設一個簡單的網頁伺服器

建立一個 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

第一步安裝 nginx

sudo apt-get update
sudo apt-get install nginx

安裝完成以後,nginx 會在 /etc/nginx 底下輸入 nginx start 後就能順利啟動 nginx。

撰寫反向代理(reverse proxies)

  • sites-available
  • sites-enabled

sites-available

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

ln ../sites-available/ubike-map.letfreecode.com ubike-map.letfreecode.com

輸入完後就會看到這樣的結果

最後重新啟動 nginx 輸入

nginx restart

接下來透過瀏覽器連結到自己在 nginx 所設定的網址就可以看到回應的網頁中是透過 nginx 當 server

Server: nginx/1.10.3 (Ubuntu)

一切就完成囉,如果您有需要更複雜的設定 nginx 都可以做到很強大,不過這裡就是我對於 nginx 初學的一個簡單心得分享。


參考資料

最後感謝各大教學與分享網站,因為看太多了,有些都忘記哪裡看到的,無法一一轉貼上來。

前端壹兩三事

前端 ( Front End ) 新事物、解決問題、個人成長、收集與分享心得。

Whien_Liou

Written by

前端壹兩三事

前端 ( Front End ) 新事物、解決問題、個人成長、收集與分享心得。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade