教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
前章でAWSのリソースを操作するための準備をおこないました。
ここからはStripeのデータにアクセスするためのREST APIをAWS上にデプロイします。
REST APIはAmplify CLIを使うとコマンド1つでAWS上にセットアップできます。
amplify-react-stripe
ディレクトリで、以下のコマンドを実行しましょう。
console Copied!amplify add 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の名前を決めてくれ」とメッセージが表示されます。
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のパスを指定するものです。
console Copied!? Provide a path (e.g., /book/{isbn}): (/items)
ショップのAPIですので、今回は[/shop]と入力して[Enter]キーを押しましょう。
? Provide a path (e.g., /book/{isbn}): /shop
のように表示されたら設定完了です。
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
と表示され、次の質問が表示されたら完了です。
? Provide an AWS Lambda function name: (amplifyreactstriped4c449fe)
のように、Lambda関数の名前を聞くテキストが表示されます。amplifyStripeFunction
と入力しましょう。
? Provide an AWS Lambda function name: amplifyStripeFunction
と表示されて、次の質問が出れば入力完了です。
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関数を新しく作る場合、ある程度コードが書かれたテンプレートを利用できます。
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
下記のようにFunction
とApi
が新しく作成されたことが表示されます。
console Copied!Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | --------------------- | --------- | ----------------- |
| Function | amplifyStripeFunction | Create | awscloudformation |
| Api | stripeapi | Create | awscloudformation |
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
で終わる形になっているかを確認しましょう。
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.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 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.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 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バックエンドのコードを変更した後は、新しいコードを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
Operation
にNo Change
以外の項目がある場合、amplify push
でその変更をAWSにデプロイすることができます。
amplify-react-stripe
ディレクトリで、以下のコマンドを実行しましょう。
console Copied!amplify push
amplify status
同様現在のステータスが表示された後、? Are you sure you want to continue? (Y/n)
とデプロイ確認メッセージが表示されます。
bash1234567 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
の値に変更して、実行しましょう。
bash1 Copied!curl https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev/shop -XPUT
エラーのHTMLが表示されていれば、変更のデプロイが成功しています。
bash12345678910 Copied!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot PUT /shop</pre>
</body>
</html>
amplify add api
コマンドでREST APIを作成できる1章の作業はここまでです。
最後にAPIのログを確認する方法を次のパートで学んで、Stripeの実装に備えましょう。