はじめてのサーバーレス ~ サーバーレスな会員制サイトを作ってみよう ~ 第 1 回

2020-11-02
How to be a Developer

亀田 治伸

img_hajimete-serverless-handson_icon

みなさん、こんにちは。シニアエバンジェリストの亀田です。みなさん、コーディングしてますか ?

サーバーレスコンピューティングは 2014 年に AWS Lambda がリリースされその歴史が始まりました。サーバーのプロビジョニングや OS を管理することなく、コードを実行することが でき、そのキャパシティはリクエストに応じ、自動でスケールします。
上手に活用することで開発者はコーディングにフォーカスすることができ、開発生産性を大きく向上させることができます。

この記事を読んでいる皆さんの中には、「サーバレス」というキーワードを聞いたことがある方でも、実はまだ触ったことの無いかがたいるのではないでしょうか。この記事はそのような方向けに書いています。まだ遅くはないサーバレス、是非最初の一歩を踏み出してみましょう。

この記事では、以下のサーバレス系サービスを活用し、簡易的な会員制サイトにログインしたユーザーが自分のデータを登録できる、という環境をつくる Step by Step ガイドをお届けします。少し記事の分量が多いので、数回に分けて連載を予定していますのでお付き合いください。

この Step by Step ガイドでは以下のサービスを使用します。

ご注意

本記事で紹介する AWS サービスを起動する際には、料金がかかります。builders.flash メールメンバー特典の、クラウドレシピ向けクレジットコードプレゼントの入手をお勧めします。

builders.flash メールメンバーへの登録・特典の入手はこちら »

*ハンズオン記事およびソースコードにおける免責事項 »


1. 準備事項

  • AWS を利用可能なネットワークに接続された PC (Windows, Mac OS, Linux 等)
  • 事前に用意していただいた AWS アカウント
  • ブラウザ (Firefox もしくは Chrome を推奨)

また、こちらからハンズオンに使う必要なファイルをダウンロードしておきましょう。

 


2. ハンズオン全体を通しての注意事項

各手順において、「任意」と記載のあるものについては自由に名前を変更いただくことができますが、ハンズオン中に指定した名前がわからなくならないように、ハンズオン実施中は基本的にはそのままの名前で進めることを推奨いたします。 


3. 準備 - Cloud9 環境の作成

このハンズオンで使用する AWS Cloud9 の環境を構築します。AWS Cloud9 は、コードの記述・実行・デバッグが行えるクラウドベースの統合開発環境 (IDE) です。
このハンズオンでは、Amazon EC2 インスタンスを利用して新規に Cloud9 の環境を構築します。

AWS マネジメントコンソールにログインします。

AWS マネジメントコンソールのサービス一覧から Cloud9 を選択します。

[Create environment] をクリックします。

img_hajimete-serverless-handson_01

クリックすると拡大します

[Name] 欄に [YYYYMMDDserverless] と入力します。(YYYYMMDD は本日の日付)

入力したら [Next Step] をクリックします。

img_hajimete-serverless-handson_02

クリックすると拡大します

以下のように設定します。(基本的にデフォルトのままで構いません)

  • Environment type : [Create a new EC2 instance for environment (direct access)]
  • Instance type : [t2.micro]
  • Platform : [Amazon Linux]
  • Cost-saving setting : [After 30 minutes]  (アイドル状態が 30 分続くと自動的にEC2インスタンスを停止する設定です)
  • IAM Role : [AWSServiceRoleForAWSCloud9] (変更できません)
     
img_hajimete-serverless-handson_03

クリックすると拡大します

[Network settings (advanced)] をクリックして展開します。
Cloud9 環境を構築する VPC および サブネット を指定できますので、任意の VPC を指定してください。サブネットは「パブリックサブネット」であるものを指定してください。
不明な場合はデフォルト VPC (名前に「(default)」が付いた VPC) を選択すれば問題ありません。

全て終わったら [Next Step] をクリックします。

img_hajimete-serverless-handson_04

クリックすると拡大します

確認画面になりますので、[Create environment] をクリックします。

img_hajimete-serverless-handson_05

クリックすると拡大します

Cloud9 環境の作成が始まります。数分間で完成します。

img_hajimete-serverless-handson_06

クリックすると拡大します

Cloud9 環境が作成されました。

img_hajimete-serverless-handson_07

クリックすると拡大します


4. Amazon DynamoDB および AWS Lambda を使用して動作確認を行う

4-1. DynamoDB テーブルの作成

AWS マネジメントコンソールのサービス一覧から [DynamoDB] を選択します。

[テーブルの作成] をクリックします。
 

img_hajimete-serverless-handson_08

クリックすると拡大します

以下の通り入力します。

  • テーブル名 : [YYYYMMDDserverless] (YYYYMMDD は本日の日付)
  • プライマリーキー : [Artist] と入力、右側のプルダウンから [文字列] を選択
  • [ソートキーの追加] にチェックを入れる
  • ソートキー : [Title] と入力、右側のプルダウンから [文字列] を選択
     
img_hajimete-serverless-handson_09

クリックすると拡大します

[作成] をクリックします。テーブルが作成されるまで 1~2 分程度かかります。

テーブルが作成されましたら、[項目] タブをクリックします。
下図のように [Artist][Title] の各属性が構成されていることを確認します。
 

img_hajimete-serverless-handson_10

クリックすると拡大します

4-2. Lambda 用 IAM ポリシーの作成

AWS マネジメントコンソールのサービス一覧から [IAM] を選択します。
画面左側のメニューから [ポリシー] を選択します。
 

img_hajimete-serverless-handson_12

クリックすると拡大します

[サービス] をクリックして展開します。 

img_hajimete-serverless-handson_13

クリックすると拡大します

検索欄に [dynamodb] と入力します。
表示された [DynamoDB] をクリックします。

img_hajimete-serverless-handson_14

クリックすると拡大します

[アクション] を展開して、[アクセスレベル] から [読み込み] [書き込み] にチェックを入れます。

img_hajimete-serverless-handson_15

クリックすると拡大します

[リソース] を展開して、[table] 列の右端にある [このアカウント内のいずれか] にチェックを入れます。

チェックを入れたら、[ポリシーの確認] をクリックします。

img_hajimete-serverless-handson_16

クリックすると拡大します

[名前] 欄に [YYYYMMDDserverlessLambdaPolicy] と入力します。(YYYYMMDD は本日の日付)

入力したら [ポリシーの作成] をクリックします。

img_hajimete-serverless-handson_17

クリックすると拡大します

ポリシー [YYYYMMDDserverlessLambdaPolicy] が作成されたことを確認します。

img_hajimete-serverless-handson_18

クリックすると拡大します

4-3. Lambda 用 IAM ロールの作成

[IAM] 画面で、画面左側のメニューから [ロール] を選択します。

img_hajimete-serverless-handson_19

クリックすると拡大します

[ロールの作成] をクリックします。

img_hajimete-serverless-handson_20

クリックすると拡大します

[信頼されたエンティティの種類][AWS サービス] が選択されていることを確認します。

[ユースケースの選択][Lambda] をクリックして選択状態にします。

[次のステップ: アクセス権限] をクリックします。

img_hajimete-serverless-handson_21

クリックすると拡大します

ポリシーの一覧から、前手順で作成した [YYYYMMDDserverlessLambdaPolicy] を探して、左側のチェックボックスにチェックを入れます。

[次のステップ: タグ] をクリックします。

[タグの追加] ページでは何も入力せず、[次のステップ: 確認] をクリックします。

img_hajimete-serverless-handson_22

クリックすると拡大します

ポリシーの一覧から、前手順で作成した [YYYYMMDDserverlessLambdaPolicy] を探して、左側のチェックボックスにチェックを入れます。

[次のステップ: タグ] をクリックします。

[タグの追加] ページでは何も入力せず、[次のステップ: 確認] をクリックします。

img_hajimete-serverless-handson_22

クリックすると拡大します

[ロール名] 欄に [YYYYMMDDserverlessLambdaRole] と入力します。(YYYYMMDD は本日の日付)

[ロールの作成] をクリックします。

img_hajimete-serverless-handson_23

クリックすると拡大します

ロール [YYYYMMDDserverlessLambdaRole] が作成されたことを確認します。

img_hajimete-serverless-handson_24

クリックすると拡大します

4-4. Cloud9 上での Lambda 関数の作成とテスト (Write 関数)

Cloud9 の画面へ移動します。
画面右側のツールバーから [Lambda] ボタンをクリックします。表示が異なる場合は [AWS Resource] を選んでください。
 

img_hajimete-serverless-handson_25

クリックすると拡大します

[Create] ボタン (Lambda アイコンに [+] 印が付いたもの) をクリックします。

img_hajimete-serverless-handson_26

クリックすると拡大します

[Function name] 欄に [YYYYMMDDserverlessWrite] と入力します。(YYYYMMDD は本日の日付)

[Application name] 欄は [Function name] 欄と同じ内容が自動的に入力されますので、そのままにします。

[Next] をクリックします。

img_hajimete-serverless-handson_27

クリックすると拡大します

[Select runtime][Node.js 12.x] を選択します。

[Select blueprint] の中から [empty-nodejs] をクリックして選択状態にします。

[Next] をクリックします。

img_hajimete-serverless-handson_28

クリックすると拡大します

[Function trigger][none] を選択します。

[Next] をクリックします。

img_hajimete-serverless-handson_29

クリックすると拡大します

以下の通りに選択します。

  • Memory : [128 MB] (デフォルトのまま)
  • Role : [Choose an existing role]
  • Existing Role : 前手順で作成した [YYYYMMDDserverlessLambdaRole] を選択

[Next] をクリックします。

*注意 : この手順で先に作成した IAM ロールが表示されない場合、IAM ロールに以下のポリシーを追加で作成して再度試してください。[AmazonDynamoDBFullAccess] [AWSCloud9Administrator]

img_hajimete-serverless-handson_30

クリックすると拡大します

確認画面になりますので、[Finish] をクリックします。

img_hajimete-serverless-handson_31

クリックすると拡大します

Lambda 関数コード (index.js) の編集画面が表示されます。

img_hajimete-serverless-handson_32

クリックすると拡大します

初期入力されているサンプルコードを一旦全て削除します。
フォルダ内の [lambda_function_write.txt] の内容をコピーして編集画面にペーストします。コード中に DynamoDB のテーブル名が記述されている箇所がありますので、実際に作成したテーブルの名前に書き換えます。
 

img_hajimete-serverless-handson_33

クリックすると拡大します

コードの編集が終わりましたら、画面上部のメニューバーから [File] [Save] の順に選択してファイルを保存します。

img_hajimete-serverless-handson_34

クリックすると拡大します

画面上部の [Run] をクリックします。

img_hajimete-serverless-handson_35

クリックすると拡大します

[lambda_function_write_test.txt] の内容をコピーして [Payload] 欄にペーストします。

img_hajimete-serverless-handson_36

クリックすると拡大します

Lambda 関数実行タブの [Run] をクリックします。

img_hajimete-serverless-handson_37

クリックすると拡大します

[EXECUTION RESULTS] 欄に実行結果が表示されます。

エラー等が発生しておらず、[Success] と表示されていれば成功です。

img_hajimete-serverless-handson_38

クリックすると拡大します

DynamoDB の画面に移動して、テーブルの [項目] タブを表示します。
リロードボタンをクリックして、Lambda 関数によって書き込まれたデータが表示されていることを確認します。

img_hajimete-serverless-handson_39

クリックすると拡大します

4-5. Cloud9 上での Lambda 関数の作成とテスト (Read関数)

画面右側のツールバーから [Lambda] ボタンをクリックします。表示が異なる場合は [AWS Resource] を選んでください。
 

img_hajimete-serverless-handson_25

クリックすると拡大します

[Create] ボタン (Lambda アイコンに [+] 印が付いたもの) をクリックします。

img_hajimete-serverless-handson_26

クリックすると拡大します

[Function name] 欄に [YYYYMMDDserverlessRead] と入力します。(YYYYMMDD は本日の日付)

[Application name] 欄は [Function name] 欄と同じ内容が自動的に入力されますので、そのままにします。

[Next] をクリックします。
 

img_hajimete-serverless-handson_40

クリックすると拡大します

[Select runtime][Node.js 12.x] を選択します。

[Select blueprint] の中から [empty-nodejs] をクリックして選択状態にします。

[Next] をクリックします。

img_hajimete-serverless-handson_41

クリックすると拡大します

[Function trigger][none] を選択します。

[Next] をクリックします。

img_hajimete-serverless-handson_42

クリックすると拡大します

以下の通りに選択します。

  • Memory : [128 MB] (デフォルトのまま)
  • Role : [Choose an existing role]
  • Existing Role : 前々項で作成した [YYYYMMDDserverlessLambdaRole] を選択

[Next] をクリックします。

img_hajimete-serverless-handson_43

クリックすると拡大します

確認画面になりますので、[Finish] をクリックします。

img_hajimete-serverless-handson_44

クリックすると拡大します

Lambda 関数コード (index.js) の編集画面が表示されます。

img_hajimete-serverless-handson_45

クリックすると拡大します

初期入力されているサンプルコードを一旦全て削除します。

[lambda_function_read.txt] の内容をコピーして編集画面にペーストします。

コード中に DynamoDB のテーブル名が記述されている箇所がありますので、実際に作成したテーブルの名前に書き換えます。

img_hajimete-serverless-handson_46

クリックすると拡大します

コードの編集が終わりましたら、画面上部のメニューバーから [File] [Save] の順に選択してファイルを保存します。

img_hajimete-serverless-handson_47

クリックすると拡大します

画面上部の [Run] をクリックします。

img_hajimete-serverless-handson_48

クリックすると拡大します

[lambda_function_read_test.txt] の内容をコピーして [Payload] 欄にペーストします。

img_hajimete-serverless-handson_49

クリックすると拡大します

Lambda 関数実行タブの [Run] をクリックします。

img_hajimete-serverless-handson_50

クリックすると拡大します

[EXECUTION RESULTS] 欄に実行結果が表示されます。エラー等が発生しておらず、[Success] と表示されていれば成功です。

DynamoDB のデータが [Response] に表示されていることを確認します。
 

img_hajimete-serverless-handson_51

クリックすると拡大します

4-6. Lambda 関数のデプロイ

画面左側のツールバーから [Lambda] ボタンをクリックします。

img_hajimete-serverless-handson_52

クリックすると拡大します

[Local Functions] (= Cloud9 上に存在する関数) 配下に 2 つのフォルダがあります。
まず、[YYYYMMDDserlverlessRead] の方をクリックして選択状態にします。

[Deploy] ボタン ([↑]) をクリックします。

Lambda 関数のデプロイが行われます。

フォルダアイコンが「デプロイ中」の動きとなりますので、終わるまで待ちます。

img_hajimete-serverless-handson_53

クリックすると拡大します

同様にして、[YYYYMMDDserlverlessWrite] をクリックして選択状態にしてから、[Deploy] ボタンをクリックします。

デプロイが終わるまで待ちます。 

img_hajimete-serverless-handson_54

クリックすると拡大します

AWS マネジメントコンソールのサービス一覧から [Lambda] を選択します。
関数の一覧に [cloud9-YYYYMMDDserverless…] で始まる名前の関数が 2 つ存在することを確認します。

img_hajimete-serverless-handson_55

クリックすると拡大します


5. まとめ

今日はページの関係でここまでです。なるべく早く第二回を出しますので、楽しみにお待ちください。

今日作った環境は継続的な課金は発生しませんので残しておいてください。 


bbuilders.flash メールメンバーへ登録することで
AWS のベストプラクティスを毎月無料でお試しいただけます

プロフィール

photo_kameda_harunobu_2

亀田 治伸
アマゾン ウェブ サービス ジャパン株式会社 エバンジェリスト

兵庫県伊丹市出身。米国州立南イリノイ大学卒業。
認証系独立 ASP 、動画・音楽配信システム構築、決済代行事業者を経て現職。ユーザー視点に立ったわかりやすい AWS のサービス解説を心掛ける。
AWS のどんなサービスでも 1 分づつ資料なしで説明することができる、という特技を持つ自称【AWSマニア】

AWS のベストプラクティスを毎月無料でお試しいただけます

さらに最新記事・デベロッパー向けイベントを検索

下記の項目で絞り込む
絞り込みを解除 ≫
フィルタ
フィルタ
1

AWS を無料でお試しいただけます

AWS 無料利用枠の詳細はこちら ≫
5 ステップでアカウント作成できます
無料サインアップ ≫
ご不明な点がおありですか?
日本担当チームへ相談する