大貓日誌的專案架構

目錄

1. 架構概述
2. 緣由
3. 說明
   1. Gatsby
   2. Strapi
   3. Netlify
   4. Google Cloud Platform
   5. Heroku
   6. 流程概要
4. TODO

架構概述

緣由

因為有興趣的技術在現行的工作上一直沒有使用的機會，於是決定自己架設個部落格，用來記錄和練習。

說明

GatsbyJS

GatsbyJS 是一個靜態網頁產生器（Static Site Generator），我在工作的專案中有使用過，由於開發體驗不錯，再加上部落格的性質很適合靜態網頁，於是決定採用 GatsbyJS 作為前端開發工具。

Strapi

Strapi 是一個無頭 CMS（Headless CMS），當初偶然搜尋到這個名字而認識到了 Strapi，而現行的公司剛好也正在使用其他的 CMS，為了想要對照兩者差別和熟悉使用 CMS，於是決定使用 Strapi 作為後端。

當然，懶得寫後端也是一個原因，可能之後再另外開一個後端的專案來玩玩哈哈

另一個使用 Strapi 的原因是，透過擴充功能可以自動產生 GraphQL 指令，恰好可以和 GatsbyJS 完美結合。

Netlify

Netlify 被我用來部署和代管前端，會使用 Netlify 其實沒有甚麼特別原因，單純只是在參考了 GatsbyJS 的說明文件後，決定使用 Netlify 來部署。

Google Cloud Platform

和 Netlify 不同的是，Google Cloud Platform 其實一開始就是我的學習目標，所以決定透過 GCP 的 App Engine 來部署 Strapi。

Heroku

之所以會臨時（11/09）追加 Heroku，其實是因為我沒有注意到 Google Cloud Platform 的 Cloud SQL 沒有包含在免費方案，而且出乎意料地非常燒錢，短短兩周就把 300 美元的配額消耗得一乾二淨。

在 Google Cloud Platform 的帳單資訊中，篩選器裡抵免額選項預設是被啟用的，帳單資訊只會顯示扣除抵免額後的花費，因此總是顯示花費 0 元🤦‍♂️。

在調查過其他平台後，決定先暫時將資料庫部署在 Heroku，以目前的使用量來說，Heroku 的方案完全符合我對資料庫的需求，等之後需求有所改變再考慮其他付費的平台。

流程概要

前端

1. 將 GatsbyJS 專案 Push 到 Github。
2. 在 Netlify 新增專案，並且連結到 Github 版本庫。
3. 在 Netlify 設定 Strapi 相關的環境變數。
4. 在 Netlify 建立 hook，hook 會被使用於 Strapi 的 Webhook中，當 Strapi 內容更新時，會通知 Netlify 進行建置和部署專案。

後端

1. 本地端新增 Strapi 專案，並且新增內容型別。
2. 安裝 Graphql 等擴充功能。
3. 在本地端透過 GraphQL Playground 來測試 Graphql。
4. 新增 GCP 專案、建立 App Engine
5. 安裝 Cloud SDK。
6. 上傳 Strapi 專案。
7. 在 Strapi 新增 Webhook，將 Netlify 的 hook 的連結貼上，接著勾選要通知 Netlify 的時機。

以上完成之後，大致上的架構就已經建立好了，之後只要持續更新 GatsbyJS 專案、用 Strapi 寫文章就可以了。

備註

• 網域名稱、SSL 等等設定並沒有包括在內，之後可能會透過別的文章記錄。
• 具體流程會在之後以別的文章詳細描述。

TODO

下列是有興趣、有可能出現在大貓日誌的事項

• 使用 GatsbyJS 開發
• 使用 Strapi
• 使用 Netlify 部署和代管前端
• 使用 Google Cloud Platform
• 購買自己的網域名稱
• 使用 WebGL

參考連結

• Gatsby
• Strapi
• Netlify
• Google Cloud Platform
• Heroku