用Google Cloud Platform(GCP)建node.js網站

用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、img、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
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言