Edited at

パソコン初心者がMacでPHP(Laravel)とjs(Vue.jsさらにNode.js)とその他諸々の開発環境

More than 1 year has passed since last update.


目的

パソコン初心者が突然LaravelとVue.js、さらにNode.jsのインストールをせざる得ない状況になった時に即座にインストールに困らないための手順書です。

Qiita初心者なので至らぬ点があるかもしれませんがよろしくお願いします。

各概要を軽く知りたい場合は

Laravel:Laravelのここがすごい

Vue:Vue.js JP

Node.js:Node.js を5分で大雑把に理解する

追記:

[Windows版の開発環境の整え方]


目次


インストール前の下準備


筆者の環境

項目
環境名

OS
MacOS high sierra

terminal
デフォルトにzshを導入

PHP
7.1.7

Mysql
14.14

初心者歴
1年


インストール前にインストールすると良いもの

Node.jsやLaravelを入れる前にまず入れておくべきものをご紹介

今回はここが本題ではないのでこの記事ではすっ飛ばします必要な部分だけ触れて行きます。

名前
役割

Homebrew
Macのパッケージマネージャー

git

nodebrew
バージョンの管理/切り替え

composer
パッケージの管理/切り替え


homebrewのインストール

さらに詳しく知りたい方はこちらの記事を読んでいただけると幸いです。

homebrewとは何者ぞ?という方はこの記事を見ている方なら多いと思いますが、簡単に言えばパッケージの導入を簡素かつさらに管理もできるシステムの一つだと思ってもらえれば良いかなと思います。

似たシステムとしてLinux(centos)のyumとrpmなども挙げられます。

勝手に私は索引のようなものと思っています。


terminal


$ ruby -e "$(curl -fsS http://gist.github.com/raw/323731/install_homebrew.rb)

これでhomebrewの導入が完了しインストールなどにもいけますが一応大切なコマンドだけまとめておきます。

brewの後ろにつけるコマンド

コマンド
役割

search
パッケージの検索

install
パッケージインストール

remove
パッケージ削除

link
パッケージ有効化

unlink
パッケージ無効化

list
パッケージの表示

他にもいっぱいあるけどここでは割愛


ついでにgit


terminal


$ brew install git


nodebrewのインストール

次にnodebrewです。

詳しいことはこちら※英語(git) もしくは※日本語(qiita)

まずはじめにgithubからnodebrewをインストール


terminal


$ curl -L git.io/nodebrew | perl - setup

次に.bashrcにパスを通します(zshの場合はbashをzshに変更)


terminal


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

その後適用


terminal


$ ebisennet$ source ~/.bash_profile

その後nodebrewで使えるコマンドまとめておきます

コマンド
役割

ls-all
インストール可能な全てのバージョンを表示

install-binary <任意>
バージョンインストール <バージョン/stable(安定板)/latest (最新版)>

ls
インストール済みバージョン

use <任意>
バージョンの指定<インストール済みバージョン>

-v
バージョン確認

useでバージョン指定していない場合は今後使うnpmが利用できないので確実に指定してください。


composerのインストール

composerに関しては詳しくはこちら

とりあえず今回はbrewでインストールのDLし、


terminal


$ brew install homebrew/php/composer

導入を確認


terminal


$ composer

でこのような表示が出たらインストール完了


terminal


______
/ ____/___ ____ ___ ____ ____ ________ _____
/ / / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__ ) __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
/_/
Composer version 1.6.3 2018-01-31 16:28:17

~~ 省略 ~~
why Shows which packages cause the given package to be installed.
why-not Shows which packages prevent the given package from being installed.



Node.js


インストール

このインストールでは、先ほどインストールしたnodebrewを前提にして解説そして、インストールして行きたいと思います。もし先ほどのnodebrewでインストールが完了している場合は次のパッケージ管理まで割愛します。


ここからはインストールをしていない方向け

今回は最新版ではなく直近の安定板をインストールする前提で解説して行きます。

ターミナルではこのようにコマンドを叩いて見てください


terminal


$ nodebrew install-binary stable

これによってインストールは完了するはずです。

その後インストールの確認をするために


terminal


$ nodebrew ls

とコマンドを打つと、直近の安定板がインストールされているはずです。

例えば2018/02/27だったらこんな感じ


terminal


$ nodebrew ls
v8.9.4

そしてバージョンを指定するために、ターミナルで


terminal


nodebrew use <任意のバージョン>

これでインストール完了かつ、有効化完了です。


パッケージ管理ツールの解説

Node.jsをインストールすると一緒にパッケージ管理ツールとしてnpmというものがインストールされます。このツールによって可能となることとして、このサイトで紹介されているパッケージの一括管理やインストールを行えるようになります。

そして今回は早くて快適と言う噂に聞くyarnをそこからインストールして行きましょう。yarnについて詳しくはこちら

インストールにはこのコマンドを打ち込みます


tarminal


$ npm install -g yarn

これによってyarnはインストールされます。

yarnを実際に使うのは環境構築の際に使って行きます。


Laravel


インストール

このインストールでの前提条件はcomposerをインストールしている状態であることです。

それでは初めて行きます。

と言ってもLaravelをインストールするだけならすごく簡単で、たったこのコマンドだけでインストール出来てしまうのです。(環境構築が終わるとは一切行っていない)


terminal


composer create-project --prefer-dist laravel/laravel <任意の名前> 5.5


Laravel+Vue.js+Node.js+Mysqlの環境構築

ここからはLaravel+Vue.js+Node.js+Mysqlの環境構築をして行きましょう。

まずはじめに、この項目での流れを見て行きましょう。


  • 1.LaravelとVue.jsとそれとそれと


  • 2.LaravelとMysqlの連携



LaravelとVue.jsとそれとそれと

cross-envをまずはじめにパスを通します。まずはじめにpackage.jsonを下記のように編集してください。


tarminal


{
~~省略~~,
"scripts": {
"dev" : "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch" : "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot" : "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
~~省略~~
}

さてここまで編集を終えたら次の段階に行きましょう

先ほどインストールしたyarnを使いパッケージをインストール


tarminal


yarn install

からの


tarminal


yarn run dev

で連携可能になりました。

もし間違えてはじめに素のままインストールをしてしまった場合はyarn upgradeからの


tarminal

yarn run dev


でエラー解消されます


LaravelとMysqlの連携

LaravelとMysqlをリンクさせるために.envファイルを書き換えます


tarminal


vim ~/<任意のname>/.env


.env


~~省略~~
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=<任意のポート>
DB_DATABASE=<database名>
DB_USERNAME=<ユーザー名>
DB_PASSWORD=<パスワード>
UNIX_SOCKET=/tmp/mysql.sock
~~省略~~

一応これで連携は撮れるはずです


参考資料+もっと詳しく+読もう

Qiita

homebrewとは何者か。仕組みについて調べてみた

NodeBrewインストール編

nodebrew

Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4

MacにNode.jsをインストール

PHP開発でComposerを使わないなんてありえない!基礎編

npm とか bower とか一体何なんだよ!Javascript 界隈の文脈を理解しよう

yarnチートシート

Composerコマンドについて

Laravel artisanコマンドメモ

他サイト

人気npmパッケージ25本をサクッと紹介する

composer再入門(PHPパッケージ管理システム)