MENU
WEBディレクター兼エンジニアの経験をもとに日々の気づきをお伝えしてます。
  1. ホーム
  2. その他
  3. Laravel＋Reactの環境構築方法（2023年5月時点）

Laravel＋Reactの環境構築方法（2023年5月時点）

Laravel＋Reactの環境構築方法

このページでは、mac上でLaravel（v10）でReactを使用するための環境構築方法をまとめてます。

目次

構築までの流れ

ざっくりした手順は以下の通り。

  1. homebrewをインストール
  2. （任意）Apacheをインストール
  3. （任意）MySQLをインストール
  4. nodejsをインストール
  5. php「v8.1以上」をインストール
  6. composerをインストール
  7. Laravelプロジェクトを作成
  8. 作成したプロジェクトフォルダ内で、以下のコマンドを実行
    composer require laravel/ui
    php artisan ui react
    npm install
    npm run dev
  9. 「php artisan serve」などで動作確認

homebrewをインストール

以下のコマンドでhomebrewをインストールします。
詳細は公式サイトで確認してください。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Apacheをインストール

以下のコマンドでApacheをインストールします。

brew install httpd

ApacheやMySQLなどのサービスを起動する場合は、コマンド「brew services start httpd」を実行します。
逆に停止させる場合は、コマンド「brew services stop httpd」を実行します。

MySQLをインストール

以下のコマンドでMySQLをインストールします。

brew install mysql

nodejsをインストール

以下のコマンドでnodejsをインストールします。

brew install node

phpをインストール

以下のコマンドでPHP8.1をインストールします。

brew search php
brew install shivammathur/php/php@8.1

composerをインストール

以下のコマンドでComposerのインストーラをダウンロードします。
詳しくはComposer公式サイトで確認してください。
→https://getcomposer.org/download/

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '55ce33d7678c5a611085589f1f3ddf8b3c52d662cd01d4ba75c0ee0459970c2200a51f492d557530c71c15d8dba01eae') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

以下のでコマンドでインストーラを実行します。

sudo mv composer.phar /usr/local/bin/composer

Laravelプロジェクトを作成

以下のコマンドでLaravelプロジェクトを作成します。

プロジェクトを作成するとコマンドを実行したフォルダ内に「プロジェクト名のフォルダ」が生成されます。

composer create-project laravel/laravel:^10.0 「プロジェクト名」

LaravelでReactを使えるようにする

LaravelでReactを使用するために下記のコマンドを実行します。

composer require laravel/ui
php artisan ui react
npm install
npm run dev

私の場合、「npm install」コマンド実行時にエラーが発生しました。
詳しくは下記の「環境構築時に躓いたポイント」を参照してください。

最後に「php artisan serve」で開発環境を起動させて動作確認をします。

環境構築時に躓いたポイント

npm installコマンドを実行した際に、下記のようなエラーが発生しました。

解決方法はエラー内に記載されているように「package.json」内の「”vite”: “^4.0.0″」を「”vite”: “^3.0.0″」に修正すればOKです。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vite@4.3.5
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/plugin-react@2.2.0
npm ERR! node_modules/@vitejs/plugin-react
npm ERR!   dev @vitejs/plugin-react@"^2.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/username/.npm/_logs/2023-05-11T00_23_23_458Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2023-05-11T00_23_23_458Z-debug-0.log

package.jsonの記載例

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@vitejs/plugin-react": "^2.2.0",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.7.5",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "sass": "^1.56.1",
        "vite": "^3.0.0" ←　ここを修正
    }
}
その他
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

関連広告

コメント

コメントする

目次