More than 3 years have passed since last update.

Terraformでサーバーレスな会員制サイトを構築する

Last updated at 2021-05-22Posted at 2021-04-19

#はじめに

本記事では、AWS のデベロッパー向けウェブマガジンbuilders.flash のサーバーレスの学習ガイドで紹介されていたAWSの環境を Terraformで構築する方法について記載しています。(初学者向け)

その学習ガイドの記事は、下記になります。
はじめてのサーバーレス ~ サーバーレスな会員制サイトを作ってみよう ~ 第 1 回
 はじめてのサーバーレス ~ サーバーレスな会員制サイトを作ってみよう ~ 第 2 回
 （ラボ1まで）はじめてのサーバーレス ~ サーバーレスな会員制サイトを作ってみよう ~ 第 3 回

管理コンソールを使って構築する手順を Step by Stepで確認したい場合は、こちらを参考にすると、より理解が深まるかと思います。

#学習ガイドで構築する構成図

構築するAWSコンポーネント
Lambda
DynamoDB
API Gateway
Cognito
IAM

Terraformのコード

#事前準備
・Terraform のインストール
・tfenv のインストール
・Terraform を実行するためのIAMのアクセスキーとシークレットキー

Terraformの実行環境

$ terraform -version
Terraform v0.12.30
+ provider.archive v2.1.0
+ provider.aws v2.70.0

Terrraformでサーバーレス環境を構築する

１. Terraformのコードをダウンロードします。

$ git clone https://github.com/okubo-t/aws-terraform-beginner-serverless.git

２. Terraformの環境とコードの構成は下記になります。

$ tree aws-terraform-beginner-serverless
aws-terraform-beginner-serverless
├── README.md
├── apigw.tf
├── aws.tf
├── cognito.tf
├── dynamodb.tf
├── iam-policy
│   ├── cognito_auth_policy.json
│   ├── cognito_unauth_policy.json
│   └── lambda_policy.json
├── iam-role.tf
├── lambda.tf
├── output.tf
├── src
│   ├── read
│   │   └── index.js
│   └── write
│       └── index.js
├── terraform.tfvars-
└── variables.tf

３. Terraform のコードがあるディレクトへ移動します。

$ cd aws-terraform-beginner-serverless/

４. terraform.tfvars ファイルを作成します。

$ cp -p terraform.tfvars- terraform.tfvars

５. 作成した terraform.tfvars の「アクセスキー」と「シークレットキー」と「リソース名のprefix」を環境に応じて、任意に変更します。(下記のキーはサンプルです。)

terraform.tfvars

# アクセスキー
aws_access_key = "AKIAIOSFODNN7EXAMPLE"

# シークレットキー
aws_secret_key = "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"

# リージョン
aws_region     = "ap-northeast-1"

# リソース名のPrefix
prefix = "prefix"

# リソースの環境
env = "demo"

# ステージ名
stage_name = "demo"

６. 下記コマンドで、Terraform の初期設定をします。

$ terraform init

Terraform has been successfully initialized!

You may now begin working with Terraform. Try running "terraform plan" to see
any changes that are required for your infrastructure. All Terraform commands
should now work.

If you ever set or change modules or backend configuration for Terraform,
rerun this command to reinitialize your working directory. If you forget, other
commands will detect it and remind you to do so if necessary.

７. 下記コマンドで、環境のデプロイを実行します。

$ terraform apply

８. デプロイ後に出力される Outputsの内容をメモします。

Apply complete! Resources: 39 added, 0 changed, 0 destroyed.

Outputs:

appClientId = XXXXXXXXXXXXXXXXXXXXXXX
identityPoolId = ap-northeast-1:XXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX
userPoolId = ap-northeast-1_XXXXXXXXXX

これで、Terraformによる環境の構築は完了です。

下記コマンドで、構築されたAWS環境のコンポーネントを確認できます。

$ terraform state list

フロント環境の準備

１. フロント用のzipファイルをダウンロードします。

ダウンロード先はこちらです。

２. ダウンロードしたzipを展開したフォルダの[Serverlesshandson]-[webpage]-[config.js]ファイルの内容を、メモした Outputsの内容に置換して下さい。

Serverlesshandson/webpage/config.js

// TODO: 作成したユーザープールおよびIDプールのIDに書き換えてください
const CognitoConfig = {
    region: 'ap-northeast-1',

    // User Pool
    userPoolId: 'ap-northeast-1_XXXXXXXXXXXXX',
    appClientId: 'XXXXXXXXXXXXXXXXXXXXXXXX',

    // Federated Identity
    identityPoolId: 'ap-northeast-1:XXXXXXXXXXXXXXXXXXXXXX',
}

３. API Gateway の管理コンソールにアクセスします。

４. Terraformで構築したAPI Gateway > ステージ > demo（ステージ名） > SDK の作成タブに遷移し、プラットフォームで JavaScript を選択して、SDKの生成ボタンを押下してダウンロードします。

５. ダウンロードした [javascript_YYYY-MM-DD_HH-MMZ.zip] をzip展開し、作成されたフォルダ [apiGateway-js-sdk] の直下の [apigClient.js] ファイルを 2で、zip展開した[Serverlesshandson]-[webpage]-[lib]-[apigateway] フォルダの直下にコピーします。（既存のファイルと置き換えます。）

６. 2で、zip展開した[Serverlesshandson]-[webpage]-[443]フォルダ内の[apigateway.js] [login.html][mypage.html] の３つのファイルを [Serverlesshandson]-[webpage]フォルダ直下にコピーします。（既存のファイルと置き換えます。）

参考：
1-3. Web ブラウザからの動作確認

これで、サーバーレスの環境にアクセステストするフロント環境の準備は完了です。