カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-4

AWS Amplify CLIで簡単なREST APIをAWSにデプロイしよう

前章でAWSのリソースを操作するための準備をおこないました。
ここからはStripeのデータにアクセスするためのREST APIをAWS上にデプロイします。

Amplify CLIでREST APIをセットアップしよう

REST APIはAmplify CLIを使うとコマンド1つでAWS上にセットアップできます。

amplify-react-stripeディレクトリで、以下のコマンドを実行しましょう。

console
Copied!
amplify add api

APIの種類を指定しよう

amplify add apiを実行すると、「GraphQLか?RESTか?」と質問が表示されます。

console
Copied!
? Please select from one of the below mentioned services: (Use arrow keys) ❯ GraphQL REST

今回はREST APIを作りますので、[REST]に[❯]を移動させて[Enter]キーを押しましょう。

? Please select from one of the below mentioned services: RESTのように表示されたら設定完了です。

APIの名前を決めよう

すると「APIの名前を決めてくれ」とメッセージが表示されます。

console
Copied!
? Provide a friendly name for your resource to be used as a label for this category in the project: (api0280aafc)

「Stripeを利用するAPI」を作りたいので、[stripeapi]と入力して[Enter]キーを押しましょう。

? Provide a friendly name for your resource to be used as a label for this category in the project: stripeapiと表示されて、次の質問が出れば入力完了です。

APIのパスを指定しよう

次の質問はAPIのパスを指定するものです。

console
Copied!
? Provide a path (e.g., /book/{isbn}): (/items)

ショップのAPIですので、今回は[/shop]と入力して[Enter]キーを押しましょう。

? Provide a path (e.g., /book/{isbn}): /shopのように表示されたら設定完了です。

AWS Lambdaを作成しよう

AWS Lambdaは、AWS AmplifyでREST APIを作成した場合に、APIバックエンドのコードを実行する環境を提供するサービスです。作成済みのLambda関数をここで選ぶこともできますが、今回は新規に作成します。

以下のように選択肢が表示されますので、[Create a new Lambda function]に[❯]を移動させて[Enter]キーを押しましょう。

console
Copied!
? Choose a Lambda source (Use arrow keys) ❯ Create a new Lambda function

? Choose a Lambda source Create a new Lambda functionと表示され、次の質問が表示されたら完了です。

Lambda関数名を指定しよう

? Provide an AWS Lambda function name: (amplifyreactstriped4c449fe)のように、Lambda関数の名前を聞くテキストが表示されます。amplifyStripeFunctionと入力しましょう。

? Provide an AWS Lambda function name: amplifyStripeFunctionと表示されて、次の質問が出れば入力完了です。

Lambda関数の実行環境を選ぼう

AWS LambdaはNode.js / Go/ Java / Python / Rubyなど、さまざまな実行環境が利用できます。

どの実行環境を使うかの質問が表示されますので、[Node.js]に[❯]を移動させて[Enter]キーを押しましょう。

console
Copied!
? Choose the runtime that you want to use: (Use arrow keys) .NET Core 3.1 Go Java ❯ Node.js Python

? Choose the runtime that you want to use: Node.jsのように表示されたら設定完了です。

Lambda関数のテンプレートを選ぼう

Lambda関数を新しく作る場合、ある程度コードが書かれたテンプレートを利用できます。
Node.jsで利用できるテンプレートの一覧が表示されますので、Serverless ExpressJS function (Integration with API Gateway)を選びましょう。

console
Copied!
? Choose the function template that you want to use: (Use arrow keys) CRUD function for DynamoDB (Integration with API Gateway) ❯ Hello World Lambda trigger Serverless ExpressJS function (Integration with API Gateway)

? Choose the function template that you want to use: Serverless ExpressJS function (Integration with API Gateway)と表示されて、次の質問が出れば入力完了です。

詳細設定をスキップしよう

以下のように「詳細設定を行うか否か?」の質問が表示されます。

console
Copied!
Available advanced settings: - Resource access permissions - Scheduled recurring invocation - Lambda layers configuration ? Do you want to configure advanced settings? (y/N)

今回設定するものはありませんので、[N]を入力し[Enter]キーを押しましょう。

続いて「今すぐLambda関数のコードを開くか?」と質問がでますが、これも[N]で回答しましょう。

console
Copied!
? Do you want to configure advanced settings? No ? Do you want to edit the local lambda function now? (Y/n)

以下のメッセージが表示され、APIリソースがローカル環境に準備されました。

console
Copied!
Successfully added resource amplifyStripeFunction locally. Next steps: Check out sample function code generated in <project-dir>/amplify/backend/function/amplifyStripeFunction/src "amplify function build" builds all of your functions currently in the project "amplify mock function <functionName>" runs your function locally "amplify push" builds all of your local backend resources and provisions them in the cloud "amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud Succesfully added the Lambda function locally

追加の質問がもう少し続きますが、基本的に全て[N]回答でOKです。

APIへのアクセス制限についての質問です。これも今は設定しませんので、[N]で回答します。

console
Copied!
? Restrict API access (Y/n) ? Restrict API access No

最後に2つめのAPIパスを作るかを聞かれます、今回は1つで充分ですので、これも[N]でOKです。

console
Copied!
? Do you want to add another path? (y/N) ? Do you want to add another path? No

最後に作成完了のメッセージが表示されます。

console
Copied!
Successfully added resource stripeapi locally Some next steps: "amplify push" will build all your local backend resources and provision it in the cloud "amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

これでAPIの準備が整いました。

amplify-react-stripeディレクトリで、以下のコマンドを実行してみましょう。

console
Copied!
amplify status

下記のようにFunctionApiが新しく作成されたことが表示されます。

console
Copied!
Current Environment: dev | Category | Resource name | Operation | Provider plugin | | -------- | --------------------- | --------- | ----------------- | | Function | amplifyStripeFunction | Create | awscloudformation | | Api | stripeapi | Create | awscloudformation |

AWSに作成したAPIをデプロイしてみよう

amplify add apiだけではまだAWS上にはリソースがデプロイされません。
続いてAmplify CLIを使ってAWSへのリソースデプロイを行いましょう。

amplify-react-stripeディレクトリで、以下のコマンドを実行しましょう。

console
Copied!
amplify push

以下のように、新しく作成するリソースについての確認メッセージが表示されますので、[Y]を入力して続行しましょう。

console
Copied!
✔ Successfully pulled backend environment dev from the cloud. Current Environment: dev | Category | Resource name | Operation | Provider plugin | | -------- | --------------------- | --------- | ----------------- | | Function | amplifyStripeFunction | Create | awscloudformation | | Api | stripeapi | Create | awscloudformation | ? Are you sure you want to continue? (Y/n)

⠼ Uploading files...と表示されると、AWSへのデプロイが始まります。

続いて以下のようにデプロイ状況が随時表示されますので、2〜3分程度待ちましょう。

console
Copied!
UPDATE_IN_PROGRESS amplify-amplifyreactstripe-dev-235608 AWS::CloudFormation::Stack Sat Jul 17 2021 00:18:46 GMT+0900 (日本標準時) User Initiated CREATE_IN_PROGRESS functionamplifyStripeFunction AWS::CloudFormation::Stack Sat Jul 17 2021 00:18:52 GMT+0900 (日本標準時) ⠼ Updating resources in the cloud. This may take a few minutes...

デプロイが完了すると、✔ All resources are updated in the cloudと表示されます。
また、その下に作成したREST APIのURLも表示されています。

console
Copied!
UPDATE_COMPLETE_CLEANUP_IN_PROGRESS amplify-amplifyreactstripe-dev-235608 AWS::CloudFormation::Stack Sat Jul 17 2021 00:20:20 GMT+0900 (日本標準時) UPDATE_COMPLETE amplify-amplifyreactstripe-dev-235608 AWS::CloudFormation::Stack Sat Jul 17 2021 00:20:20 GMT+0900 (日本標準時) ✔ All resources are updated in the cloud REST API endpoint: https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev

REST API endpointのURLは新しくデプロイするたびに変わります。
下に用意したcURLコマンドのURLを、REST API endpointに表示されたものに変更してターミナルで実行してみましょう。

console
Copied!
curl https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev/shop

{"success":"get call succeed!","url":"/shop"}と表示されれば動作確認OKです。

もし、{"message":"Missing Authentication Token"}と表示された場合は、cURLコマンドのURLがdev/shopで終わる形になっているかを確認しましょう。

REST APIのコードを整理しよう

Serverless ExpressJS function (Integration with API Gateway)テンプレートを利用した場合、ExpressJSのソースコードはamplify-react-stripe/amplify/backend/function/amplifyStripeFunction/src/app.jsにあります。

VSCodeを使っている場合は、amplify-react-stripeディレクトリでcode amplify/backend/function/amplifyStripeFunction/src/app.jsを実行すると、ExpressJSのコードが書かれたファイルを直接開くことができます。

下に掲載しているコードは、app.jsの中身です。
ざっと見ていただくと、GET POST PUT DELETE全てのメソッドに対応した実装になっていることがわかります。

amplify/backend/function/amplifyStripeFunction/src/app.js
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
Copied!
/* Copyright 2017 - 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with the License. A copy of the License is located at http://aws.amazon.com/apache2.0/ or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ var express = require('express') var bodyParser = require('body-parser') var awsServerlessExpressMiddleware = require('aws-serverless-express/middleware') // declare a new express app var app = express() app.use(bodyParser.json()) app.use(awsServerlessExpressMiddleware.eventContext()) // Enable CORS for all methods app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*") res.header("Access-Control-Allow-Headers", "*") next() }); /********************** * Example get method * **********************/ app.get('/shop', function(req, res) { // Add your code here res.json({success: 'get call succeed!', url: req.url}); }); app.get('/shop/*', function(req, res) { // Add your code here res.json({success: 'get call succeed!', url: req.url}); }); /**************************** * Example post method * ****************************/ app.post('/shop', function(req, res) { // Add your code here res.json({success: 'post call succeed!', url: req.url, body: req.body}) }); app.post('/shop/*', function(req, res) { // Add your code here res.json({success: 'post call succeed!', url: req.url, body: req.body}) }); /**************************** * Example put method * ****************************/ app.put('/shop', function(req, res) { // Add your code here res.json({success: 'put call succeed!', url: req.url, body: req.body}) }); app.put('/shop/*', function(req, res) { // Add your code here res.json({success: 'put call succeed!', url: req.url, body: req.body}) }); /**************************** * Example delete method * ****************************/ app.delete('/shop', function(req, res) { // Add your code here res.json({success: 'delete call succeed!', url: req.url}); }); app.delete('/shop/*', function(req, res) { // Add your code here res.json({success: 'delete call succeed!', url: req.url}); }); app.listen(3000, function() { console.log("App started") }); // Export the app object. When executing the application local this does nothing. However, // to port it to AWS Lambda we will create a wrapper around that will load the app from // this file module.exports = app

今回作成するAPIはここまで多くありません。不要なAPIを削除します。

amplify-react-stripe/amplify/backend/function/amplifyStripeFunction/src/app.jsを開いて、以下のコードに書き換えましょう。

amplify/backend/function/amplifyStripeFunction/src/app.js
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
Copied!
/* Copyright 2017 - 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with the License. A copy of the License is located at http://aws.amazon.com/apache2.0/ or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ var express = require('express') var bodyParser = require('body-parser') var awsServerlessExpressMiddleware = require('aws-serverless-express/middleware') // declare a new express app var app = express() app.use(bodyParser.json()) app.use(awsServerlessExpressMiddleware.eventContext()) // Enable CORS for all methods app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*") res.header("Access-Control-Allow-Headers", "*") next() }); /********************** * 商品一覧を取得するAPI * **********************/ app.get('/shop/products', function(req, res) { // Add your code here res.json({success: 'get call succeed!', url: req.url}); }); /**************************** * Stripe Checkout * * 決済ページURLを作成するAPI * ****************************/ app.post('/shop/products/:price_id/checkout', function(req, res) { // Add your code here res.json({success: 'post call succeed!', url: req.url, body: req.body}) }); app.listen(3000, function() { console.log("App started") }); // Export the app object. When executing the application local this does nothing. However, // to port it to AWS Lambda we will create a wrapper around that will load the app from // this file module.exports = app

商品一覧を取得するGET /shop/productsと、決済処理を実行するためのPOST /shop/products/:price_id/checkoutの2APIだけになりました。

APIコードの変更をデプロイする

APIバックエンドのコードを変更した後は、新しいコードをAWSにデプロイする必要があります。

まずはamplify-react-stripeディレクトリで、以下のコマンドを実行しましょう。

console
Copied!
amplify status

Lambda関数のコードが変更されたことがステータスに反映されていることがわかります。

Copied!
Current Environment: dev | Category | Resource name | Operation | Provider plugin | | -------- | --------------------- | --------- | ----------------- | | Function | amplifyStripeFunction | Update | awscloudformation | | Api | stripeapi | No Change | awscloudformation | REST API endpoint: https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev

OperationNo Change以外の項目がある場合、amplify pushでその変更をAWSにデプロイすることができます。

amplify-react-stripeディレクトリで、以下のコマンドを実行しましょう。

console
Copied!
amplify push

amplify status同様現在のステータスが表示された後、? Are you sure you want to continue? (Y/n)とデプロイ確認メッセージが表示されます。

bash
1234567
Copied!
Current Environment: dev | Category | Resource name | Operation | Provider plugin | | -------- | --------------------- | --------- | ----------------- | | Function | amplifyStripeFunction | Update | awscloudformation | | Api | stripeapi | No Change | awscloudformation | ? Are you sure you want to continue? (Y/n)

[Y]を入力すると、Updating resources in the cloud. This may take a few minutes...とメッセージが表示され、続いてAWSへのデプロイログが連続して表示されます。

console
Copied!
⠏ Updating resources in the cloud. This may take a few minutes... UPDATE_IN_PROGRESS amplify-amplifyreactstripe-dev-235608-functionamplifyStripeFunction-FRM950U2CS36 AWS::CloudFormation::Stack Sat Jul 17 2021 00:38:14 GMT+0900 (日本標準時) User Initiated ⠏ Updating resources in the cloud. This may take a few minutes... UPDATE_IN_PROGRESS LambdaFunction AWS::Lambda::Function Sat Jul 17 2021 00:38:20 GMT+0900 (日本標準時) ⠦ Updating resources in the cloud. This may take a few minutes... UPDATE_COMPLETE LambdaFunction AWS::Lambda::Function Sat Jul 17 2021 00:38:23 GMT+0900 (日本標準時) ⠏ Updating resources in the cloud. This may take a few minutes... UPDATE_COMPLETE_CLEANUP_IN_PROGRESS amplify-amplifyreactstripe-dev-235608-functionamplifyStripeFunction-FRM950U2CS36 AWS::CloudFormation::Stack Sat Jul 17 2021 00:38:28 GMT+0900 (日本標準時) ⠏ Updating resources in the cloud. This may take a few minutes... UPDATE_COMPLETE functionamplifyStripeFunction AWS::CloudFormation::Stack Sat Jul 17 2021 00:38:36 GMT+0900 (日本標準時) ⠸ Updating resources in the cloud. This may take a few minutes... UPDATE_IN_PROGRESS apistripeapi AWS::CloudFormation::Stack Sat Jul 17 2021 00:38:39 GMT+0900 (日本標準時) ⠋ Updating resources in the cloud. This may take a few minutes...

✔ All resources are updated in the cloudが表示されると、デプロイ完了です。

console
Copied!
⠼ Updating resources in the cloud. This may take a few minutes... UPDATE_COMPLETE functionamplifyStripeFunction AWS::CloudFormation::Stack Sat Jul 17 2021 00:38:55 GMT+0900 (日本標準時) UPDATE_COMPLETE amplify-amplifyreactstripe-dev-235608 AWS::CloudFormation::Stack Sat Jul 17 2021 00:38:55 GMT+0900 (日本標準時) ✔ All resources are updated in the cloud

cURLコマンドで、削除したPUTメソッドを呼び出してみましょう。
以下のコマンドのhttps://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/devを、amplify statusで表示されるREST API endpointの値に変更して、実行しましょう。

bash
1
Copied!
curl https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev/shop -XPUT

エラーのHTMLが表示されていれば、変更のデプロイが成功しています。

bash
12345678910
Copied!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Error</title> </head> <body> <pre>Cannot PUT /shop</pre> </body> </html>

Checkpoint

  • amplify add apiコマンドでREST APIを作成できる
  • Serverless ExpressJSテンプレートを使うと、Expressアプリとして実装ができる
  • 用途に応じてテンプレートを使い分けることで、サーバー側処理の開発を効率化できる

1章の作業はここまでです。
最後にAPIのログを確認する方法を次のパートで学んで、Stripeの実装に備えましょう。

現在のパート (0)
全パート (3)
みんなで助け合おう!
現在のパートのディスカッション 全0件