接下來就倒數七天的文章了，今天想先闡述一下目前的架構，以及後續的佈署。

前後端分離，所以目前有兩個網站

兩個網站描述如下：

使用 Vite + Vue 3 + Vue Roter 架設起的 Web APP

是屬於 SPA，也就是單頁(一個 html 檔)應用程式，其實不一定要單頁，想做多頁(多個 html 檔)也是可以的，所以它的產出算是靜態頁面(Static Site Generator)；另外有的人可能為了想要做 SSR(Server Side Rending)，可能會在做些調整，但其實筆者個人不太喜歡用這樣的架構去做 SSR，因為若要做 SSR，筆者就會選擇使用 MVC 模式(例：Node.js + Express、PHP + Laravel)就好，已經是非常成熟且很棒的技術了。所以不會想用 Vue 去做 SSR，少研究一點，人生比較開心。

使用 Deno 做的 GraphQL API

這邊選用 Deno，其實對筆者來說，是個很大的挑戰，畢竟它太新了，而且也很少有人開始用，所以資料的查找上，實屬困難。過去使用 Node.js 時，最不喜歡的就是 node_modules 資料夾，因每次打開來，就是一大堆不知道在幹麻的東西(其實很有用啦，哈)，使用 Deno 就可以讓我不用再看到它，覺得很不錯(很膚淺的原因)。Deno 是 Node.js 原創者(Ryan Dahl)的新產物，相關優缺點可以 google 查一下。另外使用 GraphQL 也發展了多年，但筆者一直沒有開發過，過去都是使用 RESTful 的 API 撰寫模式，所以藉由這次的比賽，也讓自己寫一下 GraphQL API，覺得不錯，尤其在串接 API 時，可以自己選擇要回傳哪些欄位，光是這點就很不錯了。

藉由以上的描述，所以目前有兩個網站，估且稱之為 Web APP、GraphQL API。

佈署

Web APP

會先使用 vite 當中的 build 指令，產出靜態網站，然後傳到 GitHub，再佈署到 DigitalOcean 的 Apps 服務。

GraphQL API

GraphQL API：會打包成 Docker 的映像檔(Image)，該映像檔會傳到 DigitalOcean 的 Container Registry 服務做 private 映像檔的儲存，然後該映像檔會使用 DigitalOcean 中的 Apps 服務來啟動容器(Container)。

心得

以上方式，會發現都是佈署到 DigitalOcean，而不是 AWS 或其它，原因很簡單，就比較沒什麼錢，AWS 畢竟不便宜，費用滿細的。後來決定使用成本較好拿捏的 DigitalOcean，也用了很多年，目前也還沒特別想換。
這邊提供 DigitalOcean 的推薦連結，有興趣使用的，也可以使用看看，您會得到一些金額的折抵。

另外這樣的佈署會發現，好像沒有提到伺服器，對，這也是我新的嚐試，也不曉得能不能設定成功，也就是不太想管基礎架構(Infrastructure)的部份，筆者現在有時連打指令都懶，也不想像早期那樣常跑機房，想專注在應用的部份，基礎架構現在雲端服務都很方便，花一點錢，讓別人賺，相信專業，也可以讓自己的輕鬆一點。當然如果是大企業要擁有自己的資料中心(Data Center)就另當別論了。

結語

佈署過程，會不會遇到什麼樣的問題呢？試試看吧！