Serverless FrameworkのExampleを見て、サーバーレスの様々な実装を学ぼう

#サーバーレス

#Serverless Framework

佐藤直哉

2019.09.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

概要

CX事業本部の佐藤です。

Serverless FrameworkではExampleとして、さまざまなサーバーレスの実装パターンを公開しています。実際に業務で使用するようなサーバーレス実装が多数ありサンプルコードが公開されているため、実際に動かしてみたりソースコードを見たりして学ぶことができ、とても参考になります。

サンプルコードはGitHubリポジトリに公開されています。

https://github.com/serverless/examples

オーソドックスなサーバーレス実装パターン

Exampleのサーバーレスのサンプルパターンの中からオーソドックスな実装パターンを一覧にしてみました

Auth0を使用したカスタムオーソライザーのサンプルを動かしてみる

ExampleではAWSにデプロイして動作確認する方法が記載されています。今回は、Exampleの中のAWS | Auth0 Custom Authorizers APIを動かしてみたいと思います。

概要図

環境

項目	バージョン
macOS	Mojave 10.14.5
node	v10.16.0
npm	6.9.0

セットアップ

serverless frameworkのインストール
```
$ npm install -g serverless
```

サンプルコードのインストール

$ serverless install -u https://github.com/serverless/examples/tree/master/aws-node-auth0-custom-authorizers-api -n  auth0-custom-authorizers

ライブラリのインストール

$ cd auth0-custom-authorizers
$ npm install

Auth0のセットアップ
1. Auth0にアクセスします
2. 右上のサインアップをクリック
3. EメールやGoogleアカウントなどでサインアップします
4. ダッシュボードが開かれるため、CREATE APPLICATIONをクリックします
5. Nameにaws-node-auth0-custom-authorizers-apiと入力します
6. Choose an applization typeにSingle Page Web Applicationsを選択します
Auth0のクライアントIDの取得と設定
1. Auth0のダッシュボードのApplications→aws-node-auth0-custom-authorizers-api→Settingsタブを選択し、Client IDの値をコピーします
2. プロジェクトのsecrets.example.jsonをsecrets.jsonに名前を変更し、AUTH0_CLIENT_IDの値を先ほどコピーしたクライアントIDに置き換えます
```
{
"AUTH0_CLIENT_ID": "XXXXXXXXXXXXXXXXXXXXXXXXXXX"
}
```
Auth0のPublic Keyの取得と設定
1. Auth0のダッシュボードのapplications→aws-node-auth0-custom-authorizers-api→settings→Show Advanced Settings→Certificatesを選択します
2. DOWNLOAD CERTIFICATEをクリックし、PEM形式のファイルをダウンロードし、public_keyという名前でプロジェクトのルートに保存します

AWS環境にデプロイする

$ serverless deploy

Serverless: Excluding development dependencies...
Serverless: Creating Stack...
Serverless: Checking Stack create progress...
.....
Serverless: Stack create finished...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Uploading service auth0-custom-authorizers.zip file to S3 (153.89 KB)...
Serverless: Validating template...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
..............................................................................
Serverless: Stack update finished...
Service Information
service: auth0-custom-authorizers
stage: dev
region: ap-northeast-1
stack: auth0-custom-authorizers-dev
resources: 26
api keys:
 None
endpoints:
 POST - https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/api/public
 POST - https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/api/private
functions:
 auth: auth0-custom-authorizers-dev-auth
 publicEndpoint: auth0-custom-authorizers-dev-publicEndpoint
 privateEndpoint: auth0-custom-authorizers-dev-privateEndpoint
layers:
 None
Serverless: Run the "serverless" command to setup monitoring, troubleshooting and testing.

デプロイできました

プロジェクトのfrontend/app.jsファイルの上部のAUTH0_CLIENT_ID、AUTH0_DOMAIN、PUBLIC_ENDPOINT、PRIVATE_ENDPOINTの値をそれぞれ更新します

// Fill in with your values
const AUTH0_CLIENT_ID = 'your-auth0-client-id-here';
const AUTH0_DOMAIN = 'your-auth0-domain-here.auth0.com';
const AUTH0_CALLBACK_URL = window.location.href; // eslint-disable-line
const PUBLIC_ENDPOINT = 'XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/api/public';
const PRIVATE_ENDPOINT = 'https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/api/private';

プロジェクトのfrontend/フォルダ配下をホスティングします。好きなホスティングサービスで良いですが、今回はS3の静的Webサイトホスティングの機能を使います。
1. 適当な名前のS3バケットを作成します
2. S3バケットにfrontend/フォルダ配下をアップロードします
```
$ s3 sync s3:{バケット名} frontend/
```
3. S3バケットのプロパティのStatic website hostingを有効にします
  1. Static website hostingを選択
  2. このバケットを使用してウェブサイトをホストするを選択
  3. インデックスドキュメントにindex.htmlを入力
  4. 保存
4. アクセス権限を設定します
  1. バケットのアクセス権限タブを選択します
  2. ブロックパブリックアクセスを選択し、パブリックアクセスをすべてブロックのチェックを外し、保存します
  3. バケットポリシーを選択し、以下の内容をコピペし保存します
```
{
 "Version": "2008-10-17",
 "Statement": [
     {
         "Effect": "Allow",
         "Principal": "*",
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::{バケット名}/*"
     }
 ]
}
```
Auth0のAllowed Callback URLsとAllowed Origins (CORS)の設定
1. Auth0ダッシュボードを開きます
2. Application -> Settingsを選択します
3. Allowed Callback URLs、Allowed Origins (CORS)にホスティングしたURLを入力します。例:http://{バケット名}.s3-website-ap-northeast-1.amazonaws.com/
4. SAVE CHANGES
{バケット名}.s3-website-ap-northeast-1.amazonaws.comにアクセスして以下のような画面になればOKです