【更新版】とりあえず動かす！Cloud9 & React & Amplify & GraphQLの環境構築 (function構築編)
導入
前に書いた記事（とりあえず動かす！Cloud9 & React & Amplify & GraphQLの環境構築）の更新版です。
Cloud9にReactプロジェクトを作成してAmplifyを構築して疎通確認するまでの手順をまとめました。前回記事からの変更点は要点ごとに記事を分けたことです。
留意事項
- リージョン：オレゴン（us-west-2）
- リージョンは↑で統一しているので、以降の手順を進める際にはリージョンをオレゴン（us-west-2）で進めます
- Reactのプロジェクト名：sampleapp
- 全て↑のフォルダ配下で行います
関連する記事の全体
- IAM作成編
- Cloud9&React準備編
- Amplify初期化編
- GraphQL構築編
- function構築編 ← イマココ
- 疎通確認編
- ホスティング編
- 後かたずけ編
構成
最終的に下の構成にしたいので今回はfunction(Lambda)の構築を行います。
functionの追加
前回までの記事で構築したReactプロジェクトsampleappの配下にターミナルで移動します。
今回の疎通確認ではLambdaも利用するので合わせて構築します。以下のコマンドでfunctionを追加します。
amplify add function
Lambdaのfunctionを追加するので「Lambda function」を選択します。
? Select which capability you want to add: (Use arrow keys)
❯ Lambda function (serverless function)
Lambda layer (shared code & resource used across functions)
Lambdaのfunction名を入力します。schemaで設定した「lambdaSampleapp」を入力します。入力すると同時に「sampleappxxxxx」の表示は消えます。
? Provide an AWS Lambda function name: (sampleappxxxxx)
Lambdaの言語を選択します。javascriptで統一するので「NodeJS」を選択します。
? Choose the runtime that you want to use: (Use arrow keys)
.NET 6
Go
Java
❯ NodeJS
Python
Lambdaのテンプレートを選択します。疎通確認のみなので「Hello World」を選択します。
Choose the function template that you want to use: (Use arrow keys)
AppSync - GraphQL API request (with IAM)
CRUD function for DynamoDB (Integration with API Gateway)
GraphQL Lambda Authorizer
❯ Hello World
Lambda trigger
Serverless ExpressJS function (Integration with API Gateway)
他の拡張設定は行わないので「N」を押します。
✅ Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration
- Environment variables configuration
- Secret values configuration
? Do you want to configure advanced settings? (y/N)
Lambdaの編集は後ほど手動で行うため、ここでは「N」を選択します。
? Do you want to edit the local lambda function now? (Y/n)
しばらくすると以下が表示されてfunctionの追加が完了します。
✅ Successfully added resource lambdaSampleapp locally.
functionの編集
先ほど作成したLambdaのfunctionを疎通確認用に手動で修正します。
sampleapp/amplify/backend/function/lambdaSampleapp/src/index.jsを開きます。
置き場所は分かりにくいので、Cloud9のフォルダ構成で以下の場所にあります。
疎通確認用に中身を全て以下に書き換えて保存します。
/**
* @type {import('@types/aws-lambda').APIGatewayProxyHandler}
*/
exports.handler = async (event) => {
console.log(`EVENT: ${JSON.stringify(event)}`);
const msg = event.arguments.param.msg ? event.arguments.param.msg : 'null'
// 作成日の昇順で並び替え
const tmpList = event.arguments.param.getList.sort((first, second) => {
if(first.createdAt > second.createdAt) {
return 1;
}
if(first.createdAt < second.createdAt) {
return -1;
}
return 0;
})
return {
statusCode: 200,
returnMessage: JSON.stringify('msg : ' + msg + ', random number is ' + getRandomNumber()), // Lambda側の乱数をメッセージに追加して返却
todoList: tmpList
};
};
// 乱数の生成
const getRandomNumber = () => {
return Math.floor(Math.random() * 10)
};
functionのアップロード
作成したLambdaのfunctionをアップロードします。やり方はGraphQLのアップロードと同じです。以下のコマンドを実行します。
amplify push
次に続けるか聞かれるので「Y」で次へ行きます。
Current Environment: dev
┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Function │ lambdaSampleapp │ Create │ awscloudformation │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Api │ sampleapp │ No Change │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? (Y/n) ‣
しばらくすると以下が表示されfunctionのアップロードが完了します。
Deployment state saved successfully.
GraphQL transformer version: 2
以上でAmplifyでの構築が完了です。次回はいよいよ動かします！
参考サイト
Discussion