前言：

在前幾天的實作中，我們成功地讓 Notion Webhook 與本地的 n8n 服務串接起來了。然而，隨著專案的推進，我們也發現原本的設定方式存在一些管理上的不便與潛在風險：

1. 設定僵化：所有的環境變數，如 Webhook URL、帳號密碼，都直接寫死在 docker-compose.yml 檔案中。這導致每次更換穿隧工具或修改密碼，都需要直接編輯核心的服務定義檔。
2. 安全隱患：將密碼等敏感資訊直接存放在 docker-compose.yml 中，若不慎將此檔案上傳至公開的程式碼倉庫 (如 GitHub)，將造成嚴重的安全漏洞。
3. 憑證問題：zrok 在設定 n8n 中 Google Calendar 憑證時會有無法驗證的問題。

為了解決這些問題，我們決定對設定檔進行一次重構，採用更專業、更具彈性的架構，將所有可變的「設定」抽離到獨立的 .env 檔案中，讓 docker-compose.yml 只負責定義服務的「結構」。
在這次重構的過程中，我們也重新評估了穿隧工具的選擇。雖然 zrok 也可以使用，但 ngrok 作為業界最知名的工具，也有其操作極簡、社群龐大的優點。
為了驗證新架構的靈活性，我們決定嘗試將服務無痛切換至 ngrok。得益於新的 .env 設定檔，現在我們要切換穿隧工具，只需要修改 .env 檔案中的 WEBHOOK_URL 這一個變數，然後重啟容器即可，完美達成了我們期望的彈性與便利性。

替換 ngrok 作為通路

1. 下載 ngrok：前往 ngrok 網站下載符合您作業系統的版本。

2. 解壓縮與啟動：將下載的 zip 檔案解壓縮，並執行 ngrok.exe 。成功啟動後，您會看到 ngrok 的命令列介面。
   

3. 前往 ngrok.com 註冊一個免費帳戶
   

4. 登入後，導航至setup & installation ，複製指令
   

5. 將指令貼上到 ngok.exe 終端機並點擊 Enter，
   

6. 執行 ngrok 指令， 在你的終端機 (就是你截圖的這個視窗) 中，輸入以下指令並按 Enter：

   ngrok http 5678
   

7. 取得公開網址， 執行後，ngrok 會顯示類似下面的畫面。請複製 Forwarding 後面那串 https:// 開頭的網址。這就是你的新公開網址。
   

穿隧服務從 zrok 切換到更為人熟知的 ngrok

建立 .env 設定檔

首先，請在你的 docker-compose.yml 所在的同一個目錄下，建立一個名為 .env 的新檔案。

.env 檔案就像是我們服務的「設定清單」，所有的密碼、URL 和個人化選項都會放在這裡。請將下面的內容複製到你的 .env 檔案中，並填入之前設定好的資訊跟ngrok的資訊。

# 指定 n8n 的版本，'latest' 代表最新版
N8N_VERSION=latest

# 啟動 ngrok (執行 ngrok http 5678)，後將 ngrok 提供給你的公開網址貼在這裡
WEBHOOK_TUNNEL_URL=https://YOUR_NGROK_URL_HERE.ngrok-free.app/

# 告訴 n8n 要信任代理伺服器
N8N_TRUST_PROXY=true

# 你的 n8n 登入帳號和密碼
N8N_BASIC_AUTH_ACTIVE=true
N8N_BASIC_AUTH_USER=你的使用者名稱
N8N_BASIC_AUTH_PASSWORD=你的密碼

# 防止容器重啟時自動註銷 Webhook
N8N_SKIP_WEBHOOK_DEREGISTRATION_SHUTDOWN=true

# 設定你的時區
GENERIC_TIMEZONE=Asia/Taipei

重構 docker-compose.yml

現在，我們來修改 docker-compose.yml，讓它變成一個乾淨的「結構範本」，並從 .env 檔案中讀取所有設定。

請複製貼上即可，主要修改的部分在.env檔中。

version: '3.7'

services:
    n8n:
        image: docker.n8n.io/n8nio/n8n:${N8N_VERSION:-latest}
        container_name: n8n
        restart: unless-stopped
        ports:
            - "5678:5678"

        env_file:
            - .env

        environment:
            - GENERIC_TIMEZONE=${GENERIC_TIMEZONE}
            - WEBHOOK_URL=${WEBHOOK_URL}
            - N8N_TRUST_PROXY=${N8N_TRUST_PROXY}

            - N8N_BASIC_AUTH_ACTIVE=${N8N_BASIC_AUTH_ACTIVE}
            - N8N_BASIC_AUTH_USER=${N8N_BASIC_AUTH_USER}
            - N8N_BASIC_AUTH_PASSWORD=${N8N_BASIC_AUTH_PASSWORD}

            - N8N_SKIP_WEBHOOK_DEREGISTRATION_SHUTDOWN=${N8N_SKIP_WEBHOOK_DEREGISTRATION_SHUTDOWN}

        volumes:
            - n8n_data:/home/node/.n8n

        networks:
            - n8n-network

volumes:
    n8n_data:
        external: true

networks:
    n8n-network:
        driver: bridge

重啟服務與更新 Webhook

1. 重啟 n8n 容器：為了讓新的設定檔與架構生效，我們需要先關閉舊容器再以新設定啟動。

   docker-compose down
   

   docker-compose up -d
   

2. 更新外部服務的 Webhook URL：由於我們的公開網址已經變更為 ngrok 提供的 URL，您需要登入相關的第三方服務，將其 Webhook 設定更新為您 .env 檔案中的 WEBHOOK_URL。這包括：

   • Notion 整合 Webhook 設定：https://ithelp.ithome.com.tw/articles/10395346
   • Google Calendar 憑證設定：https://ithelp.ithome.com.tw/articles/10390375

完成後，您會發現不僅 Webhook 可以正常觸發，之前 zrok 遇到的 Google Calendar 憑證問題也迎刃而解。

結語：

在 IT 鐵人賽的第 28 天，我們完成了一次從「能用」到「好用」的關鍵進化。

透過引入 .env 檔案，我們成功地實踐了設定與結構分離的核心原則，這不僅大幅提升了專案的安全性與可維護性，更賦予了我們未來輕鬆切換元件（如資料庫、穿隧工具）的靈活性。

這次重構不僅修正了先前遇到的 Google Calendar 憑證問題，更重要的是，它建立了一個更專業、更接近生產環境標準的部署基礎。良好的架構如同堅實的地基，將支撐我們在接下來的挑戰中建構更複雜、更強大的自動化流程。

感謝您的閱讀，我們明天將在這個全新的基礎上繼續前行！