佈署ReactJS App到 App Engine

前言廢話：

最近需要佈署React App 到 Google App Engine
過程還遇到蠻多問題的 來寫個筆記壓壓驚

---

App Engine 有兩種環境 分別為 standard 和 flexible

standard有免費使用額度 用完才會開始計費  flexible則沒有這個優惠
兩種環境的比較如下圖

<圖1>

以下用standard environment作範例

在開始之前 記得先安裝Cloud SDK
裝完後切換到專案目錄下
在 command視窗下 鍵入

  gcloud init

之後會要你登入GCP 和選擇project 跟著步驟選就OK


React 的專案目錄大約如下：

App
|-------- build   ======>這個要build過才有
|-------- node_modules
|-------- public
|-------- src
|-------- .gitignore
|-------- package.json
|-------- package-lock.json

我們需要跟App Engine說 如何去佈署一個service
在根目錄下建立一個  app.yaml 檔案
檔名可以隨意 通常的命名規則為 AppName_ServiceName.yaml

檔案內容大概為：

  #執行環境 standard 只有 'nodejs10' & 'nodejs12' 可以選
  runtime: nodejs10
 
  #每個instance的類別 各類的差別請參考圖2
  instance_class: F2
 
  #這個設定要參考 圖2 的 Supported Scaling Types 來做設定
  #不過大致上可以分 F開頭的 用 automatic scaling
  #B開頭的可以用 manual_scaling & basic_scaling
  #max_instances 可以設定最大的instance數量
  automatic_scaling:
    max_instances: 5
 
  #這裡可以設定如何處理 url pattern
  #App Engine 可以根據不同的 pattern來執行不同的 application
  #當然還有靜態的檔案 ((CSS 圖片 JavaScript之類的
  #我就不解釋這部份了 文件裡面都有寫
  #附上網址  https://cloud.google.com/appengine/docs/standard/nodejs/config/appref?hl=zh_TW
  handlers:
   - url: /
     static_files: build/index.html
     upload: build/index.html
 
   - url: /(.*)
     static_files: build/\1
     upload: build/(.*)
 
  #進入點  可以說是佈署完要啟動的 command
  entrypoint: "npm run remote:start"

<圖2>

接下來在佈署的時候 App Engine 會去抓專案目錄底下的package.json
去把該裝的dependencies裝好 也可以寫scripts來建置 執行專案

我們的instance要處理web request 就要有web framework 像是 Express.js Koa.js之類的 都行
不過最快的方法是裝 serve這個套件

  npm install serve

接著還記得app.yaml裡的 entrypoint ? 我們在package的scripts加上

  "scripts": {
    ...,
    "remote:start": "serve -s build -l 80",
    ...
  },

-l 這個參數是 listening port
build 是我們upload的build 資料夾

Optional：
有用過git的人都知道 git 有個 .gitignore
可以略過不想或不要加入的檔案
gcloud也有 .gcloudignore 很棒吧~
我們除了build 資料夾 跟 package.json需要之外 其他都可以不用上傳
所以檔案大概長這樣

  .gcloudignore
  .git
  .gitignore
 
  node_modules/
  src/
  public/

都處理好後就可以來deploy拉~~
在根目錄下 開啟command line 鍵入

  gcloud app deploy
  #or
  gcloud app deploy 指定的yaml檔

執行的過程大概長這樣子

等他跑完就大功告成拉~~

若有任何錯誤還請各位大大指教