(JavaScript・Python)AWSでWebサービスを作る - アクセスカウンターの作成

はじめに

この記事では、AWSの入門者に向けてWebサービスの作成方法を説明します。
今回は最も簡単なWebサービスである「アクセスカウンター」を作ります。

私のホームページへようこそ。
あなたは…………人目のお客様です。

Webサービスとは

インターネット上のサーバーで処理をすることです。
▼さらに読む

たとえば、YouTubeで動画を投稿すると、インターネット上に保存され、他のユーザーが見ることができます。SNSに投稿すると、他のユーザーにメッセージが届きます。これは、インターネット上のサーバーで処理をしています。

アクセスカウンターもWebサービスです。ユーザーがWebページを訪問すると「訪問しました」とサーバーに伝え、サーバーは回数カウンタを１つ増やし、その結果をユーザーに返します。

AWS（エー・ダブリュー・エス）とは

AWSは「Amazon Web Services」という、オンライン販売のAmazonが運営しているサービスで、インターネット上にデータを保存したり、インターネット上で計算処理をしたりと、様々な機能を提供しています。
▼さらに読む

Webサービスを提供するには、本来なら、自前でサーバーのためのコンピューターを用意して、プログラムを動かし続けなければなりません。世界中の人にアクセスの入り口を開くので、危険もあります。多くの人が来て、回線がパンクするかもしれません。

AWSは、サーバーの運用を365日24時間してくれて、何万人の人が一度に訪問しても、問題なく分散処理してくれます。アクセス量やデータ容量に応じて料金がかかります。
サービスには無料枠があるので、その範囲内でお金をかけずにサーバープログラムを動かしてみます。

流れ

1. AWSのアカウントを作成する
2. DynamoDBで、データベースを作成する
3. Lambdaで、サーバープログラムを書く
4. API Gatewayで、APIを公開する
5. クライアントのページを作成する

AWSのアカウントを作成する

アカウントの作成方法は、以下のページに詳しく書いてありますので、参照してください。

https://aws.amazon.com/jp/register-flow/

DynamoDBで、データベースを作成する

DynamoDB（ダイナモ・データベース）とは

DynamoDBは、応答が早く、大規模なアクセスに耐えられるデータベースです。
▼さらに読む

[キー]を指定すれば[値]を取り出せる「NoSQL」という方式のデータ保管庫で、だいたい次のような感じで値を読み書きできます。

name = getItem("名前")    # キー「名前」に対応する値を読み取る
putItem("名前", "太郎")    # キー「名前」に対して、値「太郎」を書き込む

無料利用枠について

目安として、容量（25GB）・通信量（毎秒1KB×25回）が無料で使えます。
個人で使うには十分です。
▼さらに読む

通信量の無料枠は本当はもっと複雑なのですが、大まかには次の通りです。

• 書き込み：　１秒あたり　1KB×25回
• 読み込み：　１秒あたり　4KB×25回

なお、使わなかった通信量は、５分間だけ繰り越すことができます。
毎秒25回を超える読み書きが必要な場合は、この上限を手動で引き上げて、上限に応じた利用料を支払うことになります。

通信量の計算方法は、以下のページに詳しく書いてあります。

読み込み/書き込みキャパシティーモード - Amazon DynamoDB

データベースのテーブル作成

新規のテーブル「test00」を作成する手順を説明します。
▼さらに読む

• 以下のリンクをクリックし、DynamoDBにログインします。

https://console.aws.amazon.com/dynamodb/

• 「テーブルの作成」をクリックします。

• テーブル名：　test00（任意）
• プライマリキー（パーティションキー）：　k（任意）

• テーブル設定 ＞ デフォルト設定の仕様：　解除
  ※解除しないと利用料発生の可能性あり

• 読み込み/書き込みキャパシティーモード：　プロビジョンド (無料利用枠の対象)

• Auto Scaling：　（解除, 解除）
  ※解除しないと利用料発生の可能性あり

• プロビジョニングされたキャパシティー：　（5, 5）
  目安として、１秒間あたり「1KB×5回」程度のアクセスができます（後で変更可能）。
  料金が書いてありますが、(25, 25)までは無料利用枠の範囲内です。

• ページ最下部の「作成」をクリックします。

ここまでの手順で、「test00」という名前のテーブルを作成することができました。

データの追加

ページの来訪者を記録するために、キー「counter」と、値「0」のペアを登録します。
▼さらに読む

• 「項目」タブ＞「項目の作成」をクリックします。

• 「Tree▾」をクリックして代わりに「Text▾」を選び、次のように入力します。

{
  "k": "counter",
  "v": 0
}

• 右下にある「保存」を押します。

これで、ページ来訪者を記録することができたので、次は外部からアクセスがあるたびに、数値を１ずつ増やしていくことを目指します。

Lambdaで、サーバープログラムを書く

Lambda（ラムダ）とは

Lambdaは、プログラマが自分で書いたコードを、インターネット上で実行してくれるサービスです。
▼さらに読む

他のユーザーからWebアクセスされたり、ファイルをアップロードされたり、メールが送られたり、といったイベントがあると、それに応じてプログラムを実行できます。

無料利用枠について

１ヶ月あたり100万回の実行、37日の計算時間が無料で使えます。
個人で使うには十分です。
▼さらに読む

厳密には、320万秒（37日）の計算時間を利用できるのは、割り当てメモリを128MBに制限した場合で、メモリを２倍にすれば、計算できる時間は半分の18.5日になります。

実際には、メモリを2倍割り当てると、CPU能力も2倍割り当ててくれるので、約2倍早く計算が終わりますが、無料利用枠をはみ出しやすくなります。

詳しくはAmazonの人が書いた記事を参照してください。

初めてのAWS Lambda ～AWS Lambdaで始めるイベントドリブンアプリケーション (3/5)：CodeZine（コードジン）

関数の作成

DynamoDBから取得した値を１増やして書き戻す、という関数の作り方を説明します
▼さらに読む

• 次のリンクをクリックし、Lambdaにログインします。

https://console.aws.amazon.com/lambda/

• 右上の「関数の作成」をクリックします。

• 関数の作成：　一から作成
• 関数名：　func00（任意）
• ランタイム：　Python3.8（執筆時点での最新バージョンです）

• 右下の「関数の作成」をクリックします。

• 関数コードを次のように記述します。

import json
import boto3
from boto3.dynamodb.conditions import Key

table = boto3.resource("dynamodb").Table("test00") #DynamoDBのテーブル名を入れる

# 関数　ここから始まる
def lambda_handler(event, context):
    n = get_item("counter") # DynamoDBの"counter"を取得する
    n += 1;                 # 来訪者数を１人増やす
    put_item("counter", n)  # DynamoDBの"counter"を更新する
    return http_response(n) # クライアントに送信する

# 関数　キー・値のペアを登録する
# 　　　キー・値を削除する（value=Noneの場合）
# 例外　ConnectionError（データベース接続に失敗した場合）
def put_item(key, value):
    if value is None:
        res = table.delete_item(Key={"k":key})
    else:
        res = table.put_item(Item={"k":key, "v":value})
    if res["ResponseMetadata"]["HTTPStatusCode"] != 200:
         raise ConnectionError("putItem() failed.")
    return

# 関数　キーに対応する値を取得する
# 例外　ConnectionError（データベース接続に失敗した場合）
# 返却　取得した値
# 　　　None（キーが登録されていない場合）
def get_item(key):
    res = table.get_item(Key={"k":key}, ConsistentRead=True);
    if res["ResponseMetadata"]["HTTPStatusCode"] != 200:
         raise ConnectionError("putItem() failed.")
    if "Item" not in res:
        return None
    return res["Item"]["v"]

# 関数　HTTPレスポンスを返却する
# 引数　送信する文字列
def http_response(body):
    headers = {
        "Access-Control-Allow-Headers" : "Content-Type",
        "Access-Control-Allow-Origin"  : "*",
        "Access-Control-Allow-Methods" : "GET,POST"
    }
    return {
        "isBase64Encoded": False,
        "statusCode"     : 200,
        "headers"        : headers,
        "body"           : body
    }

これで関数はできあがりです。

データの登録・取得・クライアントへの応答は定型処理なので、関数(putItem, getItem, httpResponse)にまとめておきました。

デプロイ＆テスト

関数ができたので、いよいよテストしてみます。
▼さらに読む

• 右上にある「デプロイ」と「テスト」をクリック

• テストイベントの名前：　「test（任意）」
• 「作成」をクリック

• また「テスト」をクリックするとテストが開始します。
• すると、エラーが発生します。LambdaからDynamoDBへのアクセスが許可されていないようです。

アクセス権限の設定

LambdaからDynamoDBを読み書きできるように、アクセス権限を追加します。
▼さらに読む

• タブ「アクセス権限」をクリックします。

• 実行ロール＞ロール名のリンクをクリックします。

• 右下の「ポリシーをアタッチします」をクリックします。

• フィルタを使って「AmazonDynamoDBFullAccess」を検索し、選択できたら、右下の「ポリシーのアタッチ」をクリックします。

• 権限の設定ができたので、「テスト」をクリックすると、関数は無事に実行されます。
  実行するごとにカウンタは増えていきます。

これでようやくLambdaでサーバープログラムを動かすことができるようになりました。

API Gatewayで、APIを公開する

API Gateway（エー・ピー・アイ・ゲートウェイ）とは

API Gatewayは、AWSの中で行っている計算処理やデータ保存などを、外部から操作できるように公開するサービスです。
▼さらに読む

今回の場合、API Gatewayの役割は以下の通りです。

• ユーザーがURLを指定してデータを送信すると、アクセスを受け付ける
• データをLambdaに渡す
• Lambdaから戻ってきたデータをユーザーに渡す

つまり、URLにアクセスするクライアントユーザーと、Lambdaを橋渡ししています。

料金について

100万リクエスト（アクセス）につき1.29USDなので、7751リクエストまでなら0.00USD（請求無し）です。※2020/12/30時点
▼さらに読む

これはアジアパシフィック１（東京）のリージョンの料金です。
通信量512KBあたり1リクエストとして数えられます。
料金の改定もあり得るので、詳細は以下のページで確認してください。

料金 - Amazon API Gateway | AWS

APIを作成する

外部アクセスからLambdaを呼び出すAPIの作り方を説明します。
▼さらに読む

- 次のリンクをクリックし、API Gatewayにログインします。
https://console.aws.amazon.com/apigateway/

• 右上の「APIを作成」をクリック
• HTTP APIの「構築」をクリック

• 「結合を追加」をクリック
• 空欄：　「Lambda」を選択
• Lambda関数：　既に作成した「func00」を選択

• API名：　「api00（任意）」と入力
• 右下の「確認して作成」をクリック

• 右下の「作成」をクリック

これで、URLを指定すると、Lambda関数にアクセスできるようになりました。

URLにアクセスする

URLを入力して、実際にアクセスカウンターの数字が取得できるか試してみます。
▼さらに読む

• 「URLを呼び出す」の下のURLをクリック

• {"message":"Not Found"} と表示されます。アクセス失敗です。
• そこで、URLの末尾に「/func00」を追加してリトライ

• 成功です。アクセスカウンターの数値が表示されました。
  再読み込みをすると、カウントが増えていきます。

クライアントのページを作成する

最後の仕上げに、アクセスカウンターが表示されるWebページを作ります。
▼さらに読む

• メモ帳（notepad.exe）などを起動し、コードを次のように記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ホームページ</title>
  </head>
  <body>
    <div style="border: 5px; border-style: solid; margin: 10px; padding: 10px">
      私のホームページへようこそ。<br />
      あなたは
      <span id="counter" style="font-size: 150%">…………</span>
      人目のお客様です。
    </div>
    <script>

// ※適切なURLに変更してください↓
const URL =
  "https://gu9ilo0iok.execute-api.ap-northeast-1.amazonaws.com/func00";
// URLにアクセスして、関数callbackGetを呼ぶ
httpGet(URL, callbackGet);

// httpサーバーに対してGETする
// 引数 url：アクセスするURL
// 引数 callback：完了時に呼ばれるコールバック（引数　受信した文字列）
function httpGet(url, callback) {
  fetch(url)
    .then((s) => s.text())
    .then((s) => callback(s));
}

// httpサーバーに対してPOSTする
// 引数 url：アクセスするURL
// 引数 body：メッセージ本文
// 引数 (callback)：完了時に呼ばれるコールバック（引数　受信した文字列）
function httpPost(url, body, callback) {
  let opt = {};
  (opt.method = "POST"), (opt.body = body.toString());
  opt.header = { "Content-Type": "text/plain" };
  fetch(url, opt)
    .then((s) => s.text())
    .then((s) => {
      if (typeof callback === "function") callback(s);
    });
}

// GETしたオブジェクトを受け取り、処理をする
function callbackGet(arg) {
  let s = ("00000000" + arg).slice(-8); // 0で埋めて8桁にする
  document.getElementById("counter").innerHTML = s;
}

    </script>
  </body>
</html>

• 「counter.html（任意）」とでも名前をつけて保存します。
  ブラウザで開くと、次のように表示されるはずです。これで完成です。お疲れさまでした。

私のホームページへようこそ。
あなたは…………人目のお客様です。

おわりに

AWS登録から始めると１時間ほどかかったと思いますが、お付き合いいただきありがとうございました。

アクセスカウンター自体は大したコンテンツではありませんが、この技術を応用すれば、ショッピングサイトなど、様々なサービスを開発できると思います。

自分でWebサービスを開発するために、様々なページを参考にしましたが、最初から最後まで説明しているページが無かったので時間が掛かりました。次にAWSで開発する人が困らないように、ここに道を残しておきます。

「うまくいきました」・「このコードは変えたほうが良いです」など、気軽にコメントを残していただけると幸いです。