元ネタはServerless Meetup Fukuoka #1 - connpassにてセッションした

「月額10円から作るServerless Website〜Azure編〜/serverlessfukuoka-20170825 // Speaker Deck」を実際に作ってみるというものです。

前回の記事で静的Webサイトのホスティング環境は整いました。次はお問い合わせページの対応を、Azureのサービスを組み合わせてサーバーレスに解決を目指してみます。

処理の流れはこんな感じです。

お問い合わせページをBLOBから配信
お問い合わせ内容のPOSTをLogic Appsで受け取る

それでは構築していきます。

Logic Apps

まずはPOST先のLogic Appsを作成します。Logic Appsはサーバーを管理しなくてもロジックを実行できるサービスです。さらにロジックを書くのにコードを書く必要はありません。料金はロジックを呼び出された時の実行時間だけ発生します（お財布に優しい）。

ロジックは問い合わせPOSTが来たらサンクスと問い合わせ内容をそれぞれメールで送るという簡単な物を組んでみます。

Logic Appsの新規作成を開く
Logic Appsを作成
作成したLogic AppsのデザイナーからHTTP要求時の受信時を選択
ロジックを組みます
1. HTTP要求の受信時
2. SendGridで問い合わせ元へサンクスメール送信
3. SendGridで窓口へ問い合わせ内容送信
保存後に生成される「HTTP POSTのURL」をメモ

お問い合わせページ

お問い合わせページをBLOBへデプロイします。お問い合わせページのサンプルはこちら。

デプロイが終わったらテストしてみます。

POST
サンクスメール受信
問い合わせ内容受信

旨くいきました。しかし、このままではLogic AppsのURLに対して誰でもPOST出来てしまいます。CORSを設定したいところですがLogic Appsに（今のところ？）この機能はありません。

CORS対応

Azure Function Proxies

CORSを使いたいのでAzure Functions Proxiesを導入します。

ストレージアカウント作成
Azure Function Apps作成

$ az storage account create --name <storage-account> --resource-group <resouce-group> --location japaneast --sku Standard_LRS
$ az functionapp create --name <functionapp-name> --resource-group <resouce-group> --storage-account <storage-account> --consumption-plan-location japaneast