用 Google Cloud Platform / GCP 建 Node.js 網站

/

English version: If I already have node.js files, how do I deploy them to Google Cloud Platform(GCP)

本篇要解決的問題

其實 Google 一下,就可以看見很多寫怎麼用 GCP(Google Cloud Platform)建一個 Node.js 站的教學。

不過自己遇到的問題是:如果本來就已經寫好了一個用 Node.js 開發的程式,要怎麼部署到 GCP 上?

網路教學大部份都是講怎麼建一個新的專案,或是直接照著 GCP 上的教學,用他們的 hello world 檔去建立的。

這篇是痛苦摸索了一天半後,整理出來的筆記。


介紹GCP(Google Cloud Platform)及使用介面

Google Cloud Platform(以下簡稱 GCP),自己的解讀就是 Google 經營的主機。

目前有一年的免費試用(有限制),也提供了 300 元美金的額度。在這樣的利多之下,就考慮拿他來玩一個最近在學的 Node.js。

註冊 GCP 的試用帳號,網路上也有一堆教學,基本上就是點選要試用的按鈕後,照著頁面上的表單去填些資料就可以。

可怕的地方在,登入後會看見一長串的選單跟一堆卡片,第一次接觸時被這些東西嚇到,因為完全看不到「如果要用 Node.js 就請點這裡」、「如果想靠 FTP 傳檔案請點這裡」……的選項。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

GCP登入後的可怕介面
GCP 登入後的可怕介面

研究了一下,因為接的資料庫就直接是 Firebase 了,因此資料庫的部份就在 Firebase 上處理。所以要煩惱的問題就是:怎麼把寫好的 Node.js,以及會用到的前端檔案(CSS、Images、JS 等)放進 GCP 裡?

縮小了問題範圍,就可以知道 GCP 一大票選單裡,要理解的是這個部份:

GCP上讓人第一眼一定看不懂意思的選單名稱
GCP上讓人第一眼一定看不懂意思的選單名稱

說真的,我只是想要一個主機空間可以用啊,一定要複雜到出現 4 個選項嗎!?

後來在不斷爬文後,找到了這篇,一看就懂其中的 3 個項目是什麼意思:

What is the difference between Google App Engine and Google Compute Engine?

沒介紹到 Kubernetes Engine,不過沒關係,因為大部份裝 Node.js 的中文教學文,也就用了 App Engine、Compute Engine 這 2 種而已。

要用這 2 種的哪一種呢?如果上面的連結看過後還是不知道怎麼選,那就來看一下這邊自己的解釋:

App Engine

如果只是想讓某個你寫的程式跑起來,就用這個。這很像是一個套裝行程,把檔案放上去後,剩下背後有的沒的 Google 都會幫你處理。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

Compute Engine

如果你對主機很熟,知道架了 VM 後還可以怎麼繼續往下做,就用這個。這比較麻煩,Google 就單純給你一個空間,裡面的東西全部都要手動去裝,但相對來說自由度比較高。

因為對主機的東西不是很熟,加上 code 已經寫好了,這邊就用 App Engine。


使用 GCP App Engine

要用 App Engine,有些前置作業,要能完整部署檔案的整體流程如下:

  1. 安裝 Google Cloud SDK
  2. 開啟要部署到 GCP 的資料夾後,用終端機輸入:gcloud init
  3. 在專案資料夾裡,建立一個 app.yaml 的檔案,package.json 加上 start
  4. 為專案開啟 Cloud Build API
  5. 在專案資料夾裡開啟終端機,輸入:gcloud app deploy

1 安裝 Google Cloud SDK

App Engine 要用指令碼去執行,就是要打開終端機(Windows 叫命令提示字元)去輸入指令碼。

GCP 的終端機分為雲端上跟本機上的。

GCP 上互動式教學課程,教的是雲端上的,看到教學上寫了 cat XXX,還以為是叫一隻貓來做什麼,覺得還要再另外學其他語言有點費工,就用了比較熟的本機使用。

因為是在本機上使用終端機的指令碼,再因為要用的是 Google 家的主機,因此就得安裝一套 Google 用的在終端機上的指令碼:Google Cloud SDK。

Google Cloud SDK 的安裝方式中文版在這:安裝Cloud SDK

自己用的是文件上的「互動式安裝」。

很簡單,開啟終端機,輸入:

curl https://sdk.cloud.google.com | bash

按下 Enter,再回答幾個問題,就自動幫你安裝了。

在這邊遇到一個盲點,安裝成功的話,輸入:gcloud -v,就會看到本版號,可是裝完後輸入了,卻一直出現沒有 gcloud 這個東西,在這邊卡很久,一直以為是不是笨蛋,就安裝一個東西也裝不起來。

後來才發現,安裝完後,終端機要關掉再打開……

重新開啟終端機後,輸入 gcloud -v,終於成功看到版本了:

版本號的訊息
版本號的訊息

能看到版本,代表 Google Cloud SDK 安裝成功,就可以進行下一步。


2 開啟要部署到 GCP 的資料夾後,用終端機輸入:gcloud init

基本上,這個標題就很白話、很直接,不用再解釋什麼了。

如果資料夾沒先執行 gcloud init,之後要部署就會出現問題。

輸入完 gcloud init 後,會要登入 Google 帳號,然後選擇要對應的專案名稱。

自己是先在 GCP 上新增一個跟資料夾名稱一樣的專案後,才執行這步。這樣 GCP 的專案名稱跟本機上資料夾的名稱一樣,未來要找檔案比較好找。

如果只有一個專案要部署到 GCP,那本機的 gcloud 就不用切換。

但當有多個資料夾都要部署時,就需要一些指令碼來做切換。

這邊提供以下方式:


3 在專案資料夾裡,建立一個 app.yaml 的檔案,package.json 加 上start

如果沒建立 app.yaml 這個檔,在部署檔案上 GCP 時,會出現訊息要求要建。

app.yaml 裡面會寫一些主機上的設定,對這語言沒有很懂,因此是直接下載 Google 提供的範例:app.yaml

雖然看 Demo 檔只執行了一行,但在 GCP 上看,蠻多預設值都在裡面的:

app.yaml
app.yaml

Node.js 有一支package.json的檔案,在 scripts 的部份,要加上 start

package.json的範例
package.json的範例

NAME.js 的地方記得替換成專案裡在用的檔名。


4 為專案開啟 Cloud Build API

5 開啟終端機,輸入:gcloud app deploy

這兩步驟,一般來說是先做 4,在做 5。

但因為 Cloud Build API 一般很難找到是在哪個網址,因此實際上是執行 5 以後,跳出的錯誤訊息裡會出現 Cloud Build API 的網址,點了以後就直接點選開通。

開通完後,再用終端機執行一次:gcloud app deploy,就可以部署上 GCP 了。

以上就是用 GCP 的 App Engine 去部署一個 Node.js 的站。


3個注意事項

這邊有幾點要注意,也是實際在做的時候遇到的雷:

1 package.json,script 裡一定是要填:node XXXX.js

因為平常是用 Nodemon 在開發,原本上面填了nodemon XXXX.js,結果部署上去後一直出現 500 錯誤,直到看了 log 檔才找到原因。

2 .gcloudignore 很重要

執行 gcloud app deploy 後,資料夾裡會自動出現一支「.gcloudignore」的檔案,這個檔跟 Git 的 .gitignore 一樣,就是寫在這檔案裡的路徑都不會被上傳。

因此檔案裡的「node_modules/」這行絕對不能刪,GCP 上裝的 npm 套件都是直接讀 package.json 裡的,node_modules 檔案一般都很大,不必要跟著部署上去。

3 開發時要注意的

主要的那支 JS 檔案裡,要注意 port、靜態檔的位置以及模版引擎的引用路徑,如下:

port 要改成:process.env.PORT || 開發時用的 port。

靜態檔、模版引擎引用的路徑,也要用 path 來設定,不然有可能發生部署後抓不到檔案的狀況。


結論及心得

是說,最後看到專案成功部署到 GCP 上,並且順利出現頁面時,眼淚真的都要掉下來了,從一開始什麼都不懂,到可以成功部署,覺得又進步了不少。

Google 一直在整合他們相關的產品,像 GCP 整合了 Firebase,也整合了 Google API。最近要新建 Firebase 的專案時,也開始限定免費版的專案數量。

今年的一年免費跟 300 美金額度,就是想打倒一堆主機商吧?

Summary
用 Google Cloud Platform(GCP) 建 node.js 網站
Article Name
用 Google Cloud Platform(GCP) 建 node.js 網站
Description
本篇大綱:本篇要解決的問題、介紹GCP(Google Cloud Platform)及使用介面、使用GCP App Engine、安裝Google Cloud SDK、app.yaml、Cloud Build API、3個注意事項五、結論及心得
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

一個簡單的卡片樣式 Simple Card UI

Front-End

IntersectionObserver:上篇 – 基本介紹及使用

Google Others

Google Optimize A/B Testing 使用筆記

Front-End

Instagram oEmbed 嵌入 IG 貼文

Analytics Google

GA 報表:電子商務 內部宣傳 報表

Front-End

SpeechSynthesisUtterance 讓瀏覽器說話

Bot LINE

用 LINE Push Messaging API 推播每日氣象預報

Front-End

Netlify + GitLab 建一個免費靜態網站

Front-End

如何使用 Vivus.js 製作輕量快速 SVG 動畫

PWA

PWA 學習筆記 – 2:Workbox CLI

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
2 Comments
最舊
最新
Inline Feedbacks
看所有留言
dong
dong
20 天 之前

不好意思打擾您了 我是新手 如果問題很蠢請多多包涵 請問在當部屬上去之後 如果要修改程式內容 修改完就是直接在gcloud app deploy一次嗎

2.還有就是像在server程式裡 打一個console.log(“”)之類的東西,那部屬上去之後 是要在哪裡查看consolo.log(“”)的文字