はじめに
平成の思いで
現在30代の自分は学生時代、ガラケーで「ほむぺ」を作って日記やプリクラを投稿していました。
黒歴史なので執筆中に体がむず痒くなっています（笑
交流のきっかけとして個人サイト
平成の思い出は置いといて
AWS Amplifyで個人サイトを作ってみたのでそのまとめです。
JAWS-UGなどに参加する機会が増え、交流のネタとして個人サイトを作りました。
NFCカードをスマホで読み取ってもらうよくある形式です。
大まかな構成はVue.jsとAWS Amplifyです。
流れ
- 環境構築～Local環境で表示
- ドメイン取得
- AWS Amplify設定
- お名前.com設定
- 修正、動作確認（今回のメインディッシュ）
- 完了
1. 環境構築～Local環境で表示
- ほとんどの作業はcursorでAIにお任せ
- 「Vueコンテナ作って」
- 「○○のリンク追加」
- 「モバイル版のデザインはこうで～」
2. ドメイン取得
- ワイ「ドメインなんにしよ、やっぱRoute53で取るんか？」
- お名前.comにて
kitayama-ichiro.xyzを取得- Route53 ：
14.00 USD - お名前.com：
0円
- Route53 ：
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（踏み逃げ禁止）
Views: 2
