AWS

ブラウザでAWS SDK for JavaScript v3を扱う

スポンサーリンク
ブラウザでAWS SDK for JavaScript v3を扱う AWS
スポンサーリンク
スポンサーリンク

ブラウザでAWS SDK for JavaScript v3を扱う

AWSを使用してWebアプリを開発する場合、AWS SDK for JavaScriptの使用がベストプラクティスとなります。
同SDKには2つのバージョンがあります。v2とv3です。
今回はAWS SDK for JavaScript v3を使用して、Webアプリを開発する方法を確認します。

構築する環境

AWS認定資格試験テキスト AWS認定ソリューションアーキテクト - アソシエイト 改訂第2版 | 佐々木 拓郎, 林 晋一郎, 金澤 圭 | 産業研究 | Kindleストア | Amazon
Amazonで佐々木 拓郎, 林 晋一郎, 金澤 圭のAWS認定資格試験テキスト AWS認定ソリューションアーキテクト - アソシエイト 改訂第2版。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
Diagram of using AWS SDK for JavaScript v3 in browser.

S3バケットを作成し、静的ウェブサイトホスティング機能を有効にします。内部にHTMLファイルを設置して、コンテンツを用意します。
Cognito IDプールで、ブラウザスクリプトからAWSリソースへアクセスするためのクリデンシャルを取得します。今回はLambdaを実行する権限を付与します。
Lambda関数で実行するコードですが、Python3.8を選択し、現在の日付を返すものとします。

CloudFormationテンプレートファイル

上記の構成をCloudFormationで構築します。
以下のURLに、CloudFormationテンプレートに加え、ブラウザスクリプト等を配置してます。

awstut-fa/034 at main · awstut-an-r/awstut-fa
Contribute to awstut-an-r/awstut-fa development by creating an account on GitHub.

ブラウザスクリプトの作成手順

以下のAWS公式ページを参考にして作成します。

とはAWS SDK for JavaScript? - AWS SDK for JavaScript
のための SDK JavaScript のための API を提供しています。AWS。
Webpack によるアプリケーションのバンドル - AWS SDK for JavaScript
SDK for JavaScript で webpack を使用してウェブアプリケーションをバンドルします。

npmのインストール・初期化

AWS SDK for JavaScript v3を使用してWebアプリを開発する場合、npmのインストールが必要となります。
インストール手順は、以下のページをご確認ください。

Downloading and installing Node.js and npm | npm Docs
Documentation for the npm registry, website, and command-line interface

インストール完了後、初期化処理を実行します。

$ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. ... Press ^C at any time to quit. package name: (034) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) <meta charset="utf-8">About to write to /path/to/your/directory/package.json: { "name": "034", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes)
Code language: Bash (bash)

これでpackage.jsonが作成されました。

Webpackインストール・設定

ブラウザスクリプトからAWS SDK for JavaScript v3を使用する場合、Webpackが必要です。
npmから、2つのパッケージをインストールします。

$ npm install --save-dev webpack ... + webpack@5.70.0 ... $ npm install --save-dev path-browserify ... + path-browserify@1.0.1 ...
Code language: Bash (bash)

webpack.config.jsファイルを作成して、Webpackの設定を行います。
以下がwebpack.config.jsの中身です。

var path = require("path"); module.exports = { entry: [path.join(__dirname, "browser.js")], output: { path: __dirname, filename: 'main.js' }, resolve:{ fallback: { path: require.resolve("path-browserify")} } };
Code language: JavaScript (javascript)

package.jsonファイルの修正も行います。

{ "name": "034", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "path-browserify": "^1.0.1", "webpack": "^5.70.0" } }
Code language: JSON / JSON with Comments (json)

Webpackでビルドするように設定します。

SDK for JavaScriptのインストール

v3の場合、SDKは複数のパッケージに分割されており、必要なものだけをnpmでインストールすることになります。
今回はCognito、Lambdaを扱いますので、合計4パッケージをインストールします。

$ npm install @aws-sdk/client-cognito-identity ... + @aws-sdk/client-cognito-identity@3.56.0 ... $ npm install @aws-sdk/credential-provider-cognito-identity ... + @aws-sdk/credential-provider-cognito-identity@3.56.0 ... $ npm install @aws-sdk/client-lambda ... + @aws-sdk/client-lambda@3.56.0 ... $ npm install @aws-sdk/util-utf8-browser ... + @aws-sdk/util-utf8-browser@3.55.0 ...
Code language: Bash (bash)

ブラウザスクリプト作成

webpack.config.jsで指定した通り、browser.jsにコードを記載します。

import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity"; import { LambdaClient, InvokeCommand } from "@aws-sdk/client-lambda"; import { toUtf8 } from "@aws-sdk/util-utf8-browser"; const REGION = "ap-northeast-1"; const IDENTITY_POOL_ID = "[ID of Cognito ID Pool]"; const FUNCTION_NAME = "[Lambda Function Name]"; const lambdaClient = new LambdaClient({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: IDENTITY_POOL_ID }), }); const showLambdaResult = async () => { try { const response = await lambdaClient.send( new InvokeCommand({ FunctionName: FUNCTION_NAME }) ); document.getElementById("viewer").innerHTML = `<p>${toUtf8(response.Payload)}</p>` } catch (err) { console.log(err); } }; window.showLambdaResult = showLambdaResult;
Code language: JavaScript (javascript)

今回は開発方法の概要を確認することを目的としていますので、コードの詳細な解説は割愛します。
importでインストール済みのパッケージから、必要なクラスや関数を読み込みます。
Cognito IDプールとLambda用のクライアントオブジェクトを作成します。それらを使用してLambda関数を実行し、取得した文字列をHTMLに埋め込むように関数(showLambdaResult)を定義し、windowsオブジェクトに登録しておきます。

ファイルが完成したら、ビルドします。

$ npm run build > 034@1.0.0 build /path/to/your/directory > webpack asset main.js 180 KiB [emitted] [minimized] (name: main) 1 related asset ...
Code language: Bash (bash)

ビルドが正常に完了すると、main.jsが作成されます。こちらもwebpack.config.jsで設定した通りです。

HTMLファイル作成

最後にユーザーがアクセスするHTMLファイルも作成します。

<!DOCTYPE html> <html> <head> <title>fa-034</title> </head> <body> <div id="viewer"></div> <script type="text/javascript" src="./main.js"></script> <script> showLambdaResult(); </script> </body> </html>
Code language: HTML, XML (xml)

シンプルなHTMLファイルです。
先ほど定義した関数(showLambdaResult)を実行します。

(参考)CloudFormationテンプレートファイル

今回は開発方法の概要を確認することを目的としていますので、テンプレートファイルの詳細な解説は割愛します。

S3の静的ウェブサイトホスティング機能

Resources: Bucket: Type: AWS::S3::Bucket Properties: BucketName: !Ref Prefix AccessControl: Private WebsiteConfiguration: IndexDocument: index.html BucketPolicy: Type: AWS::S3::BucketPolicy Properties: Bucket: !Ref Prefix PolicyDocument: Statement: Action: - s3:GetObject Effect: Allow Resource: - !Sub "arn:aws:s3:::${Bucket}/*" Principal: "*"
Code language: YAML (yaml)

ポイントは静的ウェブサイトホスティング機能です。
詳細は以下のページをご確認ください。

Lambda関数で実行するコードをインラインで定義

Resources: Function: Type: AWS::Lambda::Function Properties: FunctionName: !Sub "${Prefix}-function" Runtime: python3.8 Role: !GetAtt FunctionRole.Arn Handler: index.lambda_handler Code: ZipFile: | import datetime def lambda_handler(event, context): return str(datetime.date.today())
Code language: YAML (yaml)

ZipFileプロパティを使用することで、コードをインラインで定義することができます。今回は現在の日付を返します。
詳細は以下のページでご確認ください。

Cognitoでクリデンシャル作成

Resources: IdentityPool: Type: AWS::Cognito::IdentityPool Properties: AllowUnauthenticatedIdentities: true IdentityPoolName: !Sub "${Prefix}-IdentityPool" IdentityPoolRoleAttachment: Type: AWS::Cognito::IdentityPoolRoleAttachment Properties: IdentityPoolId: !Ref IdentityPool Roles: unauthenticated: !GetAtt IdentityPoolAuthenticatedRole.Arn IdentityPoolAuthenticatedRole: Type: AWS::IAM::Role Properties: AssumeRolePolicyDocument: Version: 2012-10-17 Statement: - Effect: Allow Action: sts:AssumeRoleWithWebIdentity Principal: Federated: cognito-identity.amazonaws.com Condition: StringEquals: cognito-identity.amazonaws.com:aud: !Ref IdentityPool ForAnyValue:StringLike: cognito-identity.amazonaws.com:amr: unauthenticated Policies: - PolicyName: IdentityPoolUnauthenticatedPolicy PolicyDocument: Version: 2012-10-17 Statement: - Effect: Allow Action: - lambda:InvokeFunction Resource: - !Ref FunctionArn
Code language: YAML (yaml)

Cognitoを使用することで、AWSリソースにアクセスするためのクリデンシャルを生成することができます。
詳細は以下のページをご確認ください。

環境構築

CloudFormationを使用して、本環境を構築し、実際の挙動を確認します。

CloudFormationスタックを作成し、スタック内のリソースを確認する

CloudFormationスタックを作成します。
スタックの作成および各スタックの確認方法については、以下のページをご確認ください。

各スタックのリソースを確認した結果、今回作成された主要リソースの情報は以下の通りです。

  • バケット名:fa-034
  • Cognito IDプール:ap-northeast-1:f78ed244-a960-481d-b20d-54649660f668
  • Lambda関数名:fa-034-function

S3バケットにHTMLファイル・スクリプトを配置する

AWS CLIから2ファイルを配置します。

$ aws s3 cp index.html s3://fa-034 upload: ./index.html to s3://fa-034/index.html $ aws s3 cp main.js s3://fa-034 upload: ./main.js to s3://fa-034/main.js
Code language: Bash (bash)

動作検証

準備が整いましたので、HTMLファイルにアクセスします。
今回の構成ですと、以下のURLとなります。

http://fa-034.s3-website-ap-northeast-1.amazonaws.com/

Successfully executed Lambda using SDK.

現在の日付が返ってきました。
以上のことから、AWS SDK for JavaScript v3を使用して、Lambdaを実行することができました。

まとめ

AWS SDK for JavaScript v3を使用して、Webアプリを開発する方法を確認しました。

タイトルとURLをコピーしました