1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Docker】5分でできるLaravel + Next.js開発環境構築

Posted at

#【Docker】5分でできるLaravel + Next.js開発環境構築

Docker Composeを利用して、LaravelとNext.jsによる開発環境をサクッと構築する手順をまとめました。
GitHubリポジトリはこちら: https://github.com/softjapan/laravel-nextjs-dev-environment


はじめに

この記事では、Laravel(バックエンド)Next.js(フロントエンド) をDocker上で手軽に立ち上げる方法を紹介します。あらかじめ用意されたイメージとDocker Composeファイルを使うことで、5分ほどで開発を始められます。

前提条件

  • Docker および Docker Compose がインストール済みであること
  • LaravelNext.js の基礎知識があること
  • コマンドライン操作に慣れていること

1. リポジトリをクローンする

まずは以下のコマンドで、リポジトリをローカル環境へクローンします。

git clone https://github.com/softjapan/laravel-nextjs-dev-environment.git

2. Laravel バックエンドの作成

次に、クローンしたディレクトリに移動して、Laravelバックエンドを作成します。
ここではデフォルトでMySQLが使われ、マイグレーションは後ほど行います。

cd laravel-nextjs-dev-environment
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev laravel new laravel-backend

3. Laravel Breeze と依存パッケージのインストール

Laravel Breeze(APIスキャフォールド)をインストールします。この段階ではマイグレーションは実行しません。

cd laravel-backend
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev composer require laravel/breeze --dev
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev php artisan breeze:install api

4. Next.js フロントエンドの作成

Laravel BreezeのNext.js版をクローンしてフロントエンドとして利用します。

cd ..
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev git clone https://github.com/laravel/breeze-next.git next-frontend

5. フロントエンドの依存パッケージをインストール

Next.js側の依存パッケージをインストールします。

cd next-frontend
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev npm install

6. 環境変数ファイルの設定

.env ファイルをLaravelとNext.js用にコピーします。
各種データベース接続などの情報が記載されているため、必要に応じて編集してください。

cd ..
cp ./envfiles/laravel-backend/.env ./laravel-backend/.env
cp ./envfiles/next-frontend/.env ./next-frontend/.env

7. Dockerコンテナの起動

準備が整ったら、Docker Composeを使ってコンテナを立ち上げます。

docker compose up -d

8. データベースマイグレーション

コンテナが稼働し、.envファイルが正しく設定されていることを確認したら、マイグレーションを実行します。

docker exec -it laravel-backend php artisan migrate

9. フロントエンドにアクセス

ブラウザを開いて、以下のURLにアクセスしてください。

http://localhost:3000

ログイン画面やトップページが表示されればOKです。


10. Dockerコンテナを停止する

開発を終了する際は、以下のコマンドでコンテナを停止・削除できます。

docker compose down

スクリーンショット

本リポジトリには、実行時のイメージとして以下のようなスクリーンショットが含まれています。

screenshot


まとめ

これで、LaravelとNext.jsのDocker開発環境を素早く構築できます。
詳細なコードや環境変数の設定、その他のカスタマイズなどはリポジトリを参考にしてください。


License

本プロジェクトは MIT License のもとで公開されています。


Contributing

バグ報告や機能追加の提案などは、Pull RequestやIssueでお気軽にご連絡ください。


お問い合わせ

不明点や追加のサポートが必要な場合は、リポジトリのIssueにてお知らせください。


ぜひ、この環境を活用してLaravel + Next.jsの開発をスピーディに始めてみてください!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?