簡易後端實作 ( Google Cloud Functions )

前一篇文章提到可以使用 Apps Script 來實現簡易後端,這篇則是要透過 Google Cloud Fuctions 來完成一模一樣的功能,如此一來,在後端實作上也多了另一個好用的選擇。

啟用 Google Cloud Functions

Google Cloud Functions 標榜是個不用伺服器的後端環境,採用以 JavaScript 編寫,可在標準 Node.js 執行階段環境中執行,所以如果原本會寫 Node.js 但很煩惱後端伺服器環境的人 ( 類似我這種人 ),使用 Google Cloud Fuctions 就能省去許多煩惱。

如果是第一次使用,要先「申請免費試用」,申請後 Google 會給你一年份 300 美金的試用額度,不過如果沒有要做太大的應用或服務,只是要自己測試,這些額度基本上是用不到的,而且 Google 標榜的也是用多少付多少,所以不用太擔心。

點選前往:CLOUD FUNCTIONS

簡易後端實作 ( Google Cloud Functions )

申請完成後,就等同於擁有 Google Cloud Platform 的功能,不過功能實在太多太強大,什麼虛擬機的也並非我的專業,還是把焦點拉回 Cloud Functions,建立一個專案並命名為 test request。

簡易後端實作 ( Google Cloud Functions )

左側選單往下拉,選擇 Cloud Functions。

簡易後端實作 ( Google Cloud Functions )

建立時會要求「啟用 API」和「建立函式」,都點下去就可以正式啟用 Cloud Functions 的功能。

簡易後端實作 ( Google Cloud Functions )

建立並部署函式

啟用之後就要建立並部署這個函式,函式預設採用 http 觸發,下方的網址就是待會會使用到的網址。

簡易後端實作 ( Google Cloud Functions )

繼續往下能看到 index.js 和 package.json 兩個頁籤,這也是撰寫 Node.js 的位置,預設已經帶入基本的 http request 程式,區域的部分是指伺服器所在位置,因為 Cloud Functions 還在 beta 階段,看起來只有一個區域的伺服器可以用 ( 不然如果選擇台灣的 Google 機房,速度應該會快得多 ),要執行的函式一定要填,以預設範例來說就是 helloWorld。

簡易後端實作 ( Google Cloud Functions )

因為 Google 預設寫好了基本的程式,測試方式很簡單,只要按下「建立」,就會開始進行部署。

簡易後端實作 ( Google Cloud Functions )

部署完成,就會出現綠色勾勾的符號,也會有版本號碼以及部署時間,複製下方網址,就可以開始進行測試。

簡易後端實作 ( Google Cloud Functions )

POST

開始測試前,先回頭看一下預設的程式,預設程式會回應我們兩種訊息,第一種如果 request 內沒有 message 的屬性,就回傳「No Message defined!」,如果有,則會回傳「Success: message 內容」,了解構造後,首先用本地端的 Node.js 測試,撰寫下列程式碼,執行後就會看到回傳 Success:hello的 訊息。

必須加入 followAllRedirects: true 這段參數來解決 api server 執行 301/302 redirect 的動作。

var request = require("request");

var options = {
    url:'你的網址',
    method: 'POST',
    followAllRedirects: true,
    form:{
        message:'hello'
    }
}
request(options,function(err, res, body){
    console.log(body);
});

簡易後端實作 ( Google Cloud Functions )

再來我們換成使用 jQuery 來試試,撰寫具備下列程式碼的網頁,完成後執行,結果在 console 裡發現了需要跨域的訊息,這表示我們在 Cloud Functions 內的程式,預設是沒有跨域,所以純前端網頁是無法取得資訊。

$.post('你的網址',{
    message:'hello'
},function(e){
    console.log(e);
});

簡易後端實作 ( Google Cloud Functions )

所以我們必須回到 Cloud Functions,在程式碼的加入跨域的 header,修改後重新部署新的版本。

exports.helloWorld = (req, res) => {

  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Request-Method', '*');
  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
  res.setHeader('Access-Control-Allow-Headers', '*');

  if (req.body.message === undefined) {
    res.status(400).send('No message defined!');
  } else {
    console.log(req.body.message);
    res.status(200).send('Success: ' + req.body.message);
  }
};

簡易後端實作 ( Google Cloud Functions )

完成後重新執行剛剛的 jQuery 網頁,就可以看到順利取得回傳的資訊囉!

簡易後端實作 ( Google Cloud Functions )

GET

看完了 POST 的方法,再來看看 GET 的方法,由於 GET 單靠網址傳值,所以在 Cloud Functions 裡要多添加 url 這個 module 來幫我們篩選網址參數。

var url = require('url');

exports.helloWorld = (req, res) => {

  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Request-Method', '*');
  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
  res.setHeader('Access-Control-Allow-Headers', '*');

    var url_parts = url.parse(req.url, true);
    var query = url_parts.query;

  if (query.message === undefined) {
    res.status(400).send('No message defined!');
  } else {
    console.log(query.message);
    res.status(200).send('Success: ' + query.message);
  }
};

完成後一樣進行部署,打開具有參數的網址,就能看到伺服器回傳的訊息。

https://你的網址?message=hello

簡易後端實作 ( Google Cloud Functions )

除錯與看 log 訊息

開發程式最重要的事情之一就是除錯,除錯最重要的事情之一就是可以查看 log 訊息,Cloud Functions 也不例外,點選「查看紀錄」,就可以看到過程中所有狀況。

簡易後端實作 ( Google Cloud Functions )

簡易後端實作 ( Google Cloud Functions )

小結

基本上使用 Cloud Functions 打造簡易的後端就是這麼輕鬆,也因為他就是 Node.js,所以一些簡單的 Node.js 也可以直接運行在上頭,同時也不需要煩惱伺服器架設的問題囉!

有興趣瞧瞧其他新文章嗎?