【月0円】AWSのS3とCloudFrontでポートフォリオサイトを公開する手順【初心者向け】

AIツール活用
2026.04.29

はじめに

「ポートフォリオサイトを作ったはいいけど、どこに公開しよう?」

レンタルサーバー借りる?無料のWixでいいんじゃ?と迷っているなら、AWS(Amazon Web Services)を選択肢に入れてみてほしいんですよ。

マンチーは実際にAWSのS3とCloudFrontでポートフォリオを公開していて、月額ほぼ0円で運用できています。

この記事では、AWSをまだ触ったことがない人でも分かるように、構築手順と気をつけるべきポイントを共有します。AWS未経験というより「AWS興味あり」レベルの人を想定して書いてます。業界にいればAWSって名前は嫌でも耳にしますからね。

1. なぜポートフォリオの公開先にAWSを選んだのか

選択肢は色々あります。レンタルサーバー、Wix、Netlify、GitHub Pages…。その中でなぜAWSなのか。マンチーが選んだ理由は4つ。

🟢 理由1:無料枠が強力で月0円運用できる

AWSには「無料利用枠」というのがあって、新規アカウント作成から12ヶ月は色々無料で使えます。S3は5GB、CloudFrontは月1TBの転送量まで無料。

ポートフォリオ程度のサイトならまず無料枠を超えません。マンチーは現時点で月数円〜数十円レベルで運用できてます。

🟢 理由2:静的サイト配信に最適な構成が組める

ポートフォリオは基本的に「見せるだけ」のサイト。データベースもサーバーサイドの処理もいらない静的サイト。これにはS3+CloudFrontがドンピシャなんですよ。

🟢 理由3:検索結果に出ない限定公開がやりやすい

これ意外と大事。ポートフォリオって取引先の営業時に見せるもので、誰でも検索で見られると困る情報も含むんですよね。

AWSなら推測困難なURL+検索エンジン除外設定が比較的簡単にできます(後述)。

🟢 理由4:AWS触ってる事自体がスキルアピール

これは副次的だけど、ポートフォリオの中身に「AWSで構築」って書けるのが地味に効きます。「あ、この人AWS分かるんだ」って印象を与えられる。

2. 全体構成

ざっくりこんな流れです。

[取引先のブラウザ] 
        ↓
[CloudFront(配信入口)] 
        ↓
[S3(ファイル倉庫)]
  • S3:HTMLや画像を保管しておく倉庫
  • CloudFront:世界中に高速配信するCDN(配信網)。アクセス制限もここで設定

S3に直接アクセスさせず、CloudFrontを経由させるのがポイントです。

3. 事前準備:絶対やる安全設定2つ

実作業に入る前に、何があってもこの2つだけは先にやっておいてください。マンチーからの切実なお願いです(理由は後述)。

🔑 設定①:請求アラート

なぜ必要か?

AWSは「使った分だけ課金」の従量制。設定ミスや想定外のアクセスで、気づいたら高額請求ということが普通に起こります。

請求アラートを設定しておけば、「今月◯ドル超えそうですよ」ってメールで教えてくれる。事故防止の保険です。

設定箇所:Billing → 予算(Budgets)→ 予算の作成

「月5ドルになったら通知」みたいに設定しておけばOK。

🔑 設定②:ルートアカウントのMFA(多要素認証)

なぜ必要か?

AWSアカウントを作った時の最初のメアド+パスワード、これが「ルートアカウント」と呼ばれる全権限を持つ最強アカウントです。

これが乗っ取られたら、全リソース消されたり、勝手に高額サービス起動されたりします。

MFA(認証アプリでワンタイムコード入力)を設定しておけば、パスワード漏れただけでは突破されません。

設定箇所:IAM → ユーザー → セキュリティ認証情報 → MFAデバイスの割り当て

💀 マンチー自伝:25万円事件

ここで切実な体験談をひとつ。

実は昔、独学でAWSのEC2(仮想サーバー)を立ち上げて遊んでた時期があったんですよ。学習のつもりで色々起動して、終わったら止めて…のつもりだった。

ある日、AWSから何気なくメールが届いた。

「今月のご利用料金:¥250,000」

…は?

調べたら、リージョンが海外(米国)のままになってて、しかもEC2の停止し忘れ+為替の影響で、ジャカジャカ課金が積み重なっていたという。

ググると同じような事故ってよくあるみたいなんですけど、25万円って金額は流石に別格でした(泣)。

このトラウマがあるからこそ、請求アラートとリージョン設定だけは何より先にって強く言いたいんですよ。皆さんは絶対に同じ轍を踏まないように。

4. リージョン選択は超重要

(声を大にして言いたい)

リージョンって何?

AWSのサーバーが物理的にどこの国にあるかの設定です。アカウント作成直後はだいたい米国東部(バージニア)になっています。

💢 なぜ東京(ap-northeast-1)に変えるべきか

  1. 通信が速い … 国内ユーザーへの配信が圧倒的に早い
  2. 為替リスク回避 … 海外リージョンはドル建てで請求が膨らむ
  3. 法令準拠 … データの所在国が日本である方が後々安心

画面右上の地域選択メニューで「アジアパシフィック(東京)」を選択。これだけ。これだけなんですけど、忘れる人が後を絶たないんですよ(マンチー含む)。

5. 🛠️ 実装手順

ようやく本題。ステップごとに進めましょう。

ステップ1:S3バケット作成

S3コンソールで「バケットを作成」。

  • バケット名:世界で一意になる名前を付ける(portfolio-yourname-2026みたいな)
  • リージョン:東京
  • パブリックアクセス:ブロックしたまま(後でCloudFront経由でアクセス許可するため)

ステップ2:HTMLファイルのアップロード

作成したバケットに index.html や画像、CSSをアップロード。フォルダごとドラッグ&ドロップでOK。

ステップ3:CloudFrontディストリビューション作成

CloudFrontコンソールで「ディストリビューションを作成」。

  • オリジン:作成したS3バケットを選択
  • オリジンアクセス:OAC(Origin Access Control)を使う(S3を直接公開せずCloudFront経由のみ許可)
  • ビューワープロトコル:HTTPS のみにリダイレクト
  • デフォルトルートオブジェクト:index.html

S3のバケットポリシーは、CloudFrontディストリビューション作成時に自動で更新されます。

ステップ4:HTTPS化(無料SSL)

CloudFrontのデフォルトドメイン(xxx.cloudfront.net)を使う限り、HTTPS化は自動。

独自ドメインを使うなら、AWS Certificate Manager(ACM)で無料SSL証明書を発行 → CloudFrontに紐付け。これも無料で完結します。

ステップ5:動作確認

CloudFrontが「Deployed」状態になったら、配布されたドメイン(https://xxxxxx.cloudfront.net)にアクセス。ポートフォリオが表示されればOK。

反映まで5〜15分かかることもあるのでコーヒーブレイク推奨。

6. 🔑 クローラー(検索エンジン)に引っかかりにくいURL設定

ポートフォリオを限定公開したい人向け。これ意外と知られてない。

推測困難なパスを使う

CloudFrontでは、こんな構成にできます:

https://xxx.cloudfront.net/xK8mN2pQ9vR4sT7w/index.html

xK8mN2pQ9vR4sT7w のようなランダム文字列をURLに含めることで、URLを知っている人だけがアクセスできる仕組み。

S3側でこのフォルダを作って、その中にindex.htmlを置けばOK。

noindex指定で検索除外

念のため、HTMLの<head>にこれを入れておく:

&lt;meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot; /&gt;

加えて、robots.txtをルートに配置:

User-agent: *
Disallow: /

これで検索エンジンに引っかかりにくくなります。100%の保証ではないですが、営業時の限定公開URLとしては十分。

7. 🤔 CloudFront Functionsで認証もできる(発展編)

「もっとちゃんと認証したい」という人向けに軽く紹介。

CloudFront Functionsって何?

リクエストが来た時に動く小さなJavaScriptのことです。10〜20行程度のコードで、こんなことができます:

  • URL に ?token=abc123 が付いてないと拒否
  • ?expires=20260501 で期限チェック
  • IPアドレス制限

例えばこんなコード(イメージ):

function handler(event) {
  var token = event.request.querystring.token;
  if (!token || token.value !== 'abc123') {
    return { statusCode: 403, statusDescription: 'Forbidden' };
  }
  return event.request;
}

CloudFrontに紐付ければ、トークン無しのアクセスは403で弾けます。

料金

CloudFront Functionsは月200万リクエストまで無料。個人ポートフォリオなら絶対超えないので、実質0円です。

期限付きURLにしたい時とか、ちょっとした認証を入れたい時に超便利。

8. 料金の実態

気になる料金、ぶっちゃけます。

サービス内容月額目安
S3ファイル保存(数百MB)約3〜10円
S3データ転送・リクエスト約10〜50円
CloudFront配信(月10GB以下)無料枠内
CloudFront Functions簡易認証ほぼ0円

合計:月100〜300円程度(無料枠期間は実質0円も可)

ただし、無料枠は新規アカウント作成から12ヶ月で切れるので、その後は有料モードに移行します。それでも数百円レベルなので、家計の負担にはなりません。

万が一無料枠を超えたら?

請求アラートを設定していれば事前にメールが来ます。慌てず対応すれば大事故にはならないです。

まとめ

ポートフォリオ公開先としてのAWSは、

  • 🟢 月0円〜300円で運用できる
  • 🟢 静的サイト配信に最適
  • 🟢 限定公開URL設計がやりやすい
  • 🟢 AWS触ってる証明にもなる

ただし、

  • 💢 リージョン設定は必ず東京に
  • 💢 請求アラートとMFAは初日に設定
  • 💀 25万円事件を繰り返さない(マンチー談)

最初の設定は2〜3時間かかりますが、一度作れば月額数百円で長期運用できる優秀な選択肢です。

次回は「CloudFront Functionsで期限付き認証URLを実装する方法」を予定しています。Phase 2の発展編、お楽しみに。

コメント

タイトルとURLをコピーしました