Nginx 使用教學入門#

Nginx是一款開源的網路伺服器，能夠用於多種網路服務，包括 HTTP 伺服器、反向代理伺服器、郵件代理伺服器等。Nginx 設計之初，就專為處理高並發、高流量的網路服務所需求的需求。其高效的效能與穩定的運作，讓 Nginx 在全球許多知名的網站中，都有其身影。

Nginx 有什麼功用？#

Nginx 最主要的功能是作為網頁伺服器，處理來自網路的 HTTP 請求，並返回相對應的內容。另外，Nginx 也常常被使用為反向代理伺服器，這表示 Nginx 會在網站與使用者之間擔任傳遞訊息的角色，這樣可以大大提升網站的效能，以及提供更多的靈活度。此外，Nginx 也能提供負載均衡的服務，這樣可以幫助分散伺服器的負擔，提供更好的效能。

安裝Nginx#

要開始使用 Nginx，我們首先需要在我們的機器上安裝 Nginx。

在 Ubuntu 系統中，可以透過以下的命令進行安裝：

1
$ sudo apt update
2
$ sudo apt install nginx

使用以下指令查看是否安裝完成Nginx

1
$ nginx -v

安裝完成後，我們可以透過以下命令檢查Nginx是否已經成功安裝並開始運作:

1
$ systemctl status nginx

在瀏覽器中輸入您的伺服器 IP，如果看到歡迎頁面，表示 Nginx 已經成功運作。

Nginx 的設定檔案通常會存放在 /etc/nginx 目錄下，而網站的設定檔案則會在 /etc/nginx/sites-available 目錄中。要啟用網站，需要將設定檔案連結到 /etc/nginx/sites-enabled 目錄。

基本的 Nginx 網站設定檔案可能會看起來像這樣：

nginx.conf:

1
server {
2
    listen 80 default_server;
3
    listen [::]:80 default_server;
4

5
    root /var/www/html;
6
    index index.html index.htm index.nginx-debian.html;
7

8
    server_name _;
9

10
    location / {
11
        try_files $uri $uri/ =404;
12
    }
13
}

設定完成後再瀏覽器輸入http://localhost/就可以看到Nginx開啟的網頁服務 nginx_web_view

每當修改了 Nginx 的設定檔案後，我們都需要重新載入或重啟 Nginx，讓新的設定生效：

1
$ sudo systemctl reload nginx
2
# 或者
3
$ sudo systemctl restart nginx

Web Server#

首先進入nginx的資料夾中

1
$ cd /etc/nginx/
2
$ ls -lh

nginx_root

每個linux發行版的配置略有不同我們先關注nginx.conf他是Nginx的主設定檔首先先將/etc/nginx/裡的nginx.conf先轉成備份然後創建一個空的nginx.conf

1
sudo mv nginx.conf nginx.conf.bak
2
touch nginx.conf

我們可以使用nginx -t查看配置文件有沒有問題 nginx_-t

這裡發現nginx告訴我們沒有events的section 在這裡events是用來告訴nginx如何處理連接的

我們使用vim來修改nginx.conf

nginx.conf:

1
events {}

再次使用nginx -t查看配置文件有沒有問題 nginx_syntax_ok

因為我們更改了nginx的配置文件所以要使用nginx -s reload將nginx重新加載一下

但是此時我們會發現http://localhost/的網頁無法鮺入了由於我們只有配置events沒有配置http服務所以才無法載入網頁服務

所以我們要在nginx.conf再加入http模塊並告訴模塊監聽80 port

nginx.conf:

1
events {}
2

3
http {
4
    // 定義虛擬服務器(可以有多個server塊)
5
    server {
6
        listen 80; // 監聽80 port
7
        server_name localhost; // 定義server的ip地址或域名
8
    }
9
}

更改完後記得查看有沒有錯誤跟重載nginx

1
$ nginx -t && nginx -s reload

nginx_http_test

我們可以使用return返回http狀態碼及內容

nginx.conf:

1
events {}
2

3
http {
4
    server {
5
       listen 80;
6
       server_name localhost;
7

8
       return 200 "test from nginx.conf\n";
9
    }
10
}

使用curl使令訪問localhost查看我們返回的內容 nginx_http_test_curl

現在如果我們想要將我們寫好的網頁給nginx進行部屬我們可以使用下面的指令創建一個存放index.html的地方

1
$ mkdir /var/www/localhost
2
$ cd /var/www/localhost
3
$ vim index.html

在/var/www/localhost/index.html寫入內容

1
<!doctype html>
2
<html lang="zh-Hant">
3
<head>
4
  <meta charset="utf-8" />
5
  <title>Nginx Cat Test</title>
6
  <style>
7
    body {
8
      margin: 0;
9
      height: 100vh;
10
      display: flex;
11
      align-items: center;
12
      justify-content: center;
13
      background: #0f1226;
14
      color: #e6e9ff;
15
      font-family: monospace;
16
    }
17
    pre {
18
      padding: 20px;
19
      border-radius: 12px;
20
      background: rgba(255,255,255,0.05);
21
      border: 1px solid #444;
22
      font-size: 16px;
23
      line-height: 1.2;
24
      white-space: pre;
25
    }
26
  </style>
27
</head>
28
<body>
29
  <pre>
30
     /\_/\
31
    ( o.o )   Nginx is running!
32
     &gt; ^ &lt;    Welcome!
33
  </pre>
34
</body>
35
</html>

然後把nginx.conf的retrun刪除改成設定root

nginx.conf:

1
events {}
2

3
http {
4
    server {
5
       listen 80;
6
       server_name localhost;
7

8
       root /var/www/localhost;
9
    }
10
}

然後檢查重載

1
$ nginx -t && nginx -s reload

nginx_http_is_running

在默認情況下nginx會默認指定index.html為默認網頁入口我們可以透過index指令來改變默認網頁入口文件

nginx.conf:

1
events {}
2

3
http {
4
    server {
5
       listen 80;
6
       server_name localhost;
7

8
       root /var/www/localhost;
9
       index test.html;
10
    }
11
}

在實際應用中一個網頁會是由許多文件組成的在剛剛的案例我們把範例網頁中的css分開變成

index.html:

1
<!doctype html>
2
<html lang="zh-Hant">
3
<head>
4
  <meta charset="utf-8" />
5
  <title>Nginx Cat Test</title>
6
  <link rel="stylesheet" href="styles.css" />
7
</head>
8
<body>
9
  <pre>
10
     /\_/\
11
    ( o.o )   Nginx is running!
12
     &gt; ^ &lt;    Welcome!
13
  </pre>
14
</body>
15
</html>

styles.css:

1
body {
2
    margin: 0;
3
    height: 100vh;
4
    display: flex;
5
    align-items: center;
6
    justify-content: center;
7
    background: #0f1226;
8
    color: #e6e9ff;
9
    font-family: monospace;
10
}
11

12
pre {
13
    padding: 20px;
14
    border-radius: 12px;
15
    background: rgba(255,255,255,0.05);
16
    border: 1px solid #444;
17
    font-size: 16px;
18
    line-height: 1.2;
19
    white-space: pre;
20
}

你會發現在網頁上css上效果消失了這是因為nginx將css認為是一般的text傳給網頁 styles_type_err

要解決這個問題我們需要在nginx.conf將/etc/nginx/mime.types給引入 mime.types文件內部定義了幾乎所有的文件種類以便網頁識別

nginx.conf:

1
events {}
2

3
http {
4

5
    include /etc/nginx/mime.types; // 在http模塊引入使得其他server模塊也能使用
6

7
    server {
8
       listen 80;
9
       server_name localhost;
10

11
       root /var/www/localhost;
12
    }
13
}

檢查重載就可以發現已經可以載入styles.css

1
$ nginx -t && nginx -s reload

現在我們知道了可以使用include的方式將conf檔用不同的檔案組合起來那我們現在來試試看將server塊包成一個conf檔案並用include引入nginx.conf中在/etc/nginx有一個conf.d目錄可以放我們自定義的一些模塊

nginx.conf:

1
events {}
2

3
http {
4

5
    include /etc/nginx/mime.types; // 在http模塊引入使得其他server模塊也能使用
6

7
    include /etc/nginx/conf.d/*.conf; // 引入conf.d中的所有conf檔
8

9
}

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    root /var/www/localhost;
6
}

這樣如果要改動其他設定只需改動conf.d內的檔案就好了

location指令#

我們改寫一下/etc/nginx/conf.d/default.conf

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    location / {
6
        root /var/www/localhost;
7
    }
8
}

這樣可以更好的定義路徑

當我們想要讓用戶訪問http://localhost/app可以訪問到/var/www/localhost/index.html 我們可能會寫

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    location /app {
6
        root /var/www/localhost;
7
    }
8
}

但我們會發現無法訪問到http://localhost/app 其實是因為nginx需要匹配到對應的資料夾內的index.html 因此我們要在/var/www/localhost內建立app/後將index.html搬進去

1
$ mkdir /var/www/localhost/app/
2
$ mv /var/www/localhost/index.html /var/www/localhost/app/
3
$ mv /var/www/localhost/styles.css /var/www/localhost/app/

我們可以用curl測試看看 app_test

這裡會發現當我們訪問http://localhost/app時會出現錯誤訪問http://localhost/app/時則是正常的這是因為當我們訪問http://localhost/app時是在根目錄底下找app文件訪問http://localhost/app/則是默認找app目錄下的index.html文件這跟我們直接訪問http://localhost/app/index.html的效果是一樣的我們也可以在/var/www/localhost/底下創建apple/index.html 這樣訪問http://localhost/apple/或http://localhost/apple/index.html也是可以看到的

這樣有一個問題是可能將將不必要的文件公開給其他人看到因此我們可以使用匹配符來指定使用者一定要訪問app/index.html才能看到網頁

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    location = /app/index.html {
6
        root /var/www/localhost;
7
    }
8
}

這樣使用者就只能訪問http://localhost/app/index.html來取得網頁內容但我們會發現到使用者只能獲取html無法取得css 這樣的做法導致我們的配置很不靈活這時我們就可以使用正則表達式了我們可以先來看一個簡單的例子等等再解決我們css無法載入的問題

譬如說我們在/var/www/localhost/videos有20部影片想要對外公開裡面的15部 many_videos

我們可以這樣寫

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    location ~ ^/videos/videos(0[1-9]|1[0-5])\.mp4$ {
6
        root /var/www/localhost;
7
    }
8
}

我們現在看回剛剛的css問題我們可以這樣寫

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    location ~ ^/app/(index\.html|.*\.(?:css|js|png|jpg|jpeg|svg|ico|webp|woff2?))$ {
6
        root /var/www/localhost;
7
    }
8
}

以下是正則表達式的一些解釋:

~
- 在 location 裡，~ 代表「使用正則表達式，大小寫敏感」。
- 如果寫 ~*，則是不分大小寫。(但是在用戶實際訪問網址還是要正確輸入大小寫)
^/app/
- ^ 表示字串開頭要符合。
- /app/ 就是要求 URL 必須以 /app/ 開始。例如 /app/index.html、/app/styles.css 都會符合。
(index\.html|.*\.(?:css|js|png|jpg|jpeg|svg|ico|webp|woff2?))

這裡是一個 分組 (group)，| 代表「或」的關係。
- index\.html → 只要剛好是 /app/index.html，就會匹配。（注意 \.，因為在正則裡 . 是萬用字元，要用 \. 才能表示「真的小數點」。）
- .*\.(?:css|js|png|jpg|jpeg|svg|ico|webp|woff2?)
  
  → .*\. 表示任意檔名加副檔名。
  
  → (?: … ) 是「非捕獲分組」，只用來做選擇，不會單獨保存。
  
  → css|js|png|jpg|jpeg|svg|ico|webp|woff2?
  
  表示只允許副檔名是這些：.css .js .png .jpg .jpeg .svg .ico .webp .woff .woff2。
  
  woff2? 的 ? 代表「前一個字元可有可無」，所以可匹配 woff 或 woff2。
$
- 代表字串結尾。也就是說 URL 必須完整符合這個規則，不會允許後面再跟多的東西。

臨時重定向#

我們在實際案例中可能會有網頁正在維護或暫時搬家的情況這種時候就可以使用臨時重定向總之臨時重定向的意思就是這個資源暫時不在原本的 URL，請去另一個 URL 拿吧

我們可以讓用戶訪問http://localhost/temp時臨時重定向成http://localhost/app/index.html 以下是範例

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    root /var/www/localhost;
6

7
    location /temp {
8
        return 307 /app/index.html;
9
    }
10
}

redirect_page

雖然這樣可以符合我們的需求但是在網頁效能看來這種寫法會比較慢一點因為用以上的方法會導致在用戶端瀏覽器再發一次請求我們可以使用另一種比較快的方法讓伺服器內部直接改路徑不用讓用戶瀏覽器再發一次請求

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    root /var/www/localhost;
6

7
    rewrite /temp /app/index.html;
8
}

我們可以結合try_files $uri讓nginx找不到文件時可以導向到404頁面如果有找到的話就導向到index.html

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    root /var/www/localhost;
6
    index index.html;
7

8
    location / {
9
        add_header X-debug-uri "$uri";
10
        try_files $uri $uri/ =404;
11
    }
12
}

我們順便在header加上X-debug-uri來查看$uri的值

try_files_ok

try_files_no_html

try_files_404

我們可以看到在訪問localhost/app/index.html跟localhost/app/時X-debug-uri都會自動匹配/app/index.html 這是因為我們在try_files加上$uri跟$uri/還有我們前面定義的index index.html 當我們訪問一個不存在的頁面(如localhost/app/animal.html) try_files會丟出我們設定的第三個參數=404使網頁導向到404頁面

在返回404後其實我們可以發現這個404頁面是nginx的默認畫面那麼要如何修改成自訂義的畫面呢?

我們可以在存放html的文件夾內創建一個404.html的文件然後在/etc/nginx/conf.d/default.conf裡這樣寫

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    root /var/www/localhost;
6
    index index.html;
7
    error_page 404 /404.html;
8

9
    location / {
10
        add_header X-debug-uri "$uri";
11
        try_files $uri $uri/ =404;
12
    }
13
}

這樣我們就可以訂製自己的404頁面了

反向代理#

當今天你有兩個不同的項目開在不同的端口上例如今天你有兩個nextjs項目一個叫做next1一個叫做next2 那麼我們今天想要讓使用者透過網址控制流量導向哪一個項目

假設我們在next1的next.config.mjs設定basePatch為/nextapp1 然後next2的next.config.mjs設定basePatch為/nextapp2

再來讓next1跟next2分別運行在localhost:3000跟localhost:3001端口

然後我們到/etc/nginx/conf.d/default.conf裡這樣寫

/etc/nginx/conf.d/default.conf:

1
server {
2
    listen 80;
3
    server_name localhost;
4

5
    root /var/www/localhost;
6
    index index.html;
7
    error_page 404 /404.html;
8

9
    location /nextapp1 {
10
        proxy_pass http://localhost:3000;
11
    }
12

13
    location /nextapp2 {
14
        proxy_pass http://localhost:3001;
15
    }
16
}

這樣透過不同的路徑就可以被引導到不同的項目了在實戰中我們還可以透過不同的server_name反向代理到不同的後端技術中

負載均衡#

當你的網站流量變多時，你可能會增加你的服務器進行一個分流的動作這裡就可以使用到nginx的負載均衡功能了

我們要把剛剛的nextapp1跟nextapp2作為兩個負載服務器使用一樣還是分別開在localhost:3000跟localhost:3001端口可以在/etc/nginx/conf.d/default.conf裡這樣寫

/etc/nginx/conf.d/default.conf:

1
upstream backend-servers {
2
    server localhost:3000;
3
    server localhost:3001;
4
}
5

6
server {
7
    listen 80;
8
    server_name localhost;
9

10
    root /var/www/localhost;
11
    index index.html;
12
    error_page 404 /404.html;
13

14
    location / {
15
        proxy_pass http://backend-servers;
16
    }
17
}

這樣nginx就會隨機分配流量給負載服務器了但是當我們今天有兩台配置不一樣的主機例如一台是高配置另一台則是低配置那我們可以使用weight來設定每台服務器分配的流量

/etc/nginx/conf.d/default.conf:

1
upstream backend-servers {
2
    server localhost:3000 weight=2;
3
    server localhost:3001 weight=6;
4
}
5

6
server {
7
    listen 80;
8
    server_name localhost;
9

10
    root /var/www/localhost;
11
    index index.html;
12
    error_page 404 /404.html;
13

14
    location / {
15
        proxy_pass http://backend-servers;
16
    }
17
}

weight的值被分配的越大，被分配到的次數就會越多

以上就是nginx的簡易使用方式。