iT邦幫忙

2026 iThome 鐵人賽

DAY 25
0
Vibe Coding

從零打造 AI 全端應用:Vibe Coding 結合 n8n 視覺化工作流實戰系列 第 25 篇

# Day 25:App 上架前的最後防線:Xcode 大掃除與 n8n 正式環境切換

  • 分享至 

  • xImage
  •  

Day 25:App 上架前的最後防線:Xcode 大掃除與 n8n 正式環境切換

嗨,大家今天過得好嗎?歡迎來到鐵人賽 Day 25。

昨天我們成功將 n8n 與 PostgreSQL 部署上了雲端 VPS,並且掛上了網域與 HTTPS 安全憑證。現在,後端已經準備好迎接真實世界的使用者了。

但我們的前端 iOS App 狀態還停留在「開發者快樂版」。
程式碼裡寫死了 http://192.168... 的 IP 位址,Info.plist 裡面還留著為了偷懶而打開的不安全連線後門。如果現在把這包 Code 包裝起來丟上 TestFlight 或是提交 Apple 審查,下場絕對是被秒退件。

今天,我們要進行上架前的最後大掃除:收攏環境變數、關閉資安漏洞,並正式啟動 n8n 引擎。

第一步:關閉 ATS 資安後門 (App Transport Security)

還記得我們在 Day 11 踩坑時,為了讓 App 能連上本地端沒有 HTTPS 的 n8n,而在 Info.plist 裡加了一行設定嗎?現在,是時候把它請出去了。

  1. 打開 Xcode,找到專案設定裡的 Info 頁籤(或是左側的 Info.plist 檔案)。
  2. 找到 App Transport Security Settings。
  3. 把裡面的 Allow Arbitrary Loads 屬性直接刪除(或是把值從 YES 改回 NO)。

拔掉這個後門後,iOS 系統就會重新啟動最高級別的網路安全限制。從現在開始,你的 App 只要敢發送 http:// 的明文請求,就會被系統強制擋下,這也是 Apple 審查團隊要看到的標準狀態。

第二步:抽離寫死的 API 網址 (Environment 實踐)

在 Day 22 時,我們的 APIService.swift 裡面的網址是直接寫死的字串。
這在開發初期沒問題,但到了現在,我們會有「開發環境 (Localhost)」跟「正式環境 (VPS Domain)」兩種網址。如果每次發布都要用 Ctrl+F 尋找取代,總有一天會改漏。

請打開 APIService.swift,我們來做一個簡單的重構。在檔案最上方加入這段環境設定:

import Foundation

// 建立一個環境配置結構
struct APIConfig {
    // 開發時將這個布林值設為 true,上架前改為 false
    static let isDebug = false 
    
    static var baseURL: String {
        if isDebug {
            return "[http://192.168.](http://192.168.)X.X:5678/webhook-test" // 你的本地測試網址
        } else {
            return "[https://api.my-ai-hardware.com/webhook](https://api.my-ai-hardware.com/webhook)" // 你的雲端正式網域
        }
    }
}

接著,把 fetchRecommendation 和 fetchHistory 裡面的網址換成動態組合的變數:

// 將原本寫死的網址:
// let urlString = "[http://192.168.](http://192.168.)X.X:5678/webhook-test/recommend"

// 改為:
let urlString = "\(APIConfig.baseURL)/recommend"
guard let url = URL(string: urlString) else { throw URLError(.badURL) }

這樣一來,以後你只要切換 APIConfig.isDebug,就能一鍵將整個 App 的連線切換於開發與正式環境之間。這才是專業全端工程師該有的專案架構。

第三步:喚醒 n8n 的「生產模式 (Production)」

前端準備好了,現在打開你雲端 VPS 上的 n8n 後台。這一步非常關鍵,無數新手死在這裡。

如果你現在直接用 App 打 API,你會收到 404 Not Found 的錯誤。
為什麼?因為你在雲端寫的 APIConfig.baseURL 是 /webhook,而我們這 20 幾天來在 n8n 測試時,網址都是 /webhook-test。

n8n 的 Webhook 機制解析:

  • /webhook-test/...:專門給開發者測試用的。你必須在畫面上點擊 Execute Workflow,它才會開始監聽,而且只會監聽「一次」。
  • /webhook/...:這是正式環境網址。它會在背景 24 小時常駐監聽,隨時準備接客。

啟動正式環境的步驟:

  1. 確認你雲端 n8n 的工作流邏輯、參數、JSON Schema 都已經設定完美。
  2. 看到 n8n 畫面右上角,有一個大大的 Inactive 開關。
  3. 把它點下去,變成綠色的 Active。

就這麼簡單!一旦啟用,n8n 就會自動在背景啟動正式版的 Webhook。
現在,拿起你的 iOS 模擬器或實體機,確認 isDebug 設為 false,點擊「產生推薦菜單」。

兩三秒後,來自遠端 VPS、穿透 HTTPS 加密通道、經由真實 PostgreSQL 與 OpenAI 推理的精美菜單,完美地展現在你的手機畫面上!

小結

今天我們完成了「從測試環境切換到生產環境」的所有標準動作。拔掉了不安全的後門、抽離了環境變數,並正式 Activate 了 n8n 工作流。

你的專案已經是一套具備安全與商業水準的全端應用了。
但身為一個要上架的 App,我們還差一點點「包裝」:App 總不能沒有圖示 (Icon) 吧?載入時總不能是一片黑畫面 (Launch Screen) 吧?

明天,我們要在 Xcode 進行上架前的「美術與細節拋光 (Polish)」,為踏入 TestFlight 封測做最後的準備!

我們 Day 26 見!


上一篇
Day 24:告別 Localhost:將 n8n 與資料庫部署上雲端 (VPS) 的實戰指南
系列文
從零打造 AI 全端應用:Vibe Coding 結合 n8n 視覺化工作流實戰 共 25 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言