Q: 真的能用 Vibe Coding 把 App 做到上架嗎?
A: 做到了。不過如果條件是「商用、且要安全」,我覺得對非工程師來說,現在還是很吃力。
自從 ChatGPT 出現後,已經過了幾年,像 Cursor、Claude Code 這類專注於程式開發的 AI 工具逐漸普及,「就算不會寫程式,也能做 App」的說法也開始流行。X 的時間軸上,也幾乎每週都會看到只靠 AI 做出 SaaS、達成每月經常性收入(MRR)幾萬元的貼文。
Vibe Coding 這個詞也漸漸固定下來了。意思就是「靠感覺寫程式」,也就是在 AI 的協助下,自己不太理解程式內容,邊下指令邊把 App 做出來的方式。
這絕不是要否定 Vibe Coding。AI 讓開發門檻下降,讓更多人能把想法做成產品,我認為這是非常棒的事。
而且,這也絕對不是在帶風向。
這次我實際在個人開發中使用 Claude Code,真的把 App 做到上架;在過程中,我也切身感受到:非工程師到底能不能真的把 App 上架?我想把我現在最真實的想法寫下來。
我原本就有 AWS 基礎架構建置經驗,也能寫一些簡單的 JS,算是工程師。這次才第一次比較正式地接觸 TypeScript 和 Next.js。
這次我使用 Claude Code,從 0 開始打造了名為 Engy 的 AI 英語學習 Web App,並上架到 Web 與 Apple App Store。
這是一個運用 AI 的英語四技能學習平台,主要功能如下:
基礎架構是完全 AWS 無伺服器化(Lambda + DynamoDB + Cognito + CloudFront + Bedrock AgentCore),Web 端付費透過 Stripe,iOS 端透過 Apple IAP(RevenueCat),行動版則使用 Capacitor 打包成 iOS App 並上架到 App Store。


如果有興趣,歡迎試用看看。
先說明一下,這次我沒有使用 Vercel、Firebase、Supabase、Replit Agent 這種「只要輸入點子就會一路幫你部署到完成」的服務。若有使用那些工具,情況可能會不一樣。
不過在維持實務等級的資安,同時以商用服務形式上架這個條件下,我覺得現階段對非工程師來說仍然很難。以下我具體說明原因。
我因為有工程師經驗,所以看到「IAM 最小權限已經設定、JWT 驗證有做、Webhook 有做簽章驗證、WAF 也加上了」這種狀態時,可以判斷「至少基本盤有顧到」。這種感覺來自經驗,很難用系統化方式完整說明。(即使如此,心裡還是會想:如果被攻擊而出事怎麼辦……)
對非工程師的 Vibe Coder 來說,會缺少這條 「做到哪裡才算安全」的基準線。
最近因攻擊而導致個資外洩,或是把 API Key 誤提交到 GitHub、進而被濫用的新聞越來越多。這些往往不是「因為沒知識才發生」,而是「因為不知道問題是什麼,所以沒察覺」所導致的事故。即使 AI 幫你寫程式,也可能產生不小心含有資安問題的程式。AI 擅長的是「寫出能動的程式」,但要「全面指出程式裡潛藏的風險」,那是另一回事。
在一知半解的情況下按下上線按鈕,連工程師都會怕。反過來說,隨著你一步步搭建系統、累積知識,了解得越多,越會看見風險,最後也會跟工程師一樣開始害怕。
Engy 使用的 AWS 服務幾乎都是無伺服器按量計費。Lambda、DynamoDB、API Gateway 只有真的有請求進來時才會產生費用。沒人使用時幾乎是 0 元,就算流量暴增,也可以透過上限設定控制住。因為我知道這些,所以能安心使用。
但對不熟 AWS 的人來說,雲端總會讓人覺得:「如果一直開著,會不會收到很高的帳單?」「萬一哪裡設定錯了,費用會不會無上限?」這種不安其實很常見。網路上也真的找得到因設定錯誤而產生數百萬日圓帳單的案例。
在不清楚「哪個服務會花多少錢」的情況下往前走,會很難。這也是建立在工程師知識上的前提。
你可能會說:「可是資安和成本,AI 也可以幫你教啊,那就連這些都不用擔心了吧?」如果預算夠,也許可以。但 Vibe Coding 還有一個很大的難點,我想再談一次。
假設你對 AI 說:「資安沒問題嗎?全部幫我確認一下。」AI 會回你一些答案。然而系統規模越大,要判斷這些答案是否真的完整,最終還是取決於下指令的人的知識量。
AI 的表現,和輸入品質成正比。到了 Coding Agent 的時代,這件事仍然沒有改變。
舉個例子。若要系統性檢查 AWS 的安全設定是否合理,可以使用 AWS Security Hub。它會依照 CIS 基準與 AWS 最佳實踐,自動找出設定問題。知道這個工具的人,就能指示 AI:「請用 Security Hub 幫我確認。」不知道的人,則很難從 AI 身上把 Security Hub「問」出來。
成本面也是一樣。Bedrock 有一個叫做 Prompt Caching 的功能,當你反覆送出同一個提示詞的前半段時,可以利用快取降低 API 成本。知道這個功能的人,就能要求 AI:「請實作 Prompt Caching。」但如果你根本不知道它存在,就不會有「要用它」的想法。
同樣地:
這些都是「知道了就能用」的工具或方法;但如果你連這些詞都不知道,就連去問 AI 的契機都不會出現。Coding Agent 通常會優先處理「把功能做出來」。沒有寫進提示詞的審查與驗證,往往就會被往後擺。
這不只適用於 AI。你找工程師幫忙時也是一樣,如果只說「資安麻煩幫我處理」,通常很難精準傳達你要他檢查什麼。不過工程師會根據經驗去解讀:「你是指認證流程嗎?還是傳輸加密?」AI 目前還沒辦法像人類工程師那樣可靠地補完這種上下文。
我認為,Vibe Coding 能做出來的 App 品質上限,取決於下指令的人有多少知識。AI 可以代替你寫程式碼,但無法代替你判斷要做什麼、要檢查什麼。
另外,如果你一路都在一邊做一邊問 AI,成本也不能忽視。Claude Code 的 MAX 方案每月要 200 美元,在還沒賺到錢的情況下持續投入這筆費用,壓力其實不小。
接下來我會列出在 App 上架過程中,實際遇到的卡關點,以及我認為 Vibe Coder 應該特別注意的地方。
在開始使用 AWS 之前,建議先看像是 AWS 中的資安基本概念 這類文章,先掌握應該設定哪些項目。
不需要一開始就全部做完,但如果要作為商用服務運營,能做的最好都做。只是資安強化與成本之間有些地方本來就存在取捨,所以還是得一邊評估優先順序一邊推進。
這次我做了以下設定:
和資安一樣,成本管理的基本設定也應該一開始就先完成。AWS 是按量計費,若有設定錯誤或預期外的流量暴增,等到發現時帳單可能已經很可觀了。
這次我做了以下設定:
這次 Speaking 使用 Amazon Nova Sonic,Writing 使用 Nova Pro,但這兩個模型在東京區域的預設配額都非常小。新帳號的情況下,同時連線數可能只被分配到 Nova Sonic 1、Nova Pro 10 左右。即使提出提高配額的申請,如果帳號沒有使用實績,也常常不會通過,只能先累積使用紀錄。不了解這點就直接設計架構,後面卡住是很典型的坑。模型選型要和區域、配額一起確認,這是我這次最大的學習之一。
DynamoDB 和關聯式資料庫(RDB)的設計思維根本不同。RDB 可以先隨便建表,再慢慢想查詢;但 DynamoDB 需要一開始就決定 Partition Key 和 Sort Key,之後要改幾乎等於整張表重做。
這次隨著功能增加,表也越來越多。像是課金生命週期管理(訂閱狀態、更新日期、方案變更紀錄)、AI 功能的每月使用次數重置、Speaking/Writing 各自的使用紀錄等,都有不少是後來才想到「這個資料需要存」而追加的。若能先整理好存取模式,表設計其實可以更乾淨。
在 Vibe Coding 時,如果太優先追求「先動起來」,資料設計很容易被往後擺。但不只 DynamoDB,資料模型本來就是後改成本很高的東西。最好在建立資料表前,先把需要哪些查詢完整想過一輪。
我在 Cognito 實作 Apple Sign In 時,一度連正式環境在內都得把 User Pool 重建一次。
我把 Cognito 的 email 屬性設成 mutable: false,但 Apple Sign In 在第二次之後登入時,會從 IdP 再次送出屬性。這時 Cognito 會判定「這個 email 屬性不能更新」,導致第二次以後的 Apple 登入失敗。
Cognito 的 User Pool Schema 設定在建立後無法修改。 你想把 mutable: false 改成 true,AWS CLI 和 CDK 都會報錯。再加上 Apple Sign In 的規格就是只在首次認證時才送使用者資訊,如果事先不知道也很容易踩雷。第二次以後只會送 ID Token 的 claims。若要在該 ID Token 中包含 email claim,就必須在 Apple IdP 的 scope 中加上 email;但 CDK 預設只有 name。scope 不夠時,ID Token 內就不會有 email,而 email: required: true 的 User Pool 便會在第二次登入時擋下來。這也是無法事後修改、只能重建的設定。
一旦重建 User Pool,AgentCore Runtime 的 JWT 驗證設定、API Gateway 的 authorizer、iOS App 的 Pool ID / Client ID 全都要重做,影響會一路擴散。和 DynamoDB 一樣,最初設計判斷一旦錯了,後面修正成本會暴增。
Next.js 大致有兩種運作方式。靜態匯出(Static Export)是把 HTML/CSS/JS 在建置時產生好,放到 S3 就能運作。因為不需要伺服器,所以成本低,也可以透過 CloudFront 發佈。另一方面,伺服器模式(SSR)則是在每次請求時由伺服器動態產生 HTML,因此可以依照使用者顯示不同內容,也能為 SEO 動態產生 meta tag。電商網站或新聞媒體比較適合這種方式。
這次我選擇把網站以 S3 + CloudFront 的靜態方式部署。因為使用者個人資料會在登入後再透過 API 取得,所以靜態匯出就已經足夠。不過這也代表 Next.js 內建的 API 功能(Route Handlers)無法使用,後端全部都得另外用 Lambda 實作。
而且這個選擇之後若要改,幾乎等於整個託管架構都要一起換。如果未來想「每個頁面動態產生 OGP,方便在社群分享」,或「回傳對搜尋引擎友善的動態內容」,從 Static Export 轉到 SSR 會需要相當的工時。最初就先思考 SEO 和伺服器功能要用到什麼程度,之後選擇會更寬裕。
要以 iOS App 形式上架,通常會在 Capacitor、React Native、Swift(原生)之間做選擇。這也是一個一旦選下去,之後幾乎等於重寫全部的決定。
老實說,這次我一開始並沒有打算直接上 App Store。原本只是一路用 Next.js 做 Web App,後來才剛好知道可以用 Capacitor 直接包成 iOS App,於是後續才補上這部分。結果是成功了,但如果一開始就是以 mobile-first 設計,可能會選別的方案。
選擇標準其實很簡單:你想和 Web 共用多少程式碼。
| 方式 | 與 Web 的程式碼共用 | UX 品質 | 適合情境 |
|---|---|---|---|
| Capacitor | ◎ 幾乎直接沿用 Web | △ | 想把 Web App 原封不動變成 iOS App |
| React Native | ○ 邏輯可共用 | ○ | 想重視行動端 UX |
| Swift(原生) | × | ◎ | 需要完全原生等級的體驗 |
如果一開始就有要往行動裝置延伸的計畫,這個方向最好和 Web 技術選型一起決定。我這次用 Capacitor,基本上沒有感受到太大的落差。
比我預期多很多的工作,其實都不是寫程式本身。尤其是 App Store、法規要求、領域知識、收費相關,真的應該提早處理。
要以 iOS App 上架,除了程式碼以外,還有大量額外工作。而且其中很多都需要 Apple 生態系專屬知識,門檻其實不低。
Xcode 只能在 Mac 上跑,所以編譯環境需要 Mac。這次我用 GitHub Actions 的 macOS runner 來自動化建置,因此即使手邊沒有 Mac 也能處理。不過那套設定本身也花了不少工夫。實機測試則還需要 iPhone。
另外還有:
altool / xcrun 上傳,步驟相當複雜要推出有收費功能的服務,除了程式之外,還需要以下文件:
這些文件可以讓 AI 先產出草稿,但內容是否符合自己的服務、是否有法律問題,仍然必須自己確認。若之後才發現標示不完整,會影響信任。
服務名稱決定後,最好儘早把網域買下來。等開發到一半才發現「那個網域已經被註冊了」,就會被迫連服務名稱一起重想。
想要的 TLD 常常早就被註冊光了。現在 .ai 在 AI 相關服務裡很熱門,但年費也可能高達數萬日圓,應該要先把這筆初期成本算進去。Engy 選的是 .academy,不同 TLD 也會影響品牌給人的印象。
另外,從取得網域後開始,還會有 Cognito、CloudFront、寄信服務(SES)等的自訂網域設定要做。若之後才換網域,這些設定都得重來,所以越早決定越輕鬆。
要做訂閱制收費,首先得理解 SaaS 的收費模式本身。看似只是「加入月費方案,下一個月自動續訂」的簡單流程,背後其實藏著很多狀態轉換。
這些都會以 Webhook 事件通知,但要如何針對每種事件更新資料庫欄位,還是得自己設計。只對 AI 說「幫我接 Stripe webhook」的話,很難期待它正確涵蓋所有這些狀態轉換。
收費設計是 SaaS 的根本,這裡若出錯,會直接造成「明明取消了還被扣款」「方案變更沒有生效」之類的使用者問題。比起先寫程式,先把自己的收費規則用文字清楚定義出來更重要。
AI 很擅長產生程式碼,但要找出「為什麼不能動」則是另一回事。像這種無伺服器架構,請求會經過 CloudFront → API Gateway → Lambda → DynamoDB 等多層,所以即使症狀都叫做「API 沒回應」,原因也可能完全不同:
要確認「到底卡在哪一層」,可以看瀏覽器 DevTools 的 Network 分頁,也可以到 AWS Console 查看 API Gateway、Lambda 的指標與日誌。CORS 錯誤不會出現在 Lambda 日誌裡,只能在瀏覽器端看到;而有些錯誤根本沒到 Lambda,只會出現在 AWS Console。要能切分問題,最好同時準備多種手段。
另外,根本沒有把必要的日誌打開 也是常見問題。API Gateway 的 Access Log 預設是關閉的,不啟用就不會記錄請求。Vibe Coding 一路把功能堆上去,如果把日誌設定拖到最後,本機或正式環境出問題時就會完全沒有線索。
Vibe Coding 很容易掉進一個陷阱:做出一套「能動,但自己說不清楚」的系統。你不一定要一行一行都看懂,但至少要掌握到「它是怎麼運作的」這個層級。
例如:
如果在完全答不出來的狀態下就上線,之後出問題時你就只能一直依賴「問 AI 看看能不能解決」。但 AI 也有極限,尤其當 session 中斷、上下文消失後,要精準掌握狀況並下對指令,最後還是得靠人。
所謂「理解 AI 做出來的東西」,不是指你要把程式逐行背起來,而是要能用自己的話說明系統結構、資料流向、判斷依據。如果做不到,每次加功能時你都會越來越搞不清楚「和前一版到底差在哪裡」,技術負債就會一直累積。
實務上很有用的方法,是把設計意圖與「為什麼這樣做」記錄到檔案裡。當 AI session 中斷、上下文遺失時,只要文件還在,就能更順利地接續下去。把專案方針、限制條件、決策結果寫進 .md 裡,新 session 也比較容易維持一致行為。把「理解」和「留下紀錄」一起做,會比較好。
AI 可以寫程式,這真的很厲害,也確實大幅提升了工程師的開發速度。就連我這次也是,第一次比較正式地使用 TypeScript 和 React,卻仍然成功把一套 AWS 全無伺服器架構系統做出來,並完成 Web 與 App Store 上架。
但 Vibe Coding 無法跨過的是判斷與責任。
AI 會把這些問題的「答案」端給你,但最後能不能判斷這是不是對你的系統正確的決策,終究還是只有人能做。
完全非工程師如果先用 Vercel、Firebase 這類簡化工具做出原型,我覺得是可行的。但如果要以商用服務形式、安全地、可擴充地,並且整合收費後正式上線,我仍然覺得需要對基礎架構、資安與領域知識有一定理解。
這裡所說的「理解」,不是指你要把某個服務的用法研究得很深,而是要理解:有哪些攻擊手法、系統是怎麼運作的、脆弱點通常會出現在哪裡——這類系統性的概念。個別服務怎麼用,可以透過 AI 補;但「要注意什麼」這種視角,AI 不會自動幫你長出來。
寫程式的能力可以由 AI 代替。也因此,理解 AI 生成的程式碼的能力,以及判斷要做什麼、要檢查什麼的能力,才是我這次實作後真正感受到被要求的技能。
最後感謝你讀到這裡。
這次介紹的 Engy,是一款運用 AI 的英語四技能學習 App。它把 AI 即時英會話練習(AI Speaking)、英文作文自動批改(AI Writing)、文法測驗與字彙學習等功能整合在一起,讓日常英語學習可以集中在同一個 App 裡。Web 瀏覽器與 iOS App 都可以使用。
從免費方案就能開始試用,如果你對英語學習有興趣,或想實際跟 AI 對話看看,歡迎試試。也很歡迎你分享使用心得,或告訴我希望改進的地方。
原文出處:https://qiita.com/yutaka_kozuka/items/cc3be5930b972130885d