AWS Amplifyで令和に個人サイト（平成の思い出を込めて）

はじめに

平成の思いで

現在30代の自分は学生時代、ガラケーで「ほむぺ」を作って日記やプリクラを投稿していました。
黒歴史なので執筆中に体がむず痒くなっています（笑

交流のきっかけとして個人サイト

平成の思い出は置いといて
AWS Amplifyで個人サイトを作ってみたのでそのまとめです。

JAWS-UGなどに参加する機会が増え、交流のネタとして個人サイトを作りました。
NFCカードをスマホで読み取ってもらうよくある形式です。

大まかな構成はVue.jsとAWS Amplifyです。

流れ

1. 環境構築～Local環境で表示
2. ドメイン取得
3. AWS Amplify設定
4. お名前.com設定
5. 修正、動作確認（今回のメインディッシュ）
6. 完了

1. 環境構築～Local環境で表示

• ほとんどの作業はcursorでAIにお任せ
  • 「Vueコンテナ作って」
  • 「○○のリンク追加」
  • 「モバイル版のデザインはこうで～」

2. ドメイン取得

• ワイ「ドメインなんにしよ、やっぱRoute53で取るんか？」
• お名前.comにてkitayama-ichiro.xyzを取得
  • Route53 ：14.00 USD
  • お名前.com：0円

3. AWS Amplify設定

• 設定したのは3つだけ
  • githubリポジトリ
  • デプロイ対象ブランチ
  • ビルドコマンドnpm run build
• ドメイン名を設定kitayama-ichiro.xyz
• 今回は利用しなかった様々なオプションがある
• フレームワークを自動で検出して構築してくれる？（今回だとAmplifyがDockerを利用しているか不明）

4. お名前.com設定

• Amplifyから発行されたネームサーバ4つをお名前.comのドメインレジストリに設定
• 自動でSSL証明書を発行して関連付けまでしてくれる
• これでkitayama-ichiro.xyzがAmplifyのアプリケーションに紐づく

5. 修正、動作確認

• AWS Amplifyに設定したブランチにpushしたらデプロイされる
• テストも実行してくれる？（CI/CD？）

6. 完了

• NFCカードにURLを書き込み
• スマホで読み込んでみる
• やったー

感想

ワイ「AWS Amplifyの中身ってどうなっとるんや」

次はその辺を調査してもいいかなと思っています。
深淵でなきゃ良いな。。。
github actionsみたいな奴やな

今後の改修予定

• コンテンツを増やす
• 背景を設定
• アクセスカウンターでもつけるかwww（踏み逃げ禁止）