【JAWS-UG 初心者支部】「AWS 上で静的なWeb サイトを公開しよう！ハンズオン」参加レポート
Ⅰ．きっかけ
以前、草野球チームで走塁を楽しく学ぶためのクイズサイトを「GitHub Pages」で作ったのですが（ブログ記事）、このサイトを「AWS上で動かしてます！」って言えたらカッコいいだろうな～と思い、その方法を学ぼうと参加しました。
※ハンズオン資料はこちらで公開されています
※当日のTogetterはこちら
＜目次＞
Ⅱ．使った環境
- Windows10(64bit)
- Google Chrome(バージョン: 83.0.4103.116)
- AWS アカウント
- AdministratorAccess ポリシーがついた IAMユーザー
- 作成方法はこちら
- 私は mochikoAsTech氏『AWSをはじめよう ～AWSによる環境構築を1から10まで～』を参考にしました
Ⅲ．基礎知識
Amazon S3（エススリー）とは？1
- 「Amazon Simple Storage Service」の略称
- Webサーバーや社内のファイルサーバーのように、インターネット上にデータを保存する場所が借りられる
Amazon S3 の特徴
- 高い可用性・耐久性：「99.999999999%」（イレブンナイン）のデータ耐久性をうたっている
- 負荷に強い：「秒間30万リクエスト以上」の高負荷に耐えられる
- Webサーバとして利用可能：静的なWebサイトを公開する機能がある
AWS Cloud9（クラウドナイン）とは？2
AWS Cloud9の特徴
- 共同でのコーディングが容易：互いのタイピングをリアルタイムで確認できる
- 多くの言語やツールをサポート：様々な開発ツールやプログラミング言語がパッケージ化されており、簡単にコーディングを開始できる
Ⅳ．ハンズオン
１．Amazon S3 の静的Webサイトホスティング機能を使って、簡単なWebサイトを公開する
（１）S3バケットの作成
- マネジメントコンソール（AWSのサービスを管理する画面）で、右上に表示されているリージョンを「東京」、左下に表示されている言語を「日本語」に設定する
- 「サービス > S3」を選択する
- 「バケットを作成」をクリックし、バケット名を入力する
- バケット名は全世界でユニーク（唯一無二）なものにする必要がある
- 今回は「20200709-shiisuke-s3-hands-on」とした
- 「パブリックアクセスをすべてブロック」のチェックを外す
- 「現在の設定により、このバケットとバケット内のオブジェクトがパブリックになる可能性があることを承認します。」にチェックを入れ、「バケットを作成」をクリックする
（２）S3バケットの設定
＜静的Webサイトホスティングの設定＞
- S3 ダッシュボード（メイン画面）で、作成したバケットの名前を選択する
- 「プロパティ > Static website hosting」を選択する
- 「このバケットを使用してウェブサイトをホストする」を選択し、「インデックスドキュメント」に「index.html」と入力して「保存」をクリックする
＜バケットポリシーの設定＞
※「xxxxxxxxx」には作成したバケットの名前を入れる。私の場合は「20200709-shiisuke-s3-hands-on」
（３）ファイルアップロード
- こちらのコードを、自分のPCの任意の場所に「index.html」として保存する
- S3画面で「概要 > アップロード」を選択する
- 「ファイルを追加」またはドラッグ＆ドロップで 上記1のファイルを選択して、「アップロード」をクリックする
（４）Webページ閲覧
２．AWS Cloud9 を使って開発を進め、AWS CLI でWebサイトを更新する
（１）AWS Cloud9 環境を構築
- マネジメントコンソールで、「サービス > Cloud9」を選択する
- 「Create environment」をクリックする
- Nameに任意の名前を入力し、「Next step」をクリックする
- 今回は「S3Hands-on」とした
- 「Environment settings」は全てデフォルトのまま「Next step」をクリックする
- 「Review」画面で「Create environment」をクリックする
- AWS Cloud9 の環境が立ち上がるのを確認する
（２）AWS Cloud9 上で開発
＜環境の設定＞
- 「左上の Cloud9 のマーク > Preferences」を選択する
- 「Soft Tabs」の値を2に変更する
＜作業ディレクトリの作成＞
- 画面下部のターミナルに以下のコマンドを1行ずつ入力して「Enter」を押す
$ mkdir my-webpage $ cd my-webpage
＜「index.html」ファイルのアップロード＞
- 画面左側の「my-webpage」フォルダを選択した状態で、「File > Upload Local Files」を選択する
- 「Select files」をクリックし、1. (3) で作成した「index.html」ファイルを選択する
＜「index.html」ファイルの編集＞
- 画面左側で「index.html」フォルダをダブルクリックし、画面右側で以下のように編集して、「Files >Save」で保存する（Windowsなら「Ctrl + s」でも可）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>しいすけの自己紹介ページ</title> </head> <body> <h1>名前：しいすけ</h1> <p>好きなもの：野球、日本茶、感動系のドラマ/アニメ。</p> <p>Twitter：<a href="https://twitter.com/shiisuke1229">@shiisuke1229</a></p> </body> </html>
（３）AWS CLI でS3 にファイルコピー
- 画面下部のターミナルに以下のコマンドを入力して「Enter」を押す
$ aws s3 cp index.html s3://xxxxxxxxx
※「xxxxxxxxx」には作成したバケットの名前を入れる。私の場合は「20200709-shiisuke-s3-hands-on」
（４）ページ閲覧
- (4) で表示したエンドポイントのURLを再度表示し、変更が反映されていることを確認する
【参考】今回作成したリソースを削除する方法
（１）S3バケットの削除
- S3ダッシュボードで、作成したバケットの名前の左にあるボタンを選択し、「空にする」をクリックする
- バケット名を入力して「空にする」をクリックする
- 「サマリー」で「正常に削除されました」と表示されていることを確認し、「終了」をクリックする
- 再度バケットの名前の左にあるボタンを選択し、「削除」をクリックする
- バケット名を入力して「バケットを削除」をクリックする
- 作成したバケットが一覧から消えることを確認する
（２）AWS Cloud9 リソースの削除
- Cloud9ダッシュボードで、今回作成した環境を選択し、「Delete」をクリックする
- 確認ダイアログが表示されるので、「Delete」と入力したうえで「Delete」をクリックする
- しばらくすると一覧から消える
Ⅴ．感想
- ハンズオン受講前はちゃんとできるか不安でしたが、発表者の金澤さん（@ketancho）の資料と説明がとっても分かりやすくて、意外と簡単にできました！
- 今回のイベントでは、群馬支部の紹介や Amazon S3 についてのマニアックな話などもあり、AWS や JAWS-UG はまだまだ奥が深くて、もっともっと知っていきたいなと思いました。
- 草野球チームの走塁クイズサイトは、独自ドメイン＆HTTPS接続にしたうえで実際に公開しました。詳細は以下のブログで紹介していますので、よろしければご覧ください(^^)
-
小笠原 種高氏『Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書』（2019年、技術評論社）および 大澤 文孝氏『Amazon Web ServicesではじめるWebサーバ』（2013年、工学社）を参照↩
