---
# System prepended metadata

title: "\U0001F9E9 從零打造微前端 + Golang 後端全端架構：Vue、React、Gin、GCP 一條龍實作分享"
tags: [cicd, vuejs, microfrontend, fullstack, docker, react, gcp, golang, github-actions]

---

---
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>