Zenn
🍳

【Laravel】静的ファイル管理方法

に公開
CSS
JavaScript
frontend
img
tech

はじめに

Webアプリケーション開発を進めていて、CSSやJavaScriptといった静的ファイルの置き場所について迷ったことはありませんか？
public/ディレクトリに置いてよいファイルやresources/ディレクトリに置くべきファイルなど、安全性や保守性の観点から正しい構成を知ることはとても大切です。この記事では、Laravelにおける静的ファイルの配置に関する方針を紹介します。

対象者

  • CSSやJSファイルをpublic/に直接置いてしまっているエンジニア
  • チーム開発をしている方
  • ViteやLaravel Mixのビルドを見直したい方

Laravel ディレクトリ構成のおさらい

Laravelプロジェクトには以下のような役割があります。

ディレクトリ 役割
resources/ 開発用の素材置き場。SCSSやJSの元データをここに置く（開発者のみが扱う場所）
public/ コンパイル・バンドルされたCSSやJavaScript、HTMLテンプレートの出力先。Webサーバー経由で公開されるファイルを配置します
storage/ 一時的なファイルやログなど
vendor/ Composerパッケージ類

public/に様々なファイルを置いていませんか？

  • ソースが外部から見える：SCSSやモジュールバンドル（※複数のJSファイルや依存ライブラリを1つにまとめる処理）前のJSなど、本来見せるべきでない中間ファイルが公開されてしまう可能性があります
  • セキュリティリスク：環境によってはpublic/配下に置いたファイルが意図せずアクセス可能になる場合があります
  • メンテナンス困難：構成が分かりづらくなり、チーム開発時に混乱を招きます

静的ファイル管理の流れ (Vite環境)

Laravel 9以降ではViteがデフォルトビルドツールになりました。
安全かつ効率的に静的ファイルを管理する方法として、現在のLaravelで標準となっているViteを使った構成は以下の通りです。

  1. resources/scss/, resources/js/に素材となるファイルを配置
  2. vite.config.jsでビルド対象と出力先を指定（通常はpublic/build/）
  3. npm run devまたはnpm run buildでビルド
  4. Bladeテンプレートで@vite(['resources/js/app.js', 'resources/scss/app.scss'])を使用

ディレクトリ構成例

resources/
├── js/
│   └── app.js
└── scss/
    └── app.scss

public/
└── build/
    ├── assets/
    └── manifest.json

旧構成の場合 (Mix環境)

Laravel 8以前や既存プロジェクトではLaravel Mixが使用されています。基本方針はViteと同じです。

  • resources/に元データを置く
  • webpack.mix.jsでビルド対象を指定
  • npm run dev/buildでpublic/に出力

【Tips】静的ファイル管理のポイント

  • public/build/やnode_modules/を共有しないために.gitignoreに追記する

  • resources/とvite.config.jsはチーム内で共通管理する

  • 画像やフォントは resources/assets/ に置いてVite経由でビルドするか、もしくは公開前提の場合はpublic/assets/に直接配置する

  • CDNで読み込んでいたライブラリは、npm（Node.jsのパッケージマネージャ）を使ってライブラリをプロジェクトに追加し、Viteでバンドル管理する（依存関係の明示性とパフォーマンスが向上する）

  • 開発メンバーにViteの使い方の方針の共通認識を持ち、手動でpublic/に置く文化をなくす

【Tips】resources/とpublic/の違いを料理に例えると?🍳

フロントエンドについて上司に質問していると、こんなことを教わりました。

「Laravelで静的ファイルの置き場所に迷ったら、resourcesは台所、publicはお皿に盛り付けた料理だと思うとイメージしやすい!」

どういうことかというと、resources（台所）ではSCSSやJSを丁寧に調理し、ViteやMixという手段でビルドという加熱調理を行います。そしてpublic（テーブル）には、食べられる状態 = ユーザーに届けるファイルだけを並べます。この手順を守ることで、プロジェクトは衛生的で、安全で、誰が見ても美しい構成になる、ということでした。とてもためになったので、ぜひ参考にしてみてください。

おわりに

私自身、あるプロジェクトで静的ファイルの配置ルールを気にしないでいたことがあり、publicに直接CSSを置いて動かない、謎のJSエラーが出る…そんな経験に悩まされました。しかし、静的ファイルの整理整頓を心がけることで、バックエンドとフロントエンドの紐付けが少しずつ楽になりました。
誤解されがちな配置ルールを見直し、安全で効率的な構成を意識してみてください。本記事が静的ファイルの管理方法の参考になれば幸いです。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】
ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp/

GitHubで編集を提案

Discussion