AWSのサーバレスアーキテクチャを触ってみる（実践編）

こんにちはますのです。
インフラエンジニアですがWebサービスの作り方やサーバレスアーキテクチャにあまり触る機会がなく、サンプルコードを見つけたので作者様のnoteを見ながら構築を試しております。
一部うまくいかない部分はありましたが概ね構築完了したので、おさらい含めてレポを書ければなと。

構築に使ったAWSサービス・費用などの感想

構築でお世話になったnote：【VueSlsApp】デプロイの準備とやり方

構築の流れ

ざっくりとこんな感じでした。
AWSは良く触っているのでなんとなくで出来ましたが、Serverless Frameworkの存在すら知らなかったので、この設定周りでデータ構成とかの理解は追いついておらずです。

1. サンプルコードをGitからダウンロード
2. AWSでドメイン設定とサーバレス実行環境の設定
3. Serverless Dashbordのアカウント作成～Access Key取得
4. Serverless Frameworkの設定ファイル書き換え
5. Vue.jsの設定ファイル書き換え
6. Python(3.7以上) / node.js(最新版) / Serverless Framework(1.6以上)のデプロイ環境準備
7. ServerlessFrameworkを使ってAWS環境へデプロイ実行
8. AWS：CloudFront作成～https通信設定

目指すゴール

• Webサイト「https://dev-vueslsapp.soypocket.work」へアクセスする
• CognitoによるWeb画面上でのユーザ認証、登録、削除をサーバレスで実装
• ユーザ認証後の画面で、各ユーザの情報を登録する

筆者構築の結果：DynamoDBへの登録までは完了出来ず

簡単な構成図です。ユーザ認証部分の動作をサーバレスシステムで構築することは出来ます。
ログイン後の管理画面で、データ登録はエラーが出てしまい断念。
コードレベルの確認が必要となったため、ひとまずはインフラ部分の構築完了が出来たところで区切りとしました。

サンプルコードの取得

Lambdaに記述するコード作れないわたしにはありがてぇです。作者様に感謝。
以下のURLから「Code」＞「Download ZIP」でサンプルデータ【vueslsapp-master】を取得しました。
https://github.com/thiroyoshi/vueslsapp

1.AWSサービスの設定

続いてAWSの各種設定を行います。
事前にAWSアカウントは作っておきます。わたしは無料利用枠を利用して構築し、$0.55の費用だけ発生しています。

1-1.Lambda実行用のIAM Roleを作成する

手順はこちらの記事に。設定値は指定があるので名前と権限設定は注意。

Lambdaが他のAWSサービスを実行するために「IAM Role」を作成する

こんな感じに作成します。

1-2.デプロイ実行用のIAM User（Access Keyなど）を作成する

IAMユーザの作成はコチラの記事を参照。

【AWS】シークレットアクセスキー付きのIAMユーザの作成方法

1-3.ドメイン取得とRoute53へのドメイン登録

ドメイン取得はRoute53での取得よりも、通常のドメイン取得の方が安かったのでムームードメインを利用。

ドメイン取得とRoute53へのドメイン登録の手順

http通信はしませんが、「sls_configuration/config/common.yml」で設定値があるので念のためレコード登録も行う。
※S3はデプロイ時に作成されるのでこの時点ではRoute53のレコード登録のみ実施。

AWS S3の静的WebサイトをRoute53で独自ドメインURLとして公開する

こんな感じにRoute53上で登録されるかなと思います。S3バケット等のデータはありませんです。

1-4.Certificate Managerでワイルドカード証明書の作成

AWS Certificate Manager（ACM）で証明書を作成。注意点としては以下でしょうか。

AWS Certificate Manager（ACM）でSSL/TLS証明書を作成する

作成後、こんな感じになってればOKかと。

1-5.CognitoでUserPoolとIdentityPoolを作成

細かな点については理解しておらず。やったことはこんな感じにて。
・ユーザープール作成＆ユーザープール内にアプリクライアント作成
・IDプールの作成

こちらの記事を参考に作成。
https://qiita.com/tmiki/items/f36edc6c7473f5baa398

User Poolを作成する際にApp clioentsも併せて作りますが「クライアントシークレットを生成」のチェックは必ず外しましょう。
チェック入れたままでやったおかげでデプロイ後にエラー吐き出してきましたのです。

2.Serverless Dashbordの設定

主にやることは3つでした。なお、Serverless Dashbordが何者かはまだちゃんと理解できておらんのです。
・Serverless Dashbordでアカウント作成
・appsからデプロイする環境を作成
・Access Keyの作成

Serverless DashbordでCI/CD環境を体験してみたい：準備編

3.Serverless Framework（REST API,back-end）の設定

ここから先はダウンロードしたファイル「yml」の設定値を編集していきます。
Serverless Dashbord、AWS、ドメイン等々、今まで環境構築をしてきた値を入力するようになります。

設定対象のファイル

• serverless.yml
• sls_configuration/config/dev/cognito.yml
• sls_configuration/config/prod/cognito.yml
• sls_configuration/config/common.yml

設定漏れが無いか、どれを設定するか分からない場合は「<」で文字列検索すると良しとのこと。
設定を入れるべき箇所は「<YOUR AWS REGION>」などとしてくくっておられます。ありがたやです。

serverless.yml

・org：Serverless Dashbordでアカウント作成じに作成されている「current org」の値を入力。
・region：AWSのデプロイしたいリージョンを指定。基本的には「ap-northeast-1」で良いかと。

org: masno
provider:
  region: ap-northeast-1

sls_configuration/config/dev/cognito.yml

今回はdevでデプロイするので「dev」フォルダ内の「cognito.yml」を編集。
入力する値は「1-5.CognitoでUserPoolとIdentityPoolを作成」で作成した「UserPoolのID」となる。

CLIENT_ID: 4567890abcdefg1236
USER_POOL_ID: ap-northeast-1_abcdehgs

sls_configuration/config/common.yml

AWS管理画面＞Route53から確認可能。Route53に登録したドメイン情報等々が入力項目となる。

ACCOUNT_ID: 123456789012
DOMAIN: soypocket.work
ALIAS_HOSTED_ZONEID: Z1234567890abcdefghij
ALIAS_DNS_NAME: s3-website-ap-northeast-1.amazonaws.com

以上３つのymlファイルの設定でServerlessFrameworkの設定は完了です。

4.Vue.jsの環境構築ファイル設定

続いてFront Appの設定。Vue.jsの環境設定用ファイル「.env.dev」「.env.prod」が対象となる。
ダウンロードしたフォルダ内の直下にあるので確認であります。

では今回はdevを実行するので「.env.dev」を編集。

.env.dev

「VUE_APP_COGNITO_USERPOOLID」「VUE_APP_COGNITO_CLIENTID」に関しては、ServerlessFrameworkの「cognito.yml」で設定した値と同じ。
アナリティクスについては入れなくても良しとあったのですが、サブドメインでほとんど使っていないトラッキングコードがあったのでそちらを設定。
そのほかについては詳細割愛なり。

NODE_ENV='dev'
VUE_APP_API_ORIGIN='https://dev-api-vueslsapp.soypocket.work'
VUE_APP_COGNITO_REGION='ap-northeast-1'
VUE_APP_COGNITO_USERPOOLID='ap-northeast-1_abcdehgs'
VUE_APP_COGNITO_CLIENTID='4567890abcdefg1236'
VUE_APP_COGNITO_IDENTITYPOOLID='ap-northeast-1:d12345-bbbb-cccc-aaaa12121212'
VUE_APP_GOOGLE_ANALYTICS='UA-123456789'

5.デプロイ実行環境の環境変数設定

さぁ。作業は大詰めです。
各種ファイルをAWSへデプロイするために、CLIへ渡すAWSの情報を実行環境へsetする必要があるようです。
デプロイ前に手動であれこれ打つの面倒だからと、batファイルを用意してくれているようで利用しました。

set_env.bat.example

・AWS_ACCESS_KEY_ID、AWS_SECRET_ACCESS_KEY：手順1-2で作成したIAMユーザのKeyとID
・SERVERLESS_ACCESS_KEY：手順2で作成したServerlessDashbordのAccessKey

set AWS_ACCESS_KEY_ID=ABCDEFG123456789　　　
set AWS_SECRET_ACCESS_KEY=abcdefghijklmnopqrstu1234567890VWXYZ
set AWS_REGION=ap-northeast-1
set SERVERLESS_ACCESS_KEY=AKZZcYMF4KF51hjpfDzEtfjUKdTJONAWJoS4QgYuSY9V0
set SLS_DEBUG=
set region=ap-northeast-1
set env=dev
set project=vueslsapp

6.デプロイ実行

さてさて、いよいよデプロイ実行です。
ソフトウェアインストールを行い、batでAWS等の環境を登録し、いざぁ！！デプロイぃ！！という流れになります。

6-1.ソフトウェアのインストール

以下の構築環境のソフトウェアをインストールを実施します。

• Python
• Node.js
• Serverless Framework
• AWS CLI

インストールURL等々：AWSのサーバレスアーキテクチャを触ってみる（準備編）

Pythonに関しては追加で「pip-tools」をインストールします。

pip install pip-tools

6-2.ライブラリのインストール

ソフトウェアインストールが完了したら、次はデプロイに必要なライブラリのインストールです。
ライブラリデータはGitでダウンロードした「vueslsapp-master」フォルダ直下にありました。
以降のコマンドをコマンドプロンプト等で実行する場合は、「vueslsapp-master」フォルダにcdで移動した後に実行しました。

node modulesのインストール

npm install

pythonのライブラリをインストール

pip-compilerequirements.inpi
pinstall-rrequirements.txt-tpylibs

6-3.Vueアプリのビルド

//dev環境用のコマンド ※今回はこちら
npm run build-dev

//prod環境用のコマンド　※今回は使わず
npm run build-prod

6-4.デプロイ実行用の環境変数（set_env.bat）の実行

手順5で作成した「set_env.bat.sample」を実行。

.\set_env.bat.sample

わたしはsampleついていると気持ち悪かったので、「set_env.bat」に名前を変更してから実行しています。

6-5.カスタムドメインの作成（API Gateway作成）

ここから実際にAWS環境への作成が徐々に始まります。
おさらいになりますが、ACMのリージョンが「us-east-1」になっていない場合はここでエラーが出ます。

細かい挙動は分かりませんが、エッジ最適化カスタムドメイン名を使用するため、ACMの証明書は「米国東部 (バージニア北部) (us-east-1)」で作成する必要がある事実は確認しました。
リージョン間違えてると証明書無いよとエラー出るので、証明書が「リージョン：us-east-1」で作成されているか確認しましょう。
参考：API Gateway API のカスタムドメイン名を定義する方法を教えてください。
参考：AWSでドメイン取得してServerlessでAmazon API Gatewayにカスタムドメインを設定する方法

確認が終わったらコマンドでカスタムドメインを作成します。

sls create_domain

実行後、AWS管理コンソールから東京リージョンの「API Gateway」を選択すると作成されていました。
完了までに30分～40分くらいかかるようなので休憩。
なお、筆者は環境設定ファイルの中身を色々間違えていたことに気づかず、ここでさらに1日詰みました。

6-6.デプロイの実行

「vueslsapp-master」フォルダにcdで移動してこちらのコマンドを実行することでS3へのデータ保存、Lambdaの作成、CloudFormationの登録等々、サーバレスに必要なAWSサービスが作成されていきます。

sls deploy

7.AWS：CloudFrontへhttps設定

作者様のサイトではここでアクセス出来るよとありましたが、S3のアクセス権限の設定やhttps設定はされていないためアクセス不可でした。
http通信の場合はS3のアクセス権限の設定が必要、https通信をするためにはCloudFrontの作成が必要でした。

作者様はTeraformでCloudFrontの作成をしていたようですが、せっかくなので手動で作成して対応です。

CloudFront + S3 + Route53で独自ドメインをSSL通信(https)設定をする

SPAのWebサイトをS3×CloudFrontで設定する時はリダイレクト設定！403/404のAccessDenyを解消する

以上の内容で無事に「https://dev-vueslsapp.soypocket.work」へのアクセスが出来ることを確認しました。

動作確認：Cognito関連は正常、CORSエラーが解決出来ず。

しかし…。認証周りの動作（恐らくCognito関連）は登録・削除なども問題ないのですが、ログイン後の登録動作がCORSエラーになってしまうのですよね。
API Gateway→Lambdaへ値を引き渡す時に失敗しているようで、DynamoDBまで届いていないのではと予想です。

【エラー内容】
Access to XMLHttpRequest at ‘https://dev-api-vueslsapp.soypocket.work/users’ from origin ‘https://dev-vueslsapp.soypocket.work’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.