はじめに
「自分のポートフォリオサイトを作りたいけど、サーバーの構築とか面倒くさそう…」
「お金も時間もかけたくない…」
そう思っていませんか？
もしあなたがHTML、CSS、JavaScriptだけで作られた静的なサイトを持っているなら、AWSのS3（Simple Storage Service)を使うのが最も簡単で、最も費用を抑えられる方法です。
この記事では、AWSの知識がほとんどなくても、S3だけでポートフォリオサイトを公開する最短ルートを解説します。
この記事を読めば、以下のメリットが得られます。
サーバー構築の知識が不要：複雑なサーバー設定は一切ありません。
圧倒的な低コスト：トラフィックが少ない個人サイトなら、月額数十円～数百円で運用できます。
AWSの基礎が身につく：今後のキャリアに役立つAWSの基本的なサービスに触れることができます。
さあ、一緒にサクッとサイトを公開してみましょう！
1. サイト公開までの全体像
まずは、これから構築するシステムの全体像を理解しましょう。
今回目指すのは、以下の図のようなシンプルな構成です。
画像の説明：ユーザーがブラウザから独自ドメインにアクセス。リクエストはCloudFrontを経由してS3バケットに送られ、保存されている静的ファイル（HTML, CSSなど）がユーザーに返される。ACMがSSL証明書を管理する。
この構成のポイントは、以下の3つです。
構成ポイント
S3：静的ウェブサイトのファイルを保存する「倉庫」の役割をします。
Route 53：取得した独自ドメインを管理します。
CloudFront：サイトの表示速度を上げ、HTTPS通信を可能にするためのサービスです。
これら3つのサービスを連携させることで、安全で高速なポートフォリオサイトが完成します。
2. S3で静的ホスティングを始めるための準備
サイトを公開するために必要なものを準備しましょう。
-
AWSアカウントの作成
まだAWSアカウントを持っていない場合は、公式サイトから作成してください。クレジットカード情報の登録が必要ですが、無料利用枠があるので、今回の構成であればほとんど費用はかかりません。 -
ポートフォリオサイトのファイルを用意
公開したいポートフォリオサイトのファイル一式（index.html, style.css, main.js, 画像ファイルなど）を用意してください。
このとき、トップページは必ずindex.htmlというファイル名にしておく必要があります。
3. S3バケットを作成しよう
それでは、いよいよAWSコンソールを操作していきます。
- バケットの作成
AWSマネジメントコンソールにログインし、検索窓から「S3」と入力してサービスを開きます。
「バケットを作成」ボタンをクリックし、以下の設定でバケットを作成します。
AWSリージョン：東京（ap-northeast-1）など、利用者に近いリージョンを選択
バケット名：サイトのドメイン名と完全に一致させる必要があります。（例：www.yourdomain.com）
オブジェクト所有権：「ACL無効（推奨）」のまま
パブリックアクセスの設定：「パブリックアクセスをすべてブロック」のチェックを外す
バケットポリシー：後で設定するので、このまま
（S3バケット作成画面の画像）
画像の説明：バケット名にドメイン名を指定し、「パブリックアクセスをすべてブロック」のチェックを外している画面のキャプチャ。
- 静的ウェブサイトホスティングの有効化
バケットが作成できたら、そのバケットの詳細画面に移動し、「プロパティ」タブを開きます。
一番下までスクロールすると、「静的ウェブサイトホスティング」という項目があるので、「編集」をクリックします。
静的ウェブサイトホスティング：「有効にする」を選択
ホスティングタイプ：「静的ウェブサイトをホストする」を選択
インデックスドキュメント：index.html
エラードキュメント：404.html (任意)
変更を保存すると、バケットの詳細画面に「バケットウェブサイトエンドポイント」が表示されます。これは、S3に直接アクセスするためのURLです。後で使うので覚えておいてください。
- バケットポリシーの設定
最後に、このS3バケットを誰でも閲覧できるように、アクセス権限を設定します。
バケットの詳細画面で「アクセス許可」タブを開き、「バケットポリシー」を編集します。
以下のポリシーをコピー＆ペーストし、「Resource」の部分をあなたのバケット名に合わせて書き換えて保存します。
JSON
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::www.yourdomain.com/*"
}
]
}
これでS3の設定は完了です！
4. ドメイン名を設定しよう
次に、ポートフォリオサイトに独自ドメインを設定します。
Route 53というサービスを使います。
-
Route 53でドメインを取得
まだ独自ドメインを持っていない場合は、Route 53からドメインを取得するのが一番簡単です。
「Route 53」サービスを開き、「ドメイン登録」から好きなドメインを取得しましょう。 -
ドメインとS3バケットを連携させる
ドメインを取得すると、自動的に「ホストゾーン」が作成されます。このホストゾーンに、S3とドメインを紐づける設定を追加します。
まず、S3バケットの詳細画面で確認した「バケットウェブサイトエンドポイント」をメモしておきましょう。
次に、Route 53のホストゾーン画面に移動し、「レコードを作成」ボタンをクリックします。
ルーティングポリシー：シンプルルーティング
レコード名：www
エイリアス：「エイリアス」をオンにし、ターゲットを「S3ウェブサイトエンドポイントへのエイリアス」から、先ほど作成したS3バケットを選択します。
（Route 53レコード作成画面の画像）
画像の説明：wwwレコードのエイリアス設定で、S3バケットを選択している画面キャプチャ。
これで、www.yourdomain.comというURLでS3にアクセスできるようになります。
5. HTTPS化でサイトをセキュアに
S3の静的ウェブサイトホスティングはHTTP通信のみをサポートしており、そのままではHTTPS（SSL/TLS暗号化通信）に対応できません。
そこで、CloudFrontと**ACM（AWS Certificate Manager）**を使って、HTTPS化を行います。
- SSL/TLS証明書の取得（ACM）
「ACM」サービスを開き、**「バージニア北部リージョン（us-east-1）」**で証明書をリクエストします。
CloudFrontは証明書をバージニア北部リージョンからしか参照できないため、このリージョンで作成する必要があります。
ドメイン名にyourdomain.comと*.yourdomain.comの2つを入力し、検証方法を「DNS検証」にしてリクエストを送信します。
その後、Route 53でのレコード作成を促されるので、指示に従って作成しましょう。数分で証明書が発行されます。
（ACM証明書リクエスト画面の画像）
画像の説明：ACMでドメイン名（yourdomain.comと*.yourdomain.com）を入力し、DNS検証を選択している画面キャプチャ。
- CloudFrontの設定
次に、CloudFrontサービスを開き、「ディストリビューションを作成」します。
オリジンドメイン：S3の「バケットウェブサイトエンドポイント」を選択
ビューワープロトコルポリシー：「Redirect HTTP to HTTPS」を選択
代替ドメイン名（CNAME）：www.yourdomain.com
カスタムSSL証明書：ACMで作成した証明書を選択
（CloudFrontディストリビューション作成画面の画像）
画像の説明：オリジンにS3ウェブサイトエンドポイント、代替ドメインにwww.yourdomain.com、SSL証明書にACMで作成したものを選択している画面キャプチャ。
これでCloudFrontの設定は完了です。ディストリビューションの作成には数分～数十分かかります。
最後に、Route 53に戻り、www.yourdomain.comのエイリアスターゲットを、S3ではなくCloudFrontのディストリビューションドメイン名に修正します。
6. ファイルをアップロードして公開
いよいよ最後のステップです。
S3バケットに、あなたのポートフォリオサイトのファイルをアップロードします。
- S3へのファイルアップロード方法
一番簡単なのは、S3コンソールからドラッグ＆ドロップでアップロードする方法です。
「オブジェクト」タブを開き、フォルダごとアップロードすればOKです。
より効率的に作業したい場合は、AWS CLI（コマンドラインインターフェース）をローカルPCにインストールし、以下のコマンドで同期するのが便利です。
aws s3 sync ./path/to/your/site s3://www.yourdomain.com --delete
--deleteオプションを付けると、ローカルにないファイルがS3から削除されるので、常に最新の状態を保てます。
- 公開後の確認
ファイルのアップロード後、https://www.yourdomain.comにアクセスして、サイトが表示されるか確認しましょう。
CloudFrontのキャッシュが反映されるまで時間がかかる場合がありますが、無事に表示されれば成功です！
7. まとめと次のステップ
今回は、S3、Route 53、CloudFront、ACMを連携させることで、安全で費用対効果の高いポートフォリオサイトを構築しました。
この構成の最大のメリットは、メンテナンスフリーであることです。サーバーの管理やOSのアップデートを気にする必要がなく、あなたの貴重な時間を開発に集中させることができます。
次のステップとして、GitHubにソースコードをプッシュするだけで、S3へのデプロイが自動化されるCI/CD（継続的インテグレーション/継続的デリバリー）パイプラインを構築してみましょう。AWS CodePipelineとCodeBuildを組み合わせると、より効率的な開発が可能になります。
今回の記事が、あなたのAWS学習のきっかけになれば嬉しいです。
質問や感想があれば、ぜひコメントで教えてください！
安心安全のホワイト高還元SESに転職を考えている方へ
新しい挑戦に踏み出すことは、人生において重要な一歩です。 転職活動は自分自身を知り、成長する貴重な機会でもあり、夢や成長を追求するためには必要な要素の一つ になるかと思います。 どんな選択をされるにせよ、その決断があなたに取って素晴らしい未来を切り開くことを願っています！ グラディートと一緒に誇れるエンジニアを目指しましょう！
■『株式会社グラディート』では受託開発・SES・ブランディングデザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね！（年収査定・SESへの転職相談も承っております！）
株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/
株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/