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

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

サーバーレスServerless Framework
FacebookHatena blogX
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

セットアップ

  1. serverless frameworkのインストール 
    $ npm install -g serverless
  2. サンプルコードのインストール 
    $ serverless install -u https://github.com/serverless/examples/tree/master/aws-node-auth0-custom-authorizers-api -n  auth0-custom-authorizers
  3. ライブラリのインストール 
    $ cd auth0-custom-authorizers
$ npm install
  4. 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を選択します
  5. 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"
}
  6. Auth0のPublic Keyの取得と設定
    1. Auth0のダッシュボードのapplications→aws-node-auth0-custom-authorizers-api→settings→Show Advanced Settings→Certificatesを選択します
    2. DOWNLOAD CERTIFICATEをクリックし、PEM形式のファイルをダウンロードし、public_keyという名前でプロジェクトのルートに保存します
  7. 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.

    デプロイできました

  8. プロジェクトの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';
  9. プロジェクトの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:::{バケット名}/*"
     }
 ]
}
  10. 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
  11. {バケット名}.s3-website-ap-northeast-1.amazonaws.comにアクセスして以下のような画面になればOKです

動作確認

このサンプルでは、認証が必要ないパブリックなAPIと認証が必要なプライベートなAPIがあります。

  • まずは、Call Protected APIを叩いてみます

UnAuthorizedとなりました

  • 次に、Call Protected APIを叩いてみます。

Hi ⊂◉‿◉つ from Public APIと表示されてます。うまくいってるようです。

  • 次に、Auth0でログインします。

    自分のEメールか、Googleなどでサインインします。サインイン後、再びCall Protected APIを叩いてみます。

先ほどはUnAuthorizedでしたが、今回はHi ⊂◉‿◉つ from Private API. Only logged in users can see thisと表示されました。うまくいってそうです。

まとめ

このように、実際にデプロイして動作を確認することで、サーバーレスの実装イメージが湧きやすくなると思います。他にもいろいろなサンプルがあるため、実際に動かしてみてサーバーレスアーキテクチャの勉強をしていきましょう。

この記事をシェアする

FacebookHatena blogX

関連記事

[アップデート] Amazon DynamoDB テーブルのキャパシティモードをプロビジョニング済みからオンデマンドに、24時間以内に最大4回変更可能になりました
若槻龍太
2025.08.15
【セッションレポート】AWSサーバーレスにおけるSimplexity 戦略（AWS-40） #AWSSummit
ぐっさん
2025.06.28
【書評】サーバーレスアプリケーション開発ガイド
小林翔馬
2025.03.20
AWS CDKで作るサーバーレスデータベース基盤 【第3回】RDS Data API構築
小林翔馬
2025.03.17