CentOS8+LaravelをインストールしたVagrant環境にReactを導入する

JavaScript,Laravel,Linux,PHP,React,技術CentOS8,Vagrant,VirtualBox,備忘録,開発環境構築

こんばんわ。

仕事のストレスでスト〇ングゼロ(パイン味)の依存症になりかけているどうもみけぽんです。

 

前から環境構築はよくVagrant+VirtualBoxを使用していたのですが、セキュリティの問題でシンボリックリンクが貼れず、npmコマンドでReactがインストールできないことは結構大きなストレスではありました。

結論から言うとホストPCのDOSでReactをインストールすればOKだったので、その際の手順を備忘録としてまとめます。

 

 

CentOS8+LaravelをインストールしたVagrant環境にReactを導入する

前提

  • vagrant: 2.2.10
  • ゲストOS：CentOS8.2.2004（boxはgeneric/centos8）
  • ホストOS：Win10(64bit)
  • Laravel：8.10.0

 

ComposerでLaravelのUIパッケージをインストール

まずはプロジェクトディレクトリで下記コマンドを実行し、laravelのUIパッケージをインストール＆Reactの設定をします。

# composer require laravel/ui
# php artisan ui react

 

ホストマシンのWindowsにNode.jsをインストール

公式サイトからNode.jsをインストール。

2020年10月19日時点では最新版の14系を選択しました。

基本的にはどの設定もデフォルトのままでＯＫです。

 

ホストマシンからnpmコマンドを実行する

ホストマシンのDOS(コマンドプロント)でVagrantと連携している共有ディレクトリへ移動し、npmコマンドを実行します。

# エラーがでなければOK
> npm install


# 続けて下記コマンドを実行するとcross-envのエラーが出ました。
> npm run dev

# その場合はcross-envをグローバルにインストールしてください。
> npm install --global cross-env

# cross-envのインストールで問題なければもう一度npmコマンドを実行
> npm run dev

 

下記の設定ができればOKです。

  • プロジェクトディレクトリ直下にnode_modulesディレクトリが生成される
  • resource/js/components/Example.jsが生成される

 

まとめ

Vagrantからnpmを実行する方法をググるとVagrantかVirtualBoxの設定をいじる方法が多数出てきます。

どれも分かりづらくて設定が上手くいかず挫折していたのですが、この方法ならわりかし簡単にLaravel+React環境が構築できるので重宝しそうです。

JavaScript,Laravel,Linux,PHP,React,技術CentOS8,Vagrant,VirtualBox,備忘録,開発環境構築