はじめに

この記事は、「AWSに興味はあるけどよく知らない」「資格を持っているけど実際に触ってみたことがない」「何か始めてみたい」という方向けの連載シリーズ③です。（②はこちら）
「30分で学習できる」をテーマに毎週金曜日に更新します。ぜひ私と一緒に取り組んでみてください！私自身も初めての挑戦となりますので、間違いや補足がありましたら教えていただけると嬉しいです。
※このブログでの作業は全て macOSで行なっています。

 

静的Webサイトをホストする

前回に引き続き、使用するガイドはこちらです。（モジュール 1: 継続的デプロイを使用した静的ウェブホスティング ）

今回は「Gitリポジトリを作成する」の手順７から進めていきます。

先週までで下記の作業を行いました。

  • Gitをインストール
  • Gitリポジトリを作成
  • IAMユーザーのセットアップ
  • HTTPS接続用のGit認証情報を作成

Gitリポジトリを作成する

手順７から手順１０：ターミナルウィンドウで、コマンド「aws configure」を入力

「AWS CLIの時に使用したターミナルウィンドウ」とありますが、無ければ新しく開いたターミナルウィンドウでも全く問題ありません。
ターミナルウィンドウでaws configure と入力します。私はmacを利用しているため、ターミナルアプリを使用しました。
アクセスキーとシークレットキーの入力を求められるので前回取得したものを入力しましょう。これらの情報は以前CSVファイルでダウンロードしています。自身のフォルダからこんなファイルを探してみてください。

アクセスキーとシークレットキーを入力するとDefault region name と表示されます。
Code Commitでリポジトリを作成する際に選択したリージョンの名前を入力します。東京を選択した方は、ap-northeast-1 大阪を選択した方はap-northeast-3です。

わからなくなってしまった方はAWSコンソールの検索窓から「CodeCommit」を検索して開きます。
以前作成した「wildrydes-site」が表示されている時、右上に書いてあるリージョンが当てはまります。見つからない場合は心当たりのあるリージョンに変更してみて、表示を確認します。

 

手順１１：ターミナルウィンドウで git config 認証情報ヘルパーを設定する。

Windowsの方はこちらのガイドを参考にしてください。

mac の方は本ブログの手順を実行してください。
公式ではこちらのガイドが提供されていますが、macOSに搭載されている「キーチェーン」というパスワード記憶機能の影響で後ほど認証情報エラーとなってしまう可能性があります。
このエラーを回避するため、本ブログではAWS推奨のツール「GRC（git-remote-codecommit）」を使用した方法で進めていきます。

はじめに、pythonのバージョンを確認します。下記コマンドを入力してください。
python3 --version
python x.x.x のように出力されます。command not found と出た場合は、PCに Python がインストールされていない可能性があります。その場合は公式ページからインストールできます。

続いてGRCのインストールを進めていきます。
pip3 install git-remote-codecommit

先ほどの python3 –version で出た数字の上二桁を、下のコマンドの 赤文字の部分に書き換えて実行してください。
（例） Python.1.2.3 → Python 1.2
echo 'export PATH=$HOME/Library/Python/x.x/bin:$PATH' >> ~/.zshrc

書き込んだ設定を反映します。
source ~/.zshrc

手順１２から１４：git clone をする

AWSコンソールからCodeCommitを開き、リポジトリ「wildrydes-site」を選択します。
右上にあるURLのクローンを選択し、「HTTPSのクローン（GRC)」をクリックします。

ターミナルウィンドウを開きます。
 git clone コピーしたURL を入力します。画像のように出てくれば成功です。

私のPCでは下記のようなメッセージが出ました。こちらも成功しています。
Cloning into 'wildrydes-site'...
warning: You appear to have cloned an empty repository.

これで「Gitリポジトリを作成する」の全項目が完了です。

 

Gitリポジトリを事前設定する

次に、AWS公式からこのチュートリアルに必要なファイルをダウンロードしていきます。

公式ガイドにあるコマンドを実行すると下記のエラーとなってしまいます。
An error occurred (InvalidAccessKeyId) when calling the ListObjectsV2 operation: The AWS Access Key Id you provided does not exist in our records.
原因は、こちらのS3バケットの公開設定が変わり、閲覧権限がなくなってしまったことです。

解決策

今回のハンズオンで使用するファイルは、AWS公式リポジトリで公開されています。こちらをダウンロードして進めていきます。

ターミナルを開き、下記コマンドを入力します。
cd ~/Desktop
git clone -b webapp-tutorial https://github.com/aws-samples/aws-serverless-workshops.git
このコマンドを実行することで、リポジトリがPCのデスクトップにダウンロードされます。

次に、ダウンロードしたリポジトリを自身の 「wildrydes-site 」リポジトリへ移動します。
1.デスクトップにダウンロードされた「aws-serverless-workshops」 フォルダを開きます。
2.「WebApplication」 ＞「StaticWebHosting」 ＞ 「website」 の順にフォルダを開きます。
3.「website 」フォルダの中に入っているファイルをすべてコピーします。

4.右上の検索バーに「wildrydes-site」と入力し、フォルダを開きます。
5.この中に先ほどコピーした項目を全て貼り付けます。このようになっていれば成功です。


ここから元の手順に合流します。自身のwildrydes-siteリポジトリに移動します。私と同じ手順で実行している方は下記で移動できます。
cd ../ 
cd wildrydes-site

移動したら、下記を実行します。
git add .
git commit -m "new files"
git push

このようなログが出れば成功です。

git push でエラーとなった場合

https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/wildrydes-site/': The requested URL returned error: 403 とエラーが出てしまった場合、GRCではなく通常のHTTPSで接続している可能性があります。下記コマンドを実行して通信先をGRCに切り替えることで解決できます。

git remote set-url origin codecommit::ap-northeast-1://wildrydes-site
※東京リージョン以外を使用の方は、ap-northeast-1 の部分を自身のリージョンに書き換えてください。

正しく書き変わったか確認します。
git remote -v

このように出れば成功です。
origin codecommit::ap-northeast-1://wildrydes-site (fetch)
origin codecommit::ap-northeast-1://wildrydes-site (push)

元の手順に戻り、git push を実行します。

 

AWS Amplifyコンソールでウェブホスティングを有効にする

AWSコンソールの検索バーまたはこちらからAWS Amplifyを開きます。
「アプリケーションをデプロイ」を選択します。

CodeCommit または GitHubを選択します。以前行なった「Gitリポジトリを作成する」の章で使用した方を選択してください。本ブログと同じ手順で進めている方はCodeCommitを選択します。

リポジトリに「wildrydes-site」を選択します。ブランチはデフォルトで「main」となっているため、変更せず進みます。

ビルド設定の画面になります。何も選択せず「次へ」をクリックします。
確認画面が表示されるので、「保存してデプロイ」をクリックします。

このような画面になります。
ブランチが「デプロイ済み」となるまで待ち、「デプロイされたURLにアクセス」をクリックします。

このようなページが表示されれば成功です。

「Welcome　Your app will appear here once you complete your first deployment.」と書かれたページが表示された場合は、まだデプロイされていない可能性があります。しばらく待ってから再度ホームページを表示してみましょう。

 

サイトを変更する

AWS Amplify コンソールは接続されたリポジトリで変更が検出されると、アプリを再ビルドし、再デプロイします。このプロセスを確かめるためにメインページに変更を加えてみましょう。

Finder から「wildrydes-site 」フォルダを開き、中にある「index.html」を右クリックします。
「このアプリケーションで開く」から「テキストエディット」または「Visual Studio Code」を選択します。今回は「テキストエディット」を使用して進めます。

テキストエディットで開くと、このようにHTMLコードが開かれたでしょうか。

英語のテキストが表示された場合

左上のバーから、「テキストエディット」＞「設定」 と進みます。
「開く/保存」を選択し、「HTMLファイルを、フォーマットしたテキストではなくHTMLコードとして表示」にチェックを入れます。

一度ファイルを閉じ、開き直すとHTMLコードとして表示されています。

HTMLコードが表示できたら、タイトル行を下記に変更して、ファイルを保存します。
 Wild Rydes - Rydes of the Future!

ターミナルウィンドウで、変更を追加してコミットし、変更を Git リポジトリに再度プッシュします。
ターミナルを開き、下記を順番に実行します。
git add .
git commit -m "Update title"
 git push

実行したらすぐにAmplifyを開きます。デプロイされている様子がわかります。

デプロイが完了したら、Wild Rydes サイトを再度開いてタブのタイトルが変更されていることを確認します。
タブに表示される文字の部分が変更されています。

これで「モジュール 1: 継続的デプロイを使用した静的ウェブホスティング」の全ての項目が完了しました。お疲れ様でした！
ここまでいかがでしたでしょうか。私は想定外のエラーに当たってしまい、思ったよりも時間がかかってしまいました。　同じエラーになってしまった方の参考になれば幸いです。
次回は「モジュール 2: ユーザーを管理する」の工程を進めていきます。 4/10（金）の更新をお楽しみに！