AWS初心者がハンズオン全部やってみる：30分で学べるAWS②

はじめに

この記事は、「AWSに興味はあるけどよく知らない」「資格を持っているけど実際に触ってみたことがない」「何か始めてみたい」という方向けの連載シリーズ②です。（①はこちら）
「30分で学習できる」をテーマに毎週金曜日（今週は祝日のため木曜日）に更新します。ぜひ私と一緒に取り組んでみてください！

今回はアプリケーションに必要なツールの準備を進めていきます。少しボリュームがありますが、画像を貼りながら解説していますのでスムーズに進めると思います。気軽に取り組んでみてください。

作成するウェブアプリケーションについて

改めて、今回挑戦するAWS公式ガイドは、「サーバーレスのウェブアプリケーションを構築する」です。

概要にはこのようにあります。

ユーザーが Wild Rydes フリートからユニコーンライドをリクエストできるシンプルなサーバーレスウェブアプリケーションを作成します。アプリケーションの HTML ベースのユーザーインターフェイスによって、ユーザーはライドする場所を指定できます。またアプリケーションでバックエンドの RESTful ウェブサービスとやり取りすることにより、リクエストを送信して近くのユニコーンを手配できます。アプリケーションはさらに、ユーザーがユニコーンライドをリクエストする前に、サービスに登録してログインするための機能を提供します。

なんだか難しそうですね。一つずつ追ってみましょう。まず、「Wild Rydes」が専門用語のように見えてしまいますが、こちらは構築するアプリの名前です。他の部分も読み替えていきます。

サーバレス→サーバーの管理をAWSに任せられる仕組み
HTMLベースのユーザーインターフェース→ブラウザで開くアプリの操作画面
バックエンドの RESTful ウェブサービス→リクエストを受け付けるアプリの裏側の仕組み

「Wild Rydes」というユニコーン乗車アプリをAWSにサーバー管理を任せて作成する。
ブラウザで開くアプリの画面を操作することでユーザーは乗る場所を指定できる。
アプリの裏側で動く窓口とやり取りすることで、近くのユニコーンを手配する仕組み。
会員登録やログインもできる。

読み替えるとこのようになります。タクシー配車アプリのイメージですね。

前提条件

このチュートリアルに挑戦するためには、①AWSのアカウント作成　②CLIのインストール　③ArcGISアカウント　が必要になります。①、②の手順は前回のブログで紹介しています。

ArcGISアカウント登録

１.ArcGIS公式ページへ移動します。
２.下にスクロールし、「公開アカウントを作成する」をクリックします。無料で使用できます。
３.必要な情報を入力します。

登録できました。

アプリケーションのアーキテクチャ（構成）

こちらが作成するアプリケーションの構成図です。

AWSの様々なサービスが矢印で繋がれています。矢印の方向に向かってデータが流れていくイメージです。左から右に流れています。

各サービスの役割を簡単に説明します。より詳しく学びたい方は、AWS公式ガイドを参考にしてください。
①AWS Amplify コンソール：Webサイトの画面一式を保管しユーザーのブラウザに届けるためのサービス。
②Amazon Cognito ：ログインや会員情報の認証を行うサービス。
③DynamoDB：情報を保存しておく場所。データベース。
④Amazon API Gateway：リクエスト（API）を受け取り、AWSサービスへ繋ぐためのサービス。
⑤AWS Lambda ：サーバレスで動かせる、プログラムを実行するためのサービス。

ブラウザで実行して、①AWS Amplify でアプリを表示し、　②Cognito でログインし、④API Gatewayを使ってクラウドへ情報を届けて、⑤Lambdaで処理を実行し、③DynamoDBに保存する。という流れになります。

これから作るパーツ

ガイドにあるように、５つのパーツに分けてアプリケーションを作成していきます。本日は１番を作成します。

静的ウェブサイトをホストする

　・リージョンを選択

ガイドに従って進めます。

１..AWSコンソールへログインします。Root user でサインインを選択しましょう。IAMユーザーはこの後の手順で作成します。

２.サインインができたら、リージョンを選択します。リージョンとは、AWSのサービスが実際に置いてある『地域・場所』のことです。自分の住んでいる地域に近いものを選択しましょう。私は「アジアパシフィック (東京)」を選択しました。選択するリージョンによって使用できるサービスが若干異なりますが、東京または大阪であれば問題ありません。

以上で完了です。

手順２から手順５：Gitリポジトリを作成する

このモジュールのソースコードを管理するには、AWS CodeCommit (AWS 無料利用枠を含む) または GitHub の 2 つのオプションがあります。このチュートリアルでは CodeCommit を使用してアプリケーションコードを保存しますが、GitHub でリポジトリを作成しても同じことができます。

とあります。本ブログではCodeCommitを使用したやり方で進めます。

また前回のブログでAWS CLIをインストールしているため、手順１は不要です。

左上の検索窓に「CodeCommit」と入力し、青いアイコンのCodeCommitを開きます。

赤枠の「リポジトリを作成」をクリックします。

 リポジトリ名「wildrydes-site」を入力し、「作成」をクリックします。

リポジトリの作成が完了しました。

手順６−１：IAMユーザーのセットアップ

続いて、IAMユーザーのセットアップを行います。ここからは、「Setup for HTTPS users using Git credentials」に従って進めます。ガイドの記載が少し複雑ですが、このブログと同じ手順で進めていただくとスムーズです。

先ほど同様、検索窓に「IAM」と入力してIAMを開きます。左側のメニューから、アクセス管理＞ユーザーをクリックします。

右上の「ユーザーの作成」をクリックします。

「ポリシーを直接アタッチする」を選択し、ポリシー名に「AWSCodeCommitPowerUser」を入力してチェックをつけます。「次へ」をクリックした後、「ユーザーの作成」をクリックして進むとIAMユーザーが作成されます。

IAMユーザーの作成が完了しました。

手順６−２：Gitをインストールする

AWSのCode Commitにコードをアップロードするためには、自身のパソコンに「Git」 をインストールする必要があります。Gitとは、プログラムのコードをウェブ上に保存し、変更履歴やバージョンが記録できる便利なツールです。

Git Downloadsを開き、自身の使っているPCの項目を選んでインストールします。本ブログではmacOSを選択します。画像にいくつかコードが書いてありますが、これらはインストール・管理する方法が違うだけで、Git自体の機能は同じものです。

おすすめは Homebrew（ホームブリュー） です。エンジニアの間でも最も普及しているパッケージ管理ツールであり、導入からアップデート作業が簡単にできることが大きなメリットです。本ブログでは、Homebrewの手順で進めます。

まずは、自身のPCにgitが既にインストールされていないか確認します。ターミナルを開き、下記を入力します。

git --version

git version 2.xx.x と出れば、既にgitがインストールされています。インストール手順を飛ばして次へ進みましょう。
command not found と出た場合は、インストールされていません。

インストールされていなかった場合の手順

１.ターミナルを開き、下記を入力します。公式サイトに書かれているものです

https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

２.macのパスワードを求められるので入力します。画面には何も表示されていませんが、入力できているので大丈夫です。入力後Enterを押します。

３.brew install git を入力します。

４.インストールできました。もう一度git --version を入力し、バージョンの数字が出てくれば完了です。

手順６−３： CodeCommitへのHTTPS接続用のGit認証情報を作成する

アクセスキーとシークレットアクセスキー

１AWS マネジメントコンソールにサインインし、IAM コンソール を開きます。

２.左側のメニューから、アクセス管理＞「ユーザー」をクリックします。

３.先ほど作成したユーザー名を選択します。

４.「セキュリティ認証情報」をクリックします。

５.「アクセスキー」のカテゴリーまでスクロールし、「アクセスキーを作成」をクリックします。

６.「コマンドラインインターフェイス (CLI)」などの用途を選択して次へ進みます。

７.説明の欄が出たら、自分がわかる文言を自由に記載します。

注意：この後表示される認証情報は一度しか表示できません。必ず、ポップアップウィンドウを閉じる前に「.csv ファイルをダウンロード」をクリックしてください。

８.「アクセスキーID」と「シークレットアクセスキー」が表示されます。

９.「.csv ファイルをダウンロード」をクリックして完了です。

認証情報

１.上記の手順４まで同様に行います。

２.ページを少し下にスクロールして、「AWS CodeCommit の HTTPS Git 認証情報」 という項目を探します。

３.注意：この後表示される認証情報は一度しか表示できません。必ず、ポップアップウィンドウを閉じる前に「認証情報をダウンロード」をクリックしてください
「認証情報を生成」をクリックします。

４.ポップアップが表示されるので、「認証情報のダウンロード」クリックして完了です。

終わりに

お疲れ様でした。新たなソフトのインストールや環境構築が多く大変だったかと思います。次回は本日インストールしたGitを使って準備を進めていきます。最後まで読んでいただきありがとうございました。3/27（金）の更新をお待ちください。