はじめに
LaravelやVue.jsを学んでいると、よく「Webアプリケーションの仕組みを理解しましょう」と言われますよね。
でも実際のところ…
- 「どこで何が動いてるの？」
- 「セッションとかCookieってどう関係してるの？」
- 「
web.php、コントローラー、モデル、ビューってどうつながってるの？」
そんな疑問を持っている方向けに、この記事では Laravel × PHP × MySQL × nginx × Vue.js を使ったWebアプリの仕組みを セッション・Cookie・HTTP・CDN などのキーワードを交えつつ、図解で丁寧に解説します！
①使用技術スタックと役割
| 技術 | 役割 |
|---|---|
| Laravel | Webアプリ全体の骨組み（MVC構成） |
| PHP | サーバーサイド言語。Laravelの実行言語 |
| MySQL | データベース。ユーザー情報などを保存 |
| nginx | Webサーバー。HTTPリクエストをLaravelに渡す |
| Vue.js | フロントエンドで動的な表示を担う |
| CDN | 静的ファイル（画像・CSS・JS）を高速配信 |
②Webサイト全体の流れ（図解）
[ブラウザ]
↓ HTTPリクエスト（GET / POST など）
[CDN] ← 画像・CSS・JSはここで返される
↓（動的ページはnginxへ）
[nginx（Webサーバー）]
↓
[Laravelの public/index.php]
↓
[routes/web.php（ルーティング）]
↓
[Controller（処理ロジック）]
↓
[Model（DBアクセス）]
↓
[View（Blade or Vue.js）]
↓
[HTTPレスポンス]
↓
[ブラウザにHTML表示]
③Laravelの構成ファイルと役割
-
routes/web.php（ルーティング）
URLとコントローラーの処理を結びつけます。
Route::get('/users', [UserController::class, 'index']);
-
Controller（コントローラー）
HTTPリクエストを受けて、処理・DB操作を行い、ビューを返します。
class UserController extends Controller
{
public function index(Request $request)
{
$users = User::all();
return view('users.index', compact('users'));
}
}
-
Model（モデル）
DBテーブルと連携する部分。Eloquent ORMを使用します。
class User extends Model
{
protected $fillable = ['name', 'email'];
}
-
View（ビュー）: Bladeテンプレート or Vue.js
HTMLの見た目部分。Bladeならサーバーで生成、Vueならフロントで動的表示。
<!-- resources/views/users/index.blade.php -->
<h1>ユーザー一覧</h1>
@foreach ($users as $user)
<p>{{ $user->name }}</p>
@endforeach
④HTTP通信・セッション・Cookieの関係性
-
リクエスト（Request）
ユーザーがサーバーに送る「お願い」。
URL、パラメータ、Cookie、ヘッダーなどを含みます。
$request->input('email');
-
レスポンス（Response）
サーバーから返す「お返し」。
HTMLやJSON、Cookie、ステータスコードなどが含まれます。
return response()->json(['status' => 'OK']);
-
セッション（Session）
ログイン状態など、サーバー側で一時的に保存する情報。
session(['user_id' => $user->id]);
Laravelは、セッションIDをCookieに保存し、値はサーバー側で管理します。
-
Cookie
ユーザーのブラウザに保存される小さなデータ。
セッションIDやログイン情報の記録などに使われます。
setcookie('visited', 'true', time() + 3600);
⑤CDN（Content Delivery Network）とは？
画像やCSS・JSファイルなどを世界中のCDNサーバーから配信し、Webページの表示を高速化する仕組みです。
- CDNを使ったVue.jsの読み込み例
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
⑥まとめ
Laravelを使ったWebアプリは、
1. ブラウザからのHTTPリクエスト
2. nginxが受け取り、Laravelのルーティング（web.php）へ
3. Controllerが処理、必要に応じてModelでDBアクセス
**4. **View（BladeやVue.js）で画面を作成
5. 最後にHTTPレスポンスとしてブラウザへ返却
という流れで動いています。
さらに、セッションやCookieがログイン状態を維持したり、CDNが表示速度を上げたりと、いろいろな仕組みが裏で支えています。