Zenn
💡

Webアプリ開発でよく聞く言葉をかみ砕いて説明する

に公開
Web
tech

※随時更新。自分のための備忘録

筆者は、これまで本格的なWebアプリ開発をしてきておらず、最近始めた。

Webアプリ開発をすることで新しく出てくる用語が多すぎて、忘れて何回も調べなおして効率が悪かったので、ここに集約していくことにした。

（にしてもWebアプリ開発特有の概念多すぎだろ～それにそれらの理解度を確認する資格試験なさすぎだろ～）

CORS

  • サーバが「このサイトからのアクセスは大丈夫」とブラウザに伝える仕組み
  • もし設定されていなければ、ユーザによるサーバへのアクセスをブラウザがブロックしてしまう
  • この設定はサーバ側で行う(具体的にはCORSエラーとはに記載)

CORSエラーとは

  • フロントエンド（例: http://localhost:3000）からAPIサーバー（例: http://api.example.com）にアクセスした

  • でも、APIサーバがレスポンスに以下の「許可証」をつけていなかった

    Access-Control-Allow-Origin: http://localhost:3000

  • ブラウザが「この通信は怪しい！」と判断して、セキュリティ上ブロックしてしまう

CORSエラーを解決する方法

  • APIサーバ側でレスポンスに「許可証」をつけるように設定する

  • 許可証のつけ方その1例：FastAPIなら以下のように記載することで、フロントエンドからのリクエストが通るようになる

    from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

  • 開発中だけは全部許可する（本番はセキュリティ上NG）

    allow_origins=["*"]
  • Webサイトが、ユーザのブラウザに一時的に保存する小さなデータ
  • 保存場所は、ユーザのブラウザ
  • サイトにアクセスするたびに、そのサイトのサーバにCookieが送信される

→ Cookieは「お店の番号札」みたいなもの

  • お店（Webサイト）が「この人はさっきカートに入れた人だな」と分かるように、番号札（Cookie）を渡す
  • その番号札を持ってまた来店（アクセス）すると、店員（サーバー）が「ああ、あなたですね！」と認識できる

Cookieを利用することのメリット

  • ログイン状態の保持 → 一度ログインしたら、次のページに移動してもログインし直さなくて済む
  • ショッピングカートの中身の記録 → 商品ページから移動しても、カートの中身が残る
  • サイトの表示設定や言語の保存 → 「日本語で表示」や「ダークモード」などの好みを記憶できる
  • アクセス解析や広告表示 → どのページを見たかを記録し、広告を最適化するのにも使われる

Cookieとセッションの違い

  • Cookie: 「ブラウザが持ち歩く番号札（セッションID）」
  • セッション:「サーバー側で管理されるユーザーの情報の実体」

つまり、Cookie自体にユーザー情報を全部保存するのではなく、ユーザー情報はサーバーのDBやメモリに置いておき、そのキーとなるIDだけをCookieに入れるのが一般的

リバースプロキシ

  • 「インターネットに公開される唯一の窓口」であり、裏側のアプリを守りつつ、便利な機能（負荷分散・SSL・キャッシュなど）を提供してくれる仕組み
  • 以下イメージ図
[Client: Browser]
       |
       v
  ┌─────────────┐
  │ Reverse Proxy│ (例: Nginx)
  └──────┬──────┘
         │
 ┌───────┼────────┐
 │       │        │
 v       v        v
App1   App2     Static files
(FastAPI) (Node)   (/var/www/html)

Discussion