CDN・Edge：分散

単一VPSの場合：

• リクエスト時にユーザーのブラウザが静的ファイルをデプロイ元のVPSサーバーからダウンロードし実行、サーバー側で実行が必要なAPIや関数はVPSサーバー上のプロセスで実行。

• デメリット：

  • すべての静的ファイルを単一のVPSが配信するため、アクセス集中時にサーバー負荷が高くなる。

  • リクエストとサーバー間の地理的な距離が遠いとレスポンスが遅くなる。

CDN：

• CDNは静的ファイルのコピー（= キャッシュ）を世界中に分散して持つ仕組み。リクエストは地理的に近いCDNサーバーからレスポンスされるので、静的ファイルのレスポンス速度が向上する。

Edge：

• Edgeは地理的に分散された実行環境を指す。

• ただしEdgeランタイム（実行環境）はNodejsランタイムと比べると制限があるので、Edge + CDNでアプリを完結させるというより軽い処理を実行する為に用いられる。

リージョン：

• クラウドプロバイダーが持つ分散された拠点

ポート

ポートはコンピュータ上でアプリケーションが通信を行うための窓口で、ブラウザは「ウェブサーバー」との通信にポートを利用する。

ウェブサーバーのポート:

• ウェブサイトを配信するサーバーは80番（HTTP通信）や443番（HTTPS通信）といった特定のポートで待ち受けている。

ブラウザ（タブ）のポート:

• ブラウザはウェブサーバーと通信するためにPCの一時的なポート（1024から65535の範囲でランダムに選ばれる）を使う。各タブはこのポートを使って、外部のウェブサーバーからレスポンスを受け取る。

• 通信ごとに一時的なポートはランダムに変わる。= タブ側の一時的なポートとウェブサーバーの紐づけはその通信時のみなのでリロードしたら変わる。

• １つのサイトに対応するブラウザ側のポートは１つとは限らない。サイトが複数のCDNを使っているなら１つのサイトに見えても「複数ポート 対 複数ウェブサーバー」の通信になる。

• ウェブサーバーとの通信はブラウザ以外（例：curl）、もできるが、ブラウザが使われるのは画像やCSSを解釈できる = レンダリングエンジンを持っている為。

3000番ポートが使われる理由：

• 特権ポートではなくキリが良い数字だから

  • 特権ポート（0-1023）：システムの重要なサービス（例: Webサーバーの80番、HTTPSの443番など）が使うポート。これらのポートを使うには管理者権限が必要

TLS・TCP

TLS：

• 通信内容の暗号化と安全性を保証

• TLSはSSLの後続だが、習慣的にTLSが用いられていてもSSLと呼ばれることが多い。

TCP：

• 信頼性のあるデータ伝送を保証

• データをパケットに分けて順番通りに届け、欠落等を検出して再送する。

ブラウザ → TLS → TCP → インターネット

DNS

DNS = ドメイン名をIPアドレスに変換する仕組み

DNSサーバーの種類：

• ルートネームサーバー ：

  • .com , .net など「TLD（トップレベルドメイン）」を管理している場所を教える。

• TLDネームサーバー：

  • 各TLD（.com , .net など）のゾーン情報を管理

• 権威DNSサーバー：

  • 各ドメイン（ example.com）の最終情報を持っている。

  • 例：Vercel = ns1.vercel-dns.com、 Cloudflare = ns1.cloudflare.com

Storage / Cookie

• 検証ツールでサイト毎（ドメイン単位）に Local storage / Cookies 内のアイテムが違うのは、これらはドメインと紐づいている為

• タブ（ = メモリで実行されている）を閉じても内容が消えないのは、データがPCのストレージに存在している為

├── RAM（メモリ）           実行中のブラウザやJSが使う
└── SSD/HDD（永続ストレージ）　ブラウザごとに管理
     ├── Cookieファイル  
     ├── LocalStorage
     ├── IndexedDB
     └── Cache

localStorage

• 使い方： localStorage.getItem() / setItem() / removeItem()

• localStorageはブラウザ内専用の機能なのでアクセスできるのはクライアント側のコードだけ

cookie

• cookieは「ブラウザが送るHTTP ヘッダー」なので、サーバー側でcookieを読んだり値をセットしてレスポンスを返したり（HTTPヘッダーの書き換え）できる。

• サーバー側はcookieをどうするか「命令」をHTTPヘッダーとして返す。クライアント側は命令に従ってcookieを操作することも出来るし、自身でcookieをセットしたり出来る。

以下はNextjsでの例

サーバー

// get
const Page = async () => {
  const val = (await cookies()).get("from")?.value;

// set
  (await cookies()).set("key2", "value2");

• setはレスポンスヘッダーを書き換える操作なので、サーバーアクション or ルートハンドラーでしかセットできない。

クライアント

document.cookie：Web標準

  useEffect(() => {
    document.cookie = "name=hog"; // set

    const cookie = document.cookie; // 全取得
  }, []);

オブジェクト

localStorage / cookieはともに文字列形式でしか保存できないので、オブジェクトはJSON.stringfy でJSON文字列化する。

set：JSON.stringfy

// localStorage
localStorage.setItem("user", JSON.stringify({ name: "fhos", age: 11 }));

// cookie
document.cookie = `user=${encodeURIComponent(
  JSON.stringify({ name: "fhos", age: 11 })
)};

• cookieの場合はHTTPヘッダーで送られる際に、許可されない文字や記号が含まれている可能性があるのでencodeが必要

get：JSON.parse

// localStorage
const usr = JSON.parse(localStorage.getItem("user"));

// cookie
const cookies = Object.fromEntries(
  document.cookie
    .split("; ")
    .map((c) => c.split("="))
);
const userJson = decodeURIComponent(cookies.user);
const user = JSON.parse(userJson);

V8エンジン

V8エンジン：

• Googleが開発した「JavaScript エンジン」

• V8の役割は JavaScript のコードをコンピュータが理解できる機械語(0,1)に翻訳すること

  • 実行"環境"はV8を内蔵しているブラウザやNode.js

• ブラウザ：レンダリングが主な目的なので、V8エンジンだけでなくレンダリングエンジンもある。

  • 各タブは独立した実行環境を持つ。

• Node.js：サーバー用JavaScriptエンジンとして内部にV8が使われている。

  • ローカルPCやDocker、Github Actionで node のインストールが必要なのは、jsをPCに解釈させるために必要だから。

Lighthouse

Googleが公式に提供しているWebサイト品質の自動診断ツール

注意点：

• ブラウザの拡張機能が「Performance」項目の計測に大きな影響を与えるのでシークレットモードで行う（Ctrl + Shift + Nキー）。拡張機能無しの測定だとPerformanceが50近く加算される事もある。