インストール直後または工場出荷直後のmacOS CatalinaにLaravel6.xをインストールする手順について説明を行なっています。Laravelのインストールを行う中で必要となるHomebrew, nodebrew, Node.jsなどのインストールについても詳細に説明を行っています。

2020年の3月3日にLaravel7がリリースされましたがLaravel6はLTS(Long Term Support)なので2022年9月3日までセキュリティフィックスが提供されます。

Composerのインストール

LaravelをインストールするためにComposerをインストールしておく必要があります。Composerがインストールされているかどうかはcomposer -Vコマンドを実行して確認してください。composer -Vコマンドでバージョンが表示されたらインストール済みです。


$ composer -V
Composer version 1.9.0 2019-08-02 20:55:32

Composerのインストールが行われていない場合は、インストールを実施してください。

Composerのサイトにアクセスすると下記のトップページ画面が表示されます。中ほど右にあるDownloadのリンクをクリックしてください。

composerサイトのトップ画面
composerサイトのトップ画面

インストールスクリプトの画面が表示されるので、赤で囲んだ部分をコピー&ペーストして、ターミナルを起動してコマンドラインで実行してください。

実行スクリプト
実行スクリプト

インストール後、実行ディレクトリにcomposer.pharファイルが作成されます。composerコマンドをどのディレクトリからも実行できるように/usr/local/binディレクトリに移動します。/usr/local/binディレクトリがない場合は作成します。 権限不足等でエラーが発生した場合は、sudoコマンド等を利用して、管理者権限として実行してください。その際は、管理者のパスワードの入力が必要になります。


$sudo mkdir -p /usr/local/bin
$sudo mv composer.phar /usr/local/bin/composer
本サ行では、/usr/localは存在しましたがその下にbinディレクトリは存在しませんでした。
fukidashi

移動が完了したら、composer -Vコマンドが実行できるか確認を行います。


$ composer -V
Composer version 1.9.0 2019-08-02 20:55:32
composer.pharを/usr/local/binに移動させましたが、移動させなくてもcomposer.pharを直接実行するとcomposerコマンドは実行することができます。composer.pharの移動では必須ではありません。
fukidashi

Laravelのインストールと初期設定

Laravelのインストール

インストールしたcomposerを利用してLaravelのインストールを行います。実行すると実行したディレクトリにlaravel6ディレクトリが作成され、その中にLaravel関連のパッケージがインストールされます。


$ composer create-project --prefer-dist laravel/laravel laravel6
laravel6のディレクトリが作成されたのはcomposerコマンドで指定をしているためです。ディレクトリの名前は任意なので好きな名前をつけてください。
fukidashi

Laravelの動作確認

インストールしたLaravelのバージョンを確認し、開発サーバを起動して動作確認を行います。

インストールディレクトリlaravel6に移動してバージョンの確認を行います。


$ cd laravel6
$ php artisan -V
Laravel Framework 6.3.0

バージョンが6.3.0であることがわかります。次に開発サーバを起動して、ブラウザからアクセスできることを確認します。


$ cd laravel6
$ php artisan -V
Laravel Framework 6.3.0
$ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>
Laravelのバージョンだけではなくマイナーバージョンによっても使える機能が異なるためバージョンを確認しておくことは重要です。
fukidashi

ブラウザを起動して、http://127.0.0.1:8000にアクセスしてください。下記の画面が表示されたらLaravelのインストールは完了しています。

Laravel6.0初期画面
Laravel6初期画面

Laravel uiのインストール

Laravel6では、Laravelのログイン認証機能を利用するためにはlaravel/uiのインストールを行う必要があります。インストールにはcomposerを利用します。


$ composer require laravel/ui

laravel/uiパッケージのインストールが完了するとphp artisanコマンドにuiオプションが追加され、ui:authを実行するとログイン機能を追加することができます。


$ php artisan ui:auth
Authentication scaffolding generated successfully.

認証機能の追加完了後、ブラウザでアクセスすると右上にログイン(login)とユーザ登録(register)のリンクが追加表示されます。

login, Registerリンクが表示
login, Registerリンクが表示

loginのリンクをクリックするとログイン画面は表示されますが、CSSの適用が行われていないため下記のような画面が表示されます。

CSSが適用されていないログイン画面
CSSが適用されていないログイン画面

vue.js、reactなどのフロントエンドのインストールが必要となります。ここではフロントエンドにvue.jsを利用するのでvueのインストールを行います。


 $ php artisan ui vue
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
認証機能とvue.jsを同時にインストールしたい場合は、php artisan ui vue –authを実行します。
fukidashi

インストールのメッセージに表示されているようにvue.jsを利用するためには、npmが必要となり、npmのインストールを行う必要があります。

npmのインストールが行われていないとnpmを実行してもコマンドが見つからないとエラーになります。Macではデフォルトではnpmはインストールされていないためインストールを行う必要があります。


 $ npm install
-bash: npm: command not found

npmのインストール

npmはNode.jsと一緒にインストールされるため、Node.jsのインストールが必要となります。Node.jsはNode.jsの公式ホームページからパッケージをダウンロードしてインストールすることが可能ですがここではHomebrewを使ってインストールを行います。

Node.jsのパッケージを使ってインストールする場合は下記が参考になります。

HomebrewもMacのデフォルトではインストールされていないためNode.jsの前にインストールを行う必要があります。

Homebrewはパッケージ管理ツールで、Mac OSのパッケージのインストール/アンインストールをコマンドラインで行うことができるためパッケージ管理を効率よく行うことができます。下記の文書でHomebrewの利点や使い方の解説を行なっています。

Homebrewのインストール

Homebrewのインストール方法を確認するために公式ホームページにアクセスします。

インストールを実行するためのスクリプトがトップ画面に表示されている(赤枠線)ので、コピー&ペーストして実行します 。Macの管理者のパスワードも必要となります。

Homebrewのトップページ画面
Homebrewのトップページ画面

rubyコマンドでインストールが実行されますが、rubyはMacのデフォルトでもインストール済みなのでスクリプトをそのまま実行してください。


$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールを実行すると途中でXcode Command Line Toolsのインストールの確認が表示されるので、そのまま”Enter”キーを押してください。またsudoコマンドを実行するためにパスワードも聞かれるのでパスワードを入力してください。

インストールが完了するとbrew helpコマンドを実行してください。brewコマンドの使用方法が表示されればHomebrewのインストールは完了です。


$ brew help
Example usage:
  brew search [TEXT|/REGEX/]

Node.jsのインストール

Node.jsはHomebrewのbrewコマンドからそのままインストールすることができますが、Node.jsのバージョン切り替えが行えるnodebrewのインストールを行います。

brewコマンドでnodeの詳細情報を確認したい場合は、brew info nodeコマンドで確認することができます。またインストールは、brew install nodeでインストールを行うことができます。詳細画面ではインストールされるnode.jsのバージョンがわかります。
fukidashi

brew installコマンドでnodebrewのインストールを行います。


$ brew install nodebrew
==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/nodebrew/1.0.1: 8 files, 38.6KB, built in 3 seconds

インストールメッセージにインストール後の処理について説明があるので、その通りに実施していきます。

ユーザのホームディレクトリで以下を実行します。


$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

実行するとホームディレクトリ直下に.nodebrewが作成されます。

パスの設定も行う必要があるので、.bash_profileの中に設定を記述します。


$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source .bash_profile 

nodebrewコマンドを実行してみましょう。下記のように表示されればインストールは完了しています。


$ nodebrew
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install
  ・
  ・

nodebrew ls-remoteコマンドを使うとインストール可能なバージョンを確認することができます。


$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    
 ・
 ・
v12.12.0  v12.13.0
 ・
 ・

2019.10.23現在のNode.jsのホームページ上の推奨版がv12.13.0なのでv12.13.0のインストールを行います。


$ nodebrew install v12.13.0
Fetching: https://nodejs.org/dist/v12.13.0/node-v12.13.0-darwin-x64.tar.gz
######################################################################### 100.0%
Installed successfully

インストールが完了したらリストコマンドで指定したバージョンがインストールされているか確認します。v12.13.0と表示されているので指定したバージョンがインストールされていることがわかります。


$ nodebrew list
v12.13.0

current: none

nodebrew listでcurrentがnoneになっているのは現在利用するnode.jsのバージョンが選択されていないためです。

使用するnode.jsのバージョンをuseを使って指定します。


$ nodebrew use v12.13.0
use v12.13.0

useで設定が完了したらnodebrew listでcurrentの状態を確認し、node -vコマンドを実施してバージョンを確認します。


$ nodebrew list
v12.13.0

current: v12.13.0
$ nodebrew use v12.13.0
use v12.13.0

node.jsのインストールが完了するとnpmコマンドを実行することができます。

npmコマンドの実行

node.jsのインストールが完了したので、php artisan ui vueコマンドの実行後に表示されていた下記のnpmコマンドを再度実行します。JavaScriptファイルのコンパイルなどが行われます。

実行は、Laravelのインストールディレクトリで行います。


$ npm install && npm run dev

実行後php artisan serveで開発サーバを起動して、ログイン画面にアクセスするとCSSが提供されたログイン画面が表示されます。

Laravelログイン画面
Laravelログイン画面

Registerのリンクからユーザ登録画面が表示されますが、データベースの設定を行っていないためユーザの登録を行うことはできません。

MAC環境でのデータベースの接続については下記の記事が参考になります。