這次我決定把一個 vue 出來的一個靜態網頁部署到 GCP(Google Cloud Platform)上面，主要是因為這個網站可能只會營運一年，之後還會加入後端，(如果純粹只有前端的話也不需要使用 GAE 了），而GCP有提供一年免費以及300美金的試用金，再加上之前實習的兩家公司也都使用GCP的服務，感覺比較親切，就選擇這個平台了。

關於 GAE 還是 GCE 的選擇，其實已經有很多文章在分析，簡單來說，GCE 的彈性很大，可以讓使用者自己設定需要的 CPU 和 RAM 等等的條件，而 GAE 已經幫你建置好平台和環境，你只需要上傳自己寫的應用程序就好，不需要管設定和維護，那對於我這個新手而言是再友善不過的選項了，所以果斷選擇。

如何啟用 GAE ?

1. 在 GCP 的左側選單中，選擇 「 App Engine」

2. 點擊 「建立應用程式」

3. 選擇區域

我選擇 「 asia-east2」位在香港，離台灣最近的點。

4. 選擇程式語言

如何部署自己的 Vue.js 專案？

5. 回到自己的專案，建立 app.yaml 檔案，直接貼上

runtime: nodejs10
handlers:
  # Serve all static files with urls ending with a file extension
  - url: /(.*\..+)$
    static_files: dist/\1
    upload: dist/(.*\..+)$
    # catch all handler to index.html
  - url: /.*
    static_files: dist/index.html
    upload: dist/index.html

6. 在自己的專案目錄中，輸入 npm run build

這時候會發現自己的目錄結構中，多出一個資料夾 `dist`

7. 回到 GCP ，點擊左側目錄中 Storage 的瀏覽器

8. 點擊剛剛自己建立的 App Engine

ex: staging.xxxxxx.com

9. 上傳 app.yaml 以及 dist 資料夾

10. 點擊右上方的 啟用 Cloud Shell

這時候可以先輸入 `ls` 觀察在現有的目錄有什麼東西呢？應該只會發現一份`Readme-shell.txt`。

11. mkdir …-app

在根目錄建立一個資料夾，可以叫做 xxx-app

12. gsutil rsync -r gs://${值區的名字} ./xxx-app

所以到底什麼是值區呢？
「值區」是在 Cloud Storage 中保存資料的基本容器。
我們剛剛就是把 code 上傳到 Cloud Storage 的其中一個值區。

至於這個指令中的 gsutil 他是一種 Python 應用程式，可讓您透過指令列存取 Cloud Storage，也可讓您執行多種值區與物件管理工作，包括：

• 建立及刪除值區。
• 上傳、下載及刪除物件。
• 列出值區和物件。
• 移動、複製及重新命名物件。
• 編輯物件和值區 ACL。

詳細使用 gsutil 的方式可以參考這篇教學，我這邊只說明上面那條指令。
https://cloud.google.com/storage/docs/quickstart-gsutil?hl=zh-tw
gsutil rsync gs://[BUCKET] [MOUNT_DIRECTORY]
BUCKET 在這裡就是 ${值區的名字} 也就是我們剛剛上傳檔案的地方，MOUNT_DIRECTORY 就是我們的 xxx-app 資料夾，我們希望可以把檔案複製到這個Cloud Filestore 檔案共用區。

13. cd xxx-app

進入剛剛新增的資料夾

14. gcloud app deploy

這樣就部署完成囉！

不對呀！那剛剛突然冒出來的 dist資料夾是...??

為什麼只需要上傳這個 dist 檔案就好？而不需要上傳整份專案呢？

那就要從常常聽、常常用，但總是不想去搞動的 Webpack 開始談了！
下次再說吧！