はじめに

サーバレスのサービスをあまり触ったことがなかったので、AWSの「初めてのサーバレスアプリケーション構築」をやってみました。

私は、Gitも触ったことがなかったフロントエンド初心者のため、つまずいてしまった部分を含めて記載していこうと思います。
（つまずいた部分：マーク）

実施したハンズオンはこちらです。（途中から英語になります。）
https://aws.amazon.com/jp/serverless/build-a-web-app/

ハンズオンの概要

出典：サーバーレスのウェブアプリケーションを構築する

①静的ウェブサイトをホストする：静的リソース（HTML,CSS,JavaScript,etc.）をホストするようにAWS Amplifyを設定します。

②ユーザーの管理：ユーザーのアカウントを管理するために、Amazon Cognitoユーザープールを作成します。

③サーバーレスバックエンドを構築する：AWS LambdaとAmazon DynamoDBを使用して、ウェブアプリケーションのリクエストを処理するためのバックエンドプロセスを構築します。

④RESTful APIをデプロイする：Amazon API Gatewayを使用して、RESTful APIとして構築したLambda関数を公開します。

本記事では①を設定していきます。

手順

以下手順です。

リージョンを選択

私は東京リージョン（ap-northeast-1）で実施しました。

CodeCommitを使用するためのセットアップ

CodeCommitを使用するためのセットアップをしていきます。

IAMユーザーのアクセスキーを作成

（今回は許可ポリシーにAdministratorAccessがあるIAMユーザーを使用しています。）

①　IAMコンソール　＞　ナビゲーションメニューから「ユーザー」を選択　＞　使用するユーザー名を選択　＞　「セキュリティ認証情報」を選択　＞　「アクセスキー」項目で「アクセスキーを作成」を選択

②　「その他」を選択し、他はそのまま「次へ」　＞　「アクセスキーを作成」を選択

③　「アクセスキーを取得」画面で、「.csvファイルをダウンロード」を選択　＞　ダウンロード後、「完了」を選択
（次の手順で使用します。）

AWS CLIをインストール＆設定

CodeCommitでAWS CLIコマンドを使用するため、AWS CLIをローカルにインストールします。

①　Windows用のAWS CLI MSIインストーラをダウンロードして実行
https://awscli.amazonaws.com/AWSCLIV2.msi

②　コマンドプロンプトを開き、インストールされていることを確認

コマンドプロンプト

aws --version

③　AWS CLIを設定

コマンドプロンプト

aws configure

④　プロンプトが表示されたら、CodeCommitで使用するIAMユーザーのアクセスキーとシークレットアクセスキーを指定
（先ほどダウンロードした.csvファイル「ユーザー名_accessKeys.csv」に記載があります。）

コマンドプロンプト

AWS Access Key ID [None]: IAMユーザーのAccess key IDを入力し、Enter
AWS Secret Access Key [None]: IAMユーザーのSecret access keyを入力し、Enter
Default region name [None]: 今回は何も入力せず、Enter
Default output format [None]: 今回は何も入力せず、Enter

CodeCommitへのHTTPS接続用のGit認証情報を生成する

AWSマネジメントコンソールに戻ります。

①　IAMコンソール　＞　ナビゲーションメニューから「ユーザー」を選択　＞　使用するユーザー名を選択　＞　「セキュリティ認証情報」を選択　＞　「AWS CodeCommitのHTTPS Git認証情報」項目で「認証情報を生成」を選択

②　「認証情報を生成」画面で「認証情報をダウンロード」を選択　＞　ダウンロード後、「閉じる」を選択
（後ほど手順で出てくる「Git Credential Manager」で使用します。）

Gitをインストールする

①　https://git-scm.com/downloads からGitインストーラをダウンロードして実行

②　「Completing the Git Setup Wizard」画面で、「Launch Git Bash」にチェックを入れて「Finish」を選択

git commitコマンドでエラーが出ないようにするために、事前にユーザー情報の登録をしておきます。

Git

git config --global user.email "xxxxx@xxx.com【任意のメールアドレス】"
git config --global user.name "test【任意のユーザー名】"

Gitリポジトリを作成

CodeCommitを使ってアプリケーションコードを保存します。まずは、Gitリポジトリを作成していきます。

①　AWS CodeCommitコンソール　＞　ナビゲーションメニューから「リポジトリ」を選択　＞　「リポジトリの作成」を選択

②　リポジトリ名に「wildrydes-site」を入力　＞　「作成」を選択

③　作成後、「URLのクローン」から「HTTPSのクローン」を選択　＞　画面上部に「コピーされました」と表示されることを確認

④　Gitのターミナルウィンドウを開く　＞　git cloneコマンドを使用

Git

git clone https://xxxxx（先ほどコピーしたリポジトリのHTTPS URL）

実行後、「Git Credential Manager」が表示されてUsernameとPasswordの入力を求められました。
（先ほどダウンロードした.csvファイル「ユーザー名_codecommit_credentials.csv」に記載があります。）

Git：結果例

$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
Cloning into 'wildrydes-site'...
warning: You appear to have cloned an empty repository.

Gitリポジトリにデータを追加する

①　ディレクトリをリポジトリに変更　＞　AWSのハンズオンで提供されているS3バケットからウェブサイトの静的ファイルをコピー

Git

cd wildrydes-site
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

bash: aws: command not foundと表示されてしまった場合、Gitを再起動してみたらいけました。

②　静的ファイルをプッシュ

Git

git add .
git commit -m 'new'
git push

#結果例
Counting objects: 95, done.
Compressing objects: 100% (94/94), done.
Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
Total 95 (delta 2), reused 0 (delta 0)
To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
* [new branch] master -> master

コンソール上でCodeCommitのコードを見てみると、無事にファイルが上がっていることを確認できます。

AWS Amplify使ってウェブサイトをデプロイする

①　AWS Amplifyコンソール　＞　「使用を開始する」を選択　＞　Amplify ホスティングの「使用を開始する」を選択

②　「既存のコードから」項目で「AWS CodeCommit」を選択　＞　「続行」を選択

③　「最近更新されたリポジトリ」項目で今回使用するリポジトリを選択　＞　他はそのまま「次へ」を選択
最近更新されたリポジトリ：wildrydes-site
ブランチ：master

④　「AWS Amplifyがプロジェクトのルートディレクトリでホストされているすべてのファイルを自動的にデプロイすることを許可」を選択　＞　他はそのまま「次へ」を選択

⑤　設定を確認し、「保存してデプロイ」を選択

Amplifyが必要なリソースを作成して、デプロイしてくれます。（私は2分弱でできました。）
完了したら、URLをクリックしてサイトを立ち上げてみます。

無事にできていることを確認できました。

次の記事で②ユーザーの管理の設定をしていきたいと思います。

参考