💨

[AWS]S3(ホスティング,Jamstack)

2025/02/25に公開

AWS

Jamstack

ホスティング

tech

 ホスティングとは自分の作ったWebサイトやアプリをインターネット上で公開すること。
ローカルで作成したHTMLなどのファイルは、そのままだと自分のPC内でしか見れない。

これをインターネットのサーバーにアップロードして、世界中の人がアクセスできるようにするのがホスティング。
静的Webサイトのホスティング

HTML、CSS、JavaScript、画像などの「そのまま表示できるファイル」だけで構成されるサイトを公開すること
動的Webサイトのホスティング

PHP、Ruby、Node.js みたいなサーバーサイドのプログラムを動かして、ユーザーごとに違うデータを返すサイトを公開すること

 S3におけるホスティングS3は、データを保存するストレージサービス だけでなく、「静的Webサイト」をホスティングできる機能もある。

ファイルをS3バケットにアップロードすれば、Webサイトとして公開できる。
S3は PHPやRailsみたいなサーバーサイドのプログラム（動的プログラム）は動かせない。
ただし、「静的ファイルはS3に置いて、動的な処理は別のAPIサーバー（LambdaやEC2など）でやる」っていう構成なら、実質的に動的Webサイトとして運用することもできる。

例えば、フロントエンドをReactやVueで作って、バックエンドAPIを別でホスティングするようなケースだね。
これは先輩エンジニアが使ってた手法！

 Jamstack（ジャムスタック）先輩エンジニア🧑‍💻「フロントとバック分けて、RailsをAPI的に使用した開発をした」

この「静的ファイルはS3に置いて、動的な処理は別のAPIサーバーでやる」という構成は、「Jamstack（ジャムスタック）」。簡単に言うと、フロントとバッグを分ける。
そもそもAPIとは？
 ✅ APIとは？
API（Application Programming Interface, アプリケーション プログラミング インターフェース）

APIとは、「アプリケーション同士がやり取りをするための仕組み」 。

人間がWebサイトを見て情報を得るのと同じように、プログラム同士もAPIを使ってデータをやり取りする ことができる！

 🔍 APIのイメージ
例えば、スマホアプリで「天気情報」を取得したいとする。

このとき、スマホアプリが「天気情報API」にリクエストを送ると、APIがデータを返してくれる。
📌 APIのやりとりの流れ
[スマホアプリ] →（リクエスト）→ [天気情報API]  
[天気情報API] →（レスポンス）→ [スマホアプリ]
💡 つまり、APIは「他のシステムの機能やデータを提供する窓口」

 🔍 RailsでAPIを作る例
例えば、products_controller.rb にこんなコードを書くと、RailsがAPIとして動作する👇
class ProductsController < ApplicationController
  def index
    products = Product.all
    render json: products  # JSONを返す
  end
end
📌 APIをリクエストすると、こんなJSONが返る！
[
  { "id": 1, "name": "商品A", "price": 1000 },
  { "id": 2, "name": "商品B", "price": 2000 }
]
💡 こうやって、RailsをAPIとして使うことで、フロントエンドとデータのやり取りができる！
Jamstackは、2つのやり方がある。

 1️⃣ S3を使う静的サイト型（静的ホスティング）静的ファイルはS3に置いて、動的な処理は別のAPIサーバー（LambdaやEC2など）でやる

フロントエンド（ユーザーが見る部分）とバックエンド（サーバー側の処理）を分ける
サーバーレスでコストが安い
S3は、使った分のみ料金を支払うシステム
フルスタックのRailsアプリをEC2でホスティングすると ずっとサーバーが動いててコストがかかる けど、Jamstackで「フロントエンドはS3」「APIはLambda」にすれば アクセスがない時はほぼ無料
表示速度が爆速（CDNを活用できる）
フロントエンドは 静的ファイル だから、CDN（CloudFront, Vercel, Netlifyなど）でキャッシュできる
ページの読み込みが爆速になる（特に初回表示）
💡 例えば…

フルスタックのRailsアプリは サーバーが毎回HTMLをレンダリングする から、

ページを開くたびにデータベースと通信して 処理が遅くなる ことがある。

でも、Jamstackなら 一度生成したHTMLをCDNで配信するからめっちゃ速い！
セキュリティが強い（サーバー攻撃のリスクが低い）
動的な処理（ログイン、決済など）はすべてAPIで処理する から、フロントエンド側にデータベースがない
つまり、直接サーバーに攻撃されるリスクが低い（XSSやSQLインジェクションの被害が減る）
💡 例えば…

普通のRailsアプリなら、データベースを狙った SQLインジェクション攻撃 を受ける可能性がある。

でも、Jamstackなら フロントはただのHTML で、データ処理は 別のAPIサーバーが担当する から、セキュリティリスクが分散できる！
CDNとは？
 CDNとは？（コンテンツデリバリーネットワーク）CDN（Content Delivery Network）とは、Webサイトのデータ（HTML, CSS, JavaScript, 画像, 動画など）を世界中の複数のサーバーに分散して配信する仕組み のこと。

 💡 CDNを使うと…

ページの表示が速くなる

→ ユーザーの近くのサーバーからデータを配信できる

サーバー負荷が減る

→ 直接オリジンサーバー（元のサーバー）にアクセスしないから、負荷が分散する

DDoS攻撃に強い

→ 世界中のサーバーが分担して応答するから、特定のサーバーが落ちにくい

 CDNのイメージ（CloudFrontを例にすると…）
📌 CDNなし（普通のサーバー）
ユーザー（日本） ──────────→ サーバー（米国）
→ 米国のサーバーに直接アクセスするから遅い 🚨
📌 CDNあり（CloudFrontなど）
ユーザー（日本） ─→ CDNサーバー（東京） ─→ 元のサーバー
→ 日本に近いCDNサーバーがキャッシュしてくれるから、めっちゃ速い！ 🚀
📌 構成イメージ
[静的HTML + JS]  ← S3やNetlifyにデプロイ
   |
[API（Rails, Firebase, Headless CMS）] ← データ取得（必要な時だけ）
💡 この方法の特徴

✅ コストが安い（S3はほぼ無料）

✅ CDNで高速配信ができる

❌ 毎回デプロイしないとページが更新されない

❌ リアルタイムな更新には向かない

 2️⃣ SPA（React/Vue）を使う方法最初に1つのHTMLを読み込むだけで、あとはJavaScriptでページを書き換える
クリックしても ページ全体をリロードしない
画面が速く切り替わるから、スマホアプリのようなスムーズなUXを実現できる

例: Twitter, Facebook, Google Maps, Gmail, Trello, Slackなど
SPAとは？
 SPAとは？（Single Page Application）SPA（Single Page Application）は、最初に1つのHTMLを読み込んで、あとはJavaScriptでページの内容を動的に変更するWebアプリの構成のこと。
普通のWebサイトは、リンクをクリックすると毎回ページをリロードする けど、

SPAでは、ページの切り替えがすべてJavaScriptで行われるから、リロードなしでスムーズに動く！
💡 SPAのページ遷移（React/Vue）
[ユーザー] → (クリック) → [JavaScriptでページを書き換え] → [表示]
📌 リロードなしでページが変わるから、超スムーズ！
📌 構成イメージ
[React/Vue（SPA）]  ← Netlify/Vercel/S3にデプロイ
   |
[API（Rails API, Firebase, Headless CMS）] ← 必要な時だけデータを取得
💡 この方法の特徴

✅ リアルタイムでデータを取得できる（API通信）

✅ ページ遷移がリロードなしでスムーズ（SPAの強み）

❌ 最初の読み込みが遅くなりがち（JSを全部ロードするため）

❌ SEOが弱い（JSでレンダリングするため） → Next.js/Nuxt.jsで解決可能

 この場合のRailsは？Jamstack（ジャムスタック）では、Railsを普通のWebアプリ（ビュー付き）として使うんじゃなく、APIサーバーとして使う。

通常のRailsアプリ

erb テンプレートを使って、HTMLを生成する（フルスタックアプリ）
API的なRails

JSONを返すAPIだけを作って、フロントエンドは別に作る

この場合、Railsのビューファイル（erb）は作らない

ファイル構造はこんな感じapp/
  controllers/
    products_controller.rb  # ← JSONを返す
  models/
    product.rb  # ← データの処理
config/
  routes.rb  # ← APIのルーティング

 React・VuesとはReact（リアクト）とVue（ビュー）は、JavaScriptのフレームワーク（ライブラリ） 。

静的な「HTML・JavaScript」を動的に更新するツール。

普通のHTML・JSは「静的」だけど、React/Vueを使うと動的な更新が簡単にできる。

 🛠 React/Vueを使うとどうなる？（動的な例）
普通のHTMLでは、ボタンを押してもページがリロードされるけど、React/Vueなら動的に変えられる！

📌 Reactの例（カウンター機能）
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

export default Counter;
💡 このボタンを押すと、リロードなしでカウントが増える！

:::

 Jamstackのメリット・デメリットサーバーレスでコストが安い
静的ファイル（HTML/CSS/JavaScript）は S3やCloudflare PagesなどのCDNでホスティング できる
バックエンドのAPIも サーバーレス（AWS Lambda, Firebase Functionsなど）にすれば、使った分だけ課金される
サーバーの維持管理が不要で、サーバーレスならインフラコストが削減できる
💡 例えば…

フルスタックのRailsアプリをEC2でホスティングすると ずっとサーバーが動いててコストがかかる けど、

Jamstackなら「フロントエンドはS3」「APIはLambda」にすれば アクセスがない時はほぼ無料！
表示速度が爆速（CDNを活用できる）
フロントエンドは 静的ファイル だから、CDN（CloudFront, Vercel, Netlifyなど）でキャッシュできる
ページの読み込みが爆速になる（特に初回表示）
💡 例えば…

フルスタックのRailsアプリは サーバーが毎回HTMLをレンダリングする から、

ページを開くたびにデータベースと通信して 処理が遅くなる ことがある。

でも、Jamstackなら 一度生成したHTMLをCDNで配信するからめっちゃ速い！
セキュリティが強い（サーバー攻撃のリスクが低い）
動的な処理（ログイン、決済など）はすべてAPIで処理する から、フロントエンド側にデータベースがない
つまり、直接サーバーに攻撃されるリスクが低い（XSSやSQLインジェクションの被害が減る）
💡 例えば…

普通のRailsアプリなら、データベースを狙った SQLインジェクション攻撃 を受ける可能性がある。

でも、Jamstackなら フロントはただのHTML で、データ処理は 別のAPIサーバーが担当する から、セキュリティリスクが分散できる！

 参考文献https://blog.microcms.io/jamstack-introduction/

https://qiita.com/ozaki25/items/4075d03278d1fb51cc37

https://gini.co.jp/blog/what-is-jamstack

https://zenn.dev/airiswim/articles/457130f2e0107d

ホスティングとは

S3におけるホスティング

Jamstack（ジャムスタック）

✅ APIとは？

🔍 APIのイメージ

🔍 RailsでAPIを作る例

1️⃣ S3を使う静的サイト型（静的ホスティング）

CDNとは？（コンテンツデリバリーネットワーク）

💡 CDNを使うと…

CDNのイメージ（CloudFrontを例にすると…）

2️⃣ SPA（React/Vue）を使う方法

SPAとは？（Single Page Application）

この場合のRailsは？

React・Vuesとは

🛠 React/Vueを使うとどうなる？（動的な例）

Jamstackのメリット・デメリット

参考文献

Discussion