みなさん、個人で遊びで作ったwebサイトどのように公開していますか？
勉強がてら簡単なwebサイトを作ったけど公開するのに維持費を払うほどのものでもない、、、デプロイするのにセキュリティなど考えるのが億劫、、、そんな悩みありますよね。
そんな悩みに対応するにはAWS Cloud FrontとS3で公開するがおすすめです！
結論から言うと小規模なアプリならこの構成で十分です。
コストも安く、HTTPS対応やキャッシュ配信なども自動で整い、非常に快適です。
なぜS3 + CloudFront構成が個人アプリに最適なのか
- サーバーレス構成なのでメンテナンスが不要
- コストが非常に安い（無料枠で十分なことも多い）
- HTTPS対応・キャッシュ配信・高可用性が自動で確保される
- Route 53などのサービスで独自ドメインも簡単に紐づけられる
またS3をパブリックアクセス禁止にして、CloudFront経由のみアクセス許可する設定をすればセキュリティ面も安心です。
簡単なアーキテクチャ図運用コストとセキュリティ
実際の運用コストは、S3とCloudFront合わせて**月数十円〜数百円程度**です。
無料枠の範囲内で収まることも多く、個人開発には非常に向いています。
セキュリティ面でも、
– S3をパブリック非公開に
– CloudFront経由でのみアクセス許可
– HTTPS通信を強制
とすることで、安全かつ高速に配信できます。
S3とCloudFrontとは
Amazon S3（Simple Storage Service）
S3はAWSが提供するオブジェクトストレージサービスです。
静的ファイル（HTML、CSS、JavaScript、画像など）を保存し、静的サイトとしてホスティングできます。
SPAのビルド成果物（`index.html`, `main.js`, `style.css` など）をアップロードするだけで、すぐに公開可能です。
Amazon CloudFront
CloudFrontはAWSのCDN（コンテンツ配信ネットワーク）サービスです。
S3の上に配置することで、世界中のエッジロケーションから高速に配信されます。
また、ACM（AWS Certificate Manager）と連携すれば無料でHTTPS対応が可能。
公開手順
ここからは実際に行った手順を紹介します。
1. S3にバケットを作成、ファイルをアップロード
- S3バケットをを任意の名前で作成
- バケット名以外は初期設定のまま
- cloud frontを介して公開するのでパブリックアクセスはブロックする
- 作成したバケットに対象のSPAファイルをアップロードする
2. CloudFrontディストリビューションを作成
Get Started
- disutribution name: 公開するサイトの名前
- description: 公開するサイトの説明（任意）
- distribution type: single website or app
- custom domain: 一旦空
Specify Origin
- origin type: amazon S3
- Origin
- S3 origin: 作成したバケットを選択
- origin_path: 公開するindexファイル
- settings: いじらない
enable security
WAFを設定するかどうかはお好みで
3. 公開されているか確認
もうすでにSPAが公開されています。
作成したディストリビューションから「ディストリビューションドメイン名」の値を検索してみましょう。
作ったサイトが見れるはず。
独自ドメインに変更したい場合はAWS Certificate Managerなどでで証明書を発行してドメインのネームサーバー側でCHAMEを追加すればできます。（今回は割愛します。）
おわり
AWSのS3とCloudFrontを組み合わせることで個人開発のSPAを 安く・速く・安全に公開できました
Webアプリをちょっと公開したいときや、ポートフォリオサイトを運営したいときに最適な構成です。
ではまた( ＾∀＾)
