--- title: 從零打造微前端 + Golang 後端的全端架構實作 tags: - microfrontend - vuejs - react - golang - cicd - fullstack - github-actions - docker - gcp --- <h1>🧩 從零打造微前端 + Golang 後端全端架構：Vue、React、Gin、GCP 一條龍實作分享</h1> <blockquote> 使用微前端架構整合 Vue 與 React、結合 Go 後端、部署到 GCP，這是我近期完整實作的一套全端應用架構。這篇文章將分享整體設計邏輯、實作過程、部署方式與開發心得，希望對正在進行類似架構設計的你有所幫助。 </blockquote> <h2>🧱 架構總覽</h2> <p>這套應用的全端架構分為三大部分：</p> <ol> <li><strong>前端（Micro Frontends）</strong></li> <li><strong>後端（Golang + Gin REST API）</strong></li> <li><strong>CI/CD + 部署（GitHub Actions + GitHub Pages + GCP VM）</strong></li> </ol> <p>📌 使用 Single-SPA 整合 Vue/React 子應用，後端則以 Go + Gin 實作 API，透過 Docker 部署至 GCP。</p> <p><img src="https://raw.githubusercontent.com/WaltHuang-1412/micro-dev-runner/main/MicroWebsite.png" alt="Architecture Overview"><br> <em>（請替換為你的圖片連結）</em></p> <h2>🧩 前端架構：Micro Frontends + Single-SPA</h2> <p>我使用 Single-SPA 作為微前端容器，讓 Vue 和 React 子應用可以共存並獨立開發、獨立部署。</p> <h3>📦 子應用列表：</h3> <ul> <li><strong>@vue-micro/root</strong>：Single-SPA 容器</li> <li><strong>@vue-micro/navbar</strong>：Vue CLI ➝ 導覽列</li> <li><strong>@vue-micro/sub</strong>：Vue + TypeScript + vue-draggable-plus ➝ Plans 模組</li> <li><strong>@vue-micro/auth</strong>：React + react-hook-form + yup ➝ 登入註冊模組</li> </ul> <h3>🔧 前端技術特色：</h3> <ul> <li>SCSS + BEM 命名規則</li> <li>Vue 使用 Element Plus，React 使用 Material UI</li> <li>JWT Token 儲存在 <code>localStorage</code></li> </ul> <h2>🔐 後端設計：Golang + Gin + MySQL</h2> <p>後端採用 Go + Gin 框架，搭配 GORM 操作 MySQL，並使用 <code>golang-migrate</code> 管理資料表 schema。</p> <h3>✨ API 模組功能：</h3> <ul> <li><code>/register</code>, <code>/login</code>：JWT 登入機制</li> <li><code>/profile</code>：取得目前登入使用者資訊</li> <li><code>/sections</code>, <code>/tasks</code>： <ul> <li>巢狀資料結構（section → tasks）</li> <li>排序邏輯（<code>sort_order</code>）</li> <li>所有資料與 <code>user_id</code> 綁定</li> </ul> </li> </ul> <h3>開發工具：</h3> <ul> <li>Swagger（swaggo）自動產出 API 文件</li> <li>JWT Middleware 控制權限與驗證</li> </ul> <h2>🚀 CI/CD 與部署流程</h2> <h3>🎯 前端部署：</h3> <ul> <li>各子應用使用 GitHub Actions 自動部署到 GitHub Pages</li> <li>每個子應用擁有獨立 repo + workflow</li> </ul> <h3>🖥 後端部署：</h3> <ul> <li>後端與 MySQL 打包為 Docker Compose 專案</li> <li>GitHub Actions + SSH 自動部署到 GCP VM</li> <li>使用 Nginx + Certbot 自動簽發 SSL 憑證</li> </ul> <h2>🧠 開發心得與亮點</h2> <ul> <li>Vue/React 共存微前端架構開發體驗極佳</li> <li>Single-SPA import-map 與 route 管理彈性高</li> <li>Plans module ➝ 支援巢狀結構、拖曳排序、自動 sort_order</li> <li>golang-migrate 協助維護資料結構版本一致性</li> <li>CI/CD 部署全自動化大幅提升效率</li> </ul> <h2>🗣 你也在做類似架構嗎？</h2> <p>如果你也正在打造微前端應用、或者從 Vue/React 跨入 Golang 領域，歡迎留言交流，也歡迎分享到 LinkedIn 或 GitHub！</p> <p>👉 <a href="https://github.com/WaltHuang-1412">GitHub Repo（可放上）</a><br> 👉 <a href="https://www.linkedin.com/in/walter1412/">LinkedIn 名片連結（可放上）</a></p> <h2>💬 Follow Me</h2> <p>我會持續分享更多架構實戰、微前端開發與 Golang 應用技巧，歡迎追蹤 Medium 👋</p>