はじめに
今更ながらGPTを使っている。GPTを使うとLambda(Node.js)をつかって、簡単にフロントエンド部分が書ける。フロントよくわからないので非常に良い。今回はLambda、APIGateway、DynamoDBを使ってCloudFormationでテンプレート化してみる。
今回やること
- CloudFormationでテンプレート化する（SAMは使わない）
- 画像はS3からロードさせる
- WebページDynamoDBの表示、DBへの入力欄を持つ
作ったもの
テンプレート化の対象
-
テンプレート化の対象。閉域用途のためVPCエンドポイント経由で。
-
Lambdaに乗せるindex.mjs
（画像付き＋DynamoDB機能付き･･･基礎はGTP、画像はdale3で作った）
Clodformationテンプレート
vpcエンドポイント経由でAPI Gatewayへアクセスさせる部分はコメントアウトした。
template.yaml
AWSTemplateFormatVersion: "2010-09-09"
Parameters:
UUID:
Description: UUID of stack items
Type: String
APIPath:
Type: String
Default: TrialPath
PartitionKey:
Type: String
Default: pipelineID
# vpcEndpoint:
# Description: vpce
# Type: String
# Default: vpce-xxxxxxxx
Resources:
MyTable:
Type: AWS::DynamoDB::Table
Properties:
TableName: !Sub GitReuslt-${UUID}
AttributeDefinitions:
- AttributeName: !Ref PartitionKey
AttributeType: S
KeySchema:
- AttributeName: !Ref PartitionKey
KeyType: HASH
BillingMode: PROVISIONED
ProvisionedThroughput:
ReadCapacityUnits: 1
WriteCapacityUnits: 1
RestAPI:
Type: AWS::ApiGateway::RestApi
Properties:
EndpointConfiguration:
Types:
- REGIONAL
# - PRIVAETE
Name: !Sub "frontend-${UUID}-API"
# Policy: {
# "Version": "2012-10-17",
# "Statement": [
# {
# "Effect": "Allow",
# "Principal": "*",
# "Action": "execute-api:Invoke",
# "Resource": [
# "execute-api:/*"
# ]
# },
# {
# "Effect": "Deny",
# "Principal": "*",
# "Action": "execute-api:Invoke",
# "Resource": [
# "execute-api:/*"
# ],
# "Condition" : {
# "StringNotEquals": {
# "aws:SourceVpce": !Sub "${vpcEndpoint}"
# }
# }
# }
# ]
# }
APIResource:
Type: "AWS::ApiGateway::Resource"
Properties:
RestApiId: !Ref RestAPI
ParentId: !GetAtt RestAPI.RootResourceId
PathPart: !Ref APIPath
APIPermission:
Type: "AWS::Lambda::Permission"
Properties:
FunctionName: !Ref MyLambdaFunction
Action: "lambda:InvokeFunction"
Principal: apigateway.amazonaws.com
APIMethod:
Type: AWS::ApiGateway::Method
Properties:
RestApiId: !Ref RestAPI
ResourceId: !Ref APIResource
HttpMethod: ANY
AuthorizationType: NONE
Integration:
Type: AWS_PROXY
IntegrationHttpMethod: "POST"
Uri: !Sub "arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${MyLambdaFunction.Arn}/invocations"
DependsOn: APIPermission
APIDeployment:
Type: AWS::ApiGateway::Deployment
Properties:
RestApiId: !Ref RestAPI
DependsOn: APIMethod
APIStage:
Type: AWS::ApiGateway::Stage
Properties:
RestApiId: !Ref RestAPI
StageName: prod
Description: prod stage
DeploymentId: !Ref APIDeployment
LambdaServiceRole:
Type: AWS::IAM::Role
Properties:
AssumeRolePolicyDocument:
Version: '2012-10-17'
Statement:
- Effect: Allow
Principal:
Service: lambda.amazonaws.com
Action: sts:AssumeRole
Policies:
- PolicyName: InlinePolicy
PolicyDocument:
Version: "2012-10-17"
Statement:
- Effect: Allow
Action: iam:PassRole
Resource: '*'
ManagedPolicyArns:
- arn:aws:iam::aws:policy/AmazonDynamoDBFullAccess
- arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole
- arn:aws:iam::aws:policy/AmazonS3FullAccess
RoleName: !Sub "LambdaServiceRole-${UUID}"
MyLambdaFunction:
Type: AWS::Lambda::Function
Properties:
FunctionName: !Sub "App-Lambda-${UUID}"
Handler: index.handler
Role: !GetAtt LambdaServiceRole.Arn
Runtime: nodejs18.x
Timeout: 300
Environment:
Variables:
APIPATH: !Sub prod/${APIPath}
APIURL: !Sub https://${RestAPI}.execute-api.${AWS::Region}.amazonaws.com/
BUCKETNAME01: images-for-serverless-page
DYNAMODB_TALBENAME: !Ref MyTable
IMAGE_KEY01: background.png
PARTITION_KEY: !Ref PartitionKey
Code:
ZipFile: |
const { DynamoDBClient, PutItemCommand, ScanCommand } = require("@aws-sdk/client-dynamodb")
const { GetObjectCommand, S3Client } = require ("@aws-sdk/client-s3");
const { getSignedUrl } = require("@aws-sdk/s3-request-presigner");
const client = new DynamoDBClient({ region: "ap-northeast-1" });
const s3Client = new S3Client({ region: "ap-northeast-1" });
const TABLE_NAME = process.env.DYNAMODB_TALBENAME
const URL = process.env.APIURL
const apiPath = process.env.APIPATH
const bucketName = process.env.BUCKETNAME01
const imageKey = process.env.IMAGE_KEY01
const partitionKey = process.env.PARTITION_KEY
exports.handler = async (event) => {
switch (event.httpMethod) {
case "GET":
return getItems();
case "POST":
return addItem(event);
default:
return {
statusCode: 400,
headers: {
"Content-Type": "text/html",
},
body: "<p>Invalid method</p>",
};
}
};
const getItems = async () => {
const command = new ScanCommand({ TableName: TABLE_NAME });
const data = await client.send(command);
// 署名付きURLを取得
const s3command = new GetObjectCommand({
Bucket: bucketName,
Key: imageKey
});
const imageUrl = await getSignedUrl(s3Client, s3command, { expiresIn: 3600 });
let body = `<form action="${URL}${apiPath}" method="post" enctype="application/x-www-form-urlencoded">
<input type="text" name="data" placeholder="Enter data" required />
<button type="submit">Add</button>
</form>
<img src="${imageUrl}" alt="S3 Image" /><br><br>
<table border="1"><tr><th>ID</th><th>Data</th></tr>`;
data.Items.forEach(item => {
body += `<tr><td>${item[partitionKey]["S"]}</td><td>${item.data.S}</td></tr>`;
});
body += "</table>";
return {
statusCode: 200,
headers: {
"Content-Type": "text/html",
},
body: body,
};
};
const addItem = async (event) => {
var Item_ = {}
Item_[partitionKey] = { S: Date.now().toString() }
Item_["data"] = { S: unescape(event.body.split('=')[1]) }
const command = new PutItemCommand({
TableName: TABLE_NAME,
Item: Item_,
});
await client.send(command);
return {
statusCode: 303,
headers: {
"Location": "/" + apiPath,
"Content-Type": "text/html",
},
body: "",
};
};
Outputs:
APIENdppointURL: # 渡す値を出力する
Value: !Sub https://${RestAPI}.execute-api.${AWS::Region}.amazonaws.com/prod/${APIPath}
最後に
- はじめPowershellでテンプレートからcreate stackしていたら、ダブルクオーテーションをうまく読み取れなかったため、bashからスタック作成するようにした。
- API Gatewayで定義すべきリソースが結構多かった。SAM使った方が簡単そう…
- テンプレートにLambdaコードをベタ書きするのもいい加減やめたい。