今回は、API Gatewayを使ってみます。API Gatewayのバックエンドには、Function Computeを使ってみます。
Function ComputeでバックエンドAPIの作成
API Gatewayのトリガーを利用するには、テンプレートを使用するのが便利です。
自動生成されたコードは以下の通りです。
パラメータ "response" に "json" を指定するとJSONが返却されます。
index.js
'use strict';varfs=require("fs")exports.handler=function(event,context,callback){console.log("request: "+JSON.stringify(event.toString()));// convert event to JSON objectevent=JSON.parse(event.toString());varquery=event.queryParameters||{};varshowResponse=query.response||'html';switch(showResponse){case"html":varhtmlResponse={isBase64Encoded:true,statusCode:200,headers:{"Content-type":"text/html; charset=utf-8"},// base64 encode body so it can be safely returned as JSON valuebody:newBuffer("<html><h1>hello FunctionCompute</h1></html>").toString('base64')}callback(null,htmlResponse);break;case"json":varjsonResponse={isBase64Encoded:true,statusCode:200,headers:{"Content-type":"application/json"},// base64 encode body so it can be safely returned as JSON valuebody:newBuffer('{"hello": "FunctionCompute"}').toString('base64')}callback(null,jsonResponse);break;case"image":fs.readFile(process.env.FC_FUNC_CODE_PATH+"/fc.png",(err,data)=>{if(err){callback(null,err);return;}varimageResponse={isBase64Encoded:true,statusCode:200,headers:{"Content-type":"image/png"},// base64 encode body so it can be safely returned as JSON valuebody:data.toString('base64')}callback(null,imageResponse);return;});break;default:varhtmlResponse={isBase64Encoded:true,statusCode:200,headers:{"Content-type":"text/html; charset=utf-8"},// base64 encode body so it can be safely returned as JSON valuebody:newBuffer("<html>Please hit the url with response=html, reponse=json, or reponse=image</html>").toString('base64')}callback(null,htmlResponse);}};API Gateway APIグループを作成する
API GatewayでAPIを公開するためには、まずAPIグループの作成を行います。
認証なしのAPIを公開する
APIグループが作成できたので、公開APIを作成します。まずは、認証なしのAPIを作成してみます。
動作確認
apigw-sample.html
<!DOCTYPE html><html><head><title>Image Search Add Sample</title><metacharset="utf-8"></head><body><h1>API Gatewayサンプル</h1><div><inputid="call-gw"type="button"value="データ取得"></div><script>//イベントの登録document.addEventListener('DOMContentLoaded',()=>{constcallgw=document.getElementById('call-gw');constparams={"response":"json"}constqs=newURLSearchParams(params);callgw.addEventListener('click',(e)=>{fetch(`http://xxxxxxxxxxxxxxx-ap-northeast-1.alicloudapi.com/hello?${qs}`,{method:'GET',headers:{"Content-Type":"application/json; charset=utf-8"},}).then((response)=>{if(response.status===200){returnresponse.json()}else{console.log('Bad')}}).then((obj)=>{console.log(JSON.stringify(obj,null,4))}).catch((err)=>{console.log('Error Occurred')console.log(err)})})})</script></body></html>まとめ
今回は、API Gatewayを試してみました。今回はパススルーで設定してしまいましたが、パラメータやレスポンス設計はこちらでしっかりと行う必要だと思います。
また、今回は公開設定にしましたが、実際は認証処理は必要になると思います。次回は、セキュリティ認証方式の中で「Alibaba Cloudアプリ」を使ったものを紹介します。