はじめに
金曜の夜に始めて、日曜の夜には「LINEスタンプガチャ(仮称)」を公開できました。
今回は AWSアカウント作成からサービス公開まで、知っていることから順に手をつけていきました。その中で「もっとこうしておけばよかった」と感じた点を見直し、ベストプラクティスとしてタイムライン形式に整理しました。
アーキテクチャ
Fig. サービスの全体構成（S3配信 / アップロード / Lambda中継構成）
構築手順
金曜夜
- AWSアカウント作成
- IAMユーザー作成（rootは使わない）
- 請求アラート設定（コスト監視）
- Route53でドメイン設定
- ACMでSSL証明書を発行（DNS検証を開始）
ここでDNS伝播待ちが発生
土曜日 夜
- DNS待ちの間にできることを進める（効率的！）
- S3バケット作成
- my-frontend-bucket（静的サイト配信用）
- my-upload-bucket（ユーザーアップロード用）
- CORS設定 & バケットポリシー の準備
- CloudFront Distribution作成
- OriginにS3を指定
- Alternate Domainに www.marukuma.com を登録
- 証明書（ACM）を仮で適用（検証待ち状態）
- IAMロール作成（S3アクセス権限をLambdaに付与）
- Lambda雛形作成（署名付きURL発行用）
- Next.jsで output: export を設定
- npm run build && npm run export で静的ファイル生成
- ローカルでの動作確認
日曜 午前
DNSの浸透確認
dig www.marukuma.com でCloudFrontのIPが返ることを確認
CloudFrontに証明書を正式適用 → HTTPS有効化
日曜 午後
S3へファイルデプロイ
aws s3 sync で静的アセット（長期キャッシュ）
aws s3 cp でHTML（no-cache）
aws cloudfront create-invalidation --paths "/*" でキャッシュ削除
CloudFront経由でフロントが表示されることを確認
日曜 夜
favicon / metadata 調整
署名付きURLで画像アップロード動作を確認
ZIPダウンロードまで一連のフロー完成
ポイント
- 証明書発行（ACM）とDNS検証は最初にやる
- DNS待ちがあるので、ここに早めに着手するのがコツ
- DNS待ちの間にS3 / CloudFront / Lambda / IAMを進める
- 時間を無駄にしない
- 最後にDNSが通ったら即HTTPS公開
- 週末でもサービス公開まで到達できる
まとめ
環境構築は初めてだったので金曜日の手順が一番大変でした。
退社後に頭をフル回転させていたので土曜日の昼間は爆睡してました。
土曜日の夜に再開して、ある程度理解できたので日曜日は朝からノリノリで、コードを書く手が止まりませんでした。気がつけば時間を忘れるほど夢中になっていて、やっぱり作るのは楽しいなと改めて実感しました。
次回は詰まったところなどを紹介します。
紹介
別記事でサービスの紹介も書いています。合わせてどうぞ！
LINEスタンプガチャ(仮称)サービス公開のきっかけになったブログ
LINEスタンプガチャ(仮称)サービスの紹介
LINEスタンプガチャ(仮称)