ちょっと話題の記事

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

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. Nameaws-node-auth0-custom-authorizers-apiと入力します
    6. Choose an applization typeSingle Page Web Applicationsを選択します
  5. Auth0のクライアントIDの取得と設定
    1. Auth0のダッシュボードのApplicationsaws-node-auth0-custom-authorizers-apiSettingsタブを選択し、Client IDの値をコピーします
    2. プロジェクトのsecrets.example.jsonsecrets.jsonに名前を変更し、AUTH0_CLIENT_IDの値を先ほどコピーしたクライアントIDに置き換えます
      {
      "AUTH0_CLIENT_ID": "XXXXXXXXXXXXXXXXXXXXXXXXXXX"
      }
  6. Auth0のPublic Keyの取得と設定
    1. Auth0のダッシュボードのapplicationsaws-node-auth0-custom-authorizers-apisettingsShow Advanced SettingsCertificatesを選択します
    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_IDAUTH0_DOMAINPUBLIC_ENDPOINTPRIVATE_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 URLsAllowed Origins (CORS)の設定
    1. Auth0ダッシュボードを開きます
    2. Application -> Settingsを選択します
    3. Allowed Callback URLsAllowed 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と表示されました。うまくいってそうです。

まとめ

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