Nginx 轉址設定教學，對整個網域或是網域底下的特定頁面進行轉址

  • 發布日期2023.05.24
  • 文章分類網站知識

在新舊網站轉換、資料轉移或是網站結構改變時，為了確保 SEO 流量不會遺失，我們需要對網域或是網域底下的特定頁面進行轉址。Nginx，作為一個高效且靈活的網頁伺服器 (Web Server)，提供了強大的轉址功能。本教學將帶您進一步了解如何使用 Nginx 進行轉址設定，讓您能夠輕鬆地對整個網域或是網域底下的特定頁面進行必要的轉址操作。工程面上使用 Nginx 轉址屬於 Web Server 層級的轉址，如果在閱讀完本文後想進一步取得轉址諮詢，歡迎聯繫集盒設計。

實驗環境模擬和目標說明

此次會採用 Docker 架設轉址的實驗環境，我們會使用 Nginx 官方提供的映像檔，並自訂 nginx.conf 設定檔案架設兩個網域 abc.com 和 efg.com。這邊附上此次實驗環境的 Github 倉庫連結，執行方式可依照 README.md 裡進行 docker build 和 docker run 執行 container 環境做測試。

下面是模擬環境的架構圖：

此時的 nginx.config 檔案設定如下，其他檔案可參考這個 git commit

server {
  listen       80 default_server;
  listen       [::]:80 default_server;
  server_name  abc.com;
  root         /usr/share/nginx/abc;
  index        index.html;
}

server {
  listen       80;
  listen       [::]:80;
  server_name  efg.com;
  root         /usr/share/nginx/efg;
  index        index.html;
}

接下來會進行兩個實驗，第一個實驗是將 abc.com 全站轉址至 efg.com；第二個實驗是保留 abc.com 網域其他頁面，僅將 abc.com 底下的指定頁面轉址到 efg.com 底下的指定頁面。

記住在操作前需修改 /etc/hosts 裡設定將 abc.com 和 efg.com 指向 127.0.0.1

127.0.0.1 abc.com
127.0.0.1 efg.com

實驗ㄧ：將 abc.com 全站轉址至 efg.com

nginx.conf 檔案設定如下，我們需要在 server abc.com 設定 301 全轉址至 efg.com

server {
  listen       80 default_server;
  listen       [::]:80 default_server;
  server_name  abc.com;
  return 301 http://efg.com$request_uri;
}

server {
  listen       80;
  listen       [::]:80;
  server_name  efg.com;
  root         /usr/share/nginx/efg;
  index        index.html;
}

可參考此狀況下的 git commit

實驗結果：打開瀏覽器存取 http://abc.com 會自動轉址至 http://efg.com

實驗二：將 abc.com 底下的 origin.html 轉址至 efg.com 底下的 new.html

nginx.conf 檔案設定如下，我們需要在 server abc.com 底下加上 rewrite 將 origin.html 轉址到 efg.com 底下的 new.html

server {
  listen       80 default_server;
  listen       [::]:80 default_server;
  server_name  abc.com;
  root         /usr/share/nginx/efg;
  index        index.html;

  rewrite ^/origin.html$ http://efg.com/new.html permanent;
}

server {
  listen       80;
  listen       [::]:80;
  server_name  efg.com;
  root         /usr/share/nginx/efg;
  index        index.html;
}

實驗結果：存取 http://abc.com/origin.html 會轉址到 http://efg.com/new.html ，另外存取 http://abc.com 則不會轉址

實驗三：將 express.local 特定路徑參數網址轉址至 abc.com

nginx.conf 設定檔案如下：

server {
  listen       80;
  listen       [::]:80;
  server_name  express.local;
  location / {
    proxy_pass http://express:3000/;
  }
  location = /query {
    if ($arg_s = "abc") {
      rewrite ^ http://abc.com permanent;
    }
    proxy_pass http://express:3000/query;
  }
}

執行這個實驗會需要一個後端的 express 專案，所以我們會使用到 docker-compose 來建構這個架構。

docker-compose up --build

也記得將 express.local 加入到 /etc/hosts 檔案

127.0.0.1 express.local

實驗結果：存取 http://express.local/query?s=abc 會轉址到 http://abc.com/?s=abc ，另外存取 http://express.local/query/?s=123 則不會轉址

MORE更多文章