【Laravel】Docker + Nginx + TailwindCSS環境構築で試したことまとめ

Last updated at 2025-02-08Posted at 2025-02-08

はじめに

「Laravel」をメインとする都内自社開発企業で、駆け出しエンジニアとして働き始めたのですが、理解度の甘さを感じて個人開発を通じて学習を始めました。

この記事では、「Laravel」の環境構築から立ち上げについて、Udemyやドキュメント、検索記事の内容を元に試した内容をまとめています。Laravel初学者の方や、これからLaravelを学び始める方の参考になれば幸いです。

前提/対象読者/環境

Laravel 初学者
Udemyなどを通してインプットは完了
mac m1 8GB
開発環境: Laravel 11、Docker、Nginx、Tailwind CSS

プロジェクト作成

必要なツールから環境構築についてまとめました。

Webサーバーとして「Apache(LAMP)」か「Nginx(LEMP)」の選択肢がありましたが、職場で「Nginx」を使用していることと、高負荷に強く軽量なため、学習も兼ねて「Nginx」を採用しました。それとエヌギンクスと思っていたのは秘密です。

LAMPは「Linux + Apache + MySQL + PHP」の略です。
Apacheがウェブサーバーとして使われます。

LEMPは「Linux + Nginx + MySQL + PHP」の略です。
Nginxがウェブサーバーとして使われます。

必要なツールなど

使用するツールについて簡潔にまとめました。

Laravel

PHPのフレームワークでMVCモデルを採用しており、開発効率を高めることができます。

composer

PHPの依存管理ツール。外部ライブラリのインストールや管理を容易に行うことができます。

vite

フロントエンド開発ツール。高速なビルドやホットリロードを提供し、開発体験を向上させます。「Laravel 9」以前は「Webpack」が使われていましたが、「Laravel 9」から「Vite」がデフォルトになりました。

Docker

コンテナ仮想化プラットフォーム。開発環境を簡単に構築・再現できるため、チーム開発やデプロイに最適です。

Nginx

Webサーバー。高速で高負荷に強く、静的ファイルの配信やリバースプロキシとして利用されます。

リバースプロキシとは、Webサーバーの代わりにクライアントからのリクエストを受け付け、Webサーバーに転送するサーバーのことです。

MySQL

リレーショナルデータベース管理システム。データの永続化や管理に利用されます。

TailwindCSS

WebサイトやWebアプリケーションの構築やデザインを支援するCSSフレームワークです。
予め設定されたユーティリティクラスを組み合わせて、直接スタイリングを行うことで、オリジナリティの高いデザインを作成できます。

おまけ：Makefile

Makefile は、よく使うコマンドを簡潔に記述し、短縮コマンドで実行できるようにするための仕組みです。

例：Makefile

up:
	docker compose up -d
build:
	docker compose build
down:
	docker compose down

この設定を行うことで、ターミナルで「make up」と入力するだけで「docker compose up -d」が実行されるようになります。

Makefile を使うことで、コマンドの入力ミスを減らし、開発効率を向上させることができます。

トラブルシューティング

最初Makefileにコマンドを登録した際に「Makefile:2: *** missing separator. Stop.」エラーが発生したのですが、「スペースでインデント」していたのが原因でした。

下記記事を参考にタブでインデントするように設定したところ動きました。

環境構築

下記の記事を参考に環境構築しました。
非常にわかりやすく良い勉強となりました。

今回Next.jsの設定はしてないですが、ゆくゆく時間があればチャレンジするつもりです。

遭遇したトラブル

環境構築やその過程で遭遇したエラーについて可能な限り思い出してまとめています。
トラブル発生時点でLaravelのインストールは完了しています。

データベースが繋がらない

dbのdockerがうまく立ち上がらず、確認したところデータベースと接続できてないことがわかりました。

解決策

「compose.yml」と「.env」ファイルのデータベース接続に関する情報が異なっていたため、そちらを修正し、再度「docker」の立ち上げを行いました。

以下設定例です。

compose.yml

db:
    environment:
      MYSQL_DATABASE: db
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
      TZ: Asia/Tokyo

デフォルトで「DB_CONNECTION」が「sqlite」になっているため、「mysql」に変更し、他の情報もcompose.ymlと同じにします。

.env

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=user
DB_PASSWORD=password

これらはRedoubleへの記載もあるのでそちらも確認すると良さそうです。

ローカルホストでページが表示されない

dockerが立ち上がったものの設定したローカルホストにアクセスしても表示されない状況でした。

問題

「Nginx」の設定ミスにより、「localhost」にアクセスしても「Laravel」の「welcome.blade.php」が表示されず、「File not found.」というエラーが発生。

解決策

「Nginx」の設定ファイル(default.conf)の「root」と「compose.yml」ファイルの「app」サービスの「volumes」設定を確認し、修正しました。

default.conf

root /var/www/src/public;

compose.yml

web:
    volumes:
      - ./src:/var/www/src

TailwindCSSが適用されない

TailwindCSSのクラスを適用してもなぜか反映されない状況でした。

対処内容

テンプレートファイルに次の記述をしたところ適用されるようになりました。

@vite(['resources/css/app.css', 'resources/js/app.js'])

この記述によって、CSSファイル(resources/css/app.css)の読み込みとJSファイル(resources/js/app.js)の読み込みを行い、Laravel Viteが監視し、変更があった場合には自動で再ビルドしてくれるので開発がスムーズになるようです。

しかし何かしら当たらない適用されないクラスやhoverが効かないものもあるので、ここは苦戦しそうです。

おわりに

なんとか環境構築と「TailwindCSS」適用まで辿り着いたのでここから開発に邁進していきます！
それにしても働きながらだと時間を捻出するのが難しく感じます。

この開発環境だといずれ、「Next.js」との連携もできなくはない気がするので、もし余裕があればそちらにもチャレンジしてみようと思います。

もし、この記事の内容に不備や改善点などがありましたら、ご指摘いただけると嬉しいです。