ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

JAWS-UG 佐賀の re:Boot で完走できなかったハンズオンをリベンジしました

こんにちは、AWS チームの尾谷です。

2023 年 2 月 25 日 (土曜日) に開催された JAWS-UG 佐賀のリブートイベント に参加しました。
3 年ぶりの開催ということで、反響が大きかったのか会場は満席でした。
そんな中、運良く社長と、同じ AWS チームの八木と三人で参加させていただくことができました。

業界最速投稿で有名な山下さんのブログ でも紹介されていますが、Amazon Location Service 入門ハンズオンが完走できませんでした。

Cloud9 を動かして、git clone して CloudFormation スタックを流して、configuration.js を更新して npm start するだけの簡単なハンズオンのはずが、同じ手順を 3 回デプロイするも Oops となり完走できませんでした。

このハンズオンは、冒頭に以下の記載があります。

Lv 100 - 200 向けのワークショップです。 AWS の経験が少ない方でも構築できるように設計されています。

これはあまりに悔しく、翌日に予定していた九州観光を急きょ中止して、速攻で帰宅しハンズオンを再走 && 完走しました。
正確に書くと完走はしていた。(強がり。)

08:19 発のかもめに乗って逃げるように佐賀を発ちました。。

エラーになった原因

僕がエラーになった原因は Safari の設定でした。

デプロイは問題なかったのですが、Safari のプライバシー設定にある「サイト越えトラッキングを防ぐ」のチェックが入っていたため、サードパーティ製の Cookie がブロックされてエラーになりました。

Notice Third-party cookies disabled

You can't access preview functionality because your browser blocks third-party cookies (also known as cross-site tracking). To use previews, allow third-party cookies and reload your IDE.

上記メッセージが表示されていたのにも関わらず、読み飛ばしていました。
このメッセージは、過去のハンズオンで同じ対処法で回避した経験があったのにすぐに思い出せなかったのも反省でした。

対処法

Safari > 設定 と進み

プライバシー > Web サイトによるトラッキング: □ サイト越えトラッキングを防ぐ のチェックを外して

ブラウザをリロードすると正しく表示されました。

まとめ 1 回目

以上、完走できなかったハンズオンをリベンジして完走したエピソードでした。 ここまでお読みくださりありがとうございました。

つまづきポイントを解説

少し内容が薄いので、以下、つまづきそうなポイントをまとめておきます。
完走できなかった方がリトライされる際のお役に立てれば幸いです!

バージニア北部を選択する

冒頭に記載されていますが、リージョンは「バージニア北部 (us-east-1)」を選択してください。
これは、CloudFormation スタックが us-east-1 にデプロイされるようになっており、Cloud9 で npm start する際にエラーになるためです。
読み飛ばして、東京リージョンで手動手順で作成すると aws cli で Cognito ID が取得できません。

Cloud9 はデフォルト VPC のままデプロイする

VPC やサブネットが正しく選択できないと Cloud9 がデプロイできません。
デフォルト VPC のままであればサクッと起動できます。
もしデフォルト VPC を削除してしまわれた方がいらっしゃれば、VPC ウィザードを作ってパブリックサブネットを持つ VPC をウィザードでサクっと作成してみるとうまくデプロイできるのではないでしょうか。

AWS CLI バージョンを確認する

AWS CLI をインストールした後は、バージョンを確認してみると良いと感じました。
2023/02/26 現在は、バージョン 2.10.3 がインストールされました。

$ aws --version
aws-cli/2.10.3 Python/3.9.11 Linux/4.14.304-226.531.amzn2.x86_64 exe/x86_64.amzn.2 prompt/off
$ 

デプロイ先を確認する

この手順は (多分誤記だと思いますが)、「事前設定手順」が一部繰り返されており、そのまま進めると git clone を 2 回繰り返してしまいます。
しっかり内容を理解して進める必要があります。特に、

Cloud9 のファイルエクスプローラーで、amplify-ui-geo-explore ディレクトリを展開します。

と記載がありますが、
npm install する際は、pwd コマンドを投入してどのディレクトリで実施すべきか確認した方が良いと感じました。

$ pwd
/home/ec2-user/environment/amazon-location-samples/amplify-ui-geo-explore
$ 

CloudFormation テンプレートは オハイオリージョンにある

CloudFormation スタックを展開する際に、テンプレート URL が「us-west-2」と表示されます。
注意深い方はここで「オハイオリージョンを選択すべきなのか?」と戸惑われたかも知れません。
バージニア北部のままで大丈夫です。
また、CloudFormation を利用した場合は、手順が飛びますので手順通りリンク先をクリックして手順をジャンプしてください。

Cloud9 のログを VS Code などに出力する

CloudFormation を使わずに手動でデプロイされた方は、Cloud9 のログを VS Code などのテキストエディタに書き出しておくと configuration.js の設定がスムーズだと感じました。
もし、Cloud9 を閉じてしまったりして、ログが確認できなくなった場合は、Amazon Location の管理画面にアクセスすると名前を確認できます。

まとめ

Amazon Location Service は 2021 年からその存在を認知していて、会社の Slack で発言した後、何度かトライしたのですがうまく扱えずにいました。

今回のハンズオンでデプロイ方法を理解でき、いろいろ試せるようになりました。
本当にありがとうございます。

JAWS-UG 佐賀 re:Boot ではハンズオン、LT、懇親会、2 次会と素敵な出会いと貴重な経験をたくさんいただきました。
フォージビジョンのメンバーも徐々に九州勢が増えてきたので、JAWS-UG 九州を盛り上げていきたいと思います!

最後までお読みくださりありがとうございました。