#目的
パソコン初心者が突然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なども挙げられます。
勝手に私は索引のようなものと思っています。
$ ruby -e "$(curl -fsS http://gist.github.com/raw/323731/install_homebrew.rb)
これでhomebrewの導入が完了しインストールなどにもいけますが一応大切なコマンドだけまとめておきます。
brewの後ろにつけるコマンド
| コマンド | 役割 |
|---|---|
| search | パッケージの検索 |
| install | パッケージインストール |
| remove | パッケージ削除 |
| link | パッケージ有効化 |
| unlink | パッケージ無効化 |
| list | パッケージの表示 |
他にもいっぱいあるけどここでは割愛
ついでにgit
$ brew install git
nodebrewのインストール
次にnodebrewです。
詳しいことはこちら※英語(git) もしくは※日本語(qiita)
まずはじめにgithubからnodebrewをインストール
$ curl -L git.io/nodebrew | perl - setup
次に.bashrcにパスを通します(zshの場合はbashをzshに変更)
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
その後適用
$ ebisennet$ source ~/.bash_profile
その後nodebrewで使えるコマンドまとめておきます
| コマンド | 役割 |
|---|---|
| ls-all | インストール可能な全てのバージョンを表示 |
| install-binary <任意> | バージョンインストール <バージョン/stable(安定板)/latest (最新版)> |
| ls | インストール済みバージョン |
| use <任意> | バージョンの指定<インストール済みバージョン> |
| -v | バージョン確認 |
useでバージョン指定していない場合は今後使うnpmが利用できないので確実に指定してください。
composerのインストール
composerに関しては詳しくはこちら
とりあえず今回はbrewでインストールのDLし、
$ brew install homebrew/php/composer
導入を確認
$ composer
でこのような表示が出たらインストール完了
______
/ ____/___ ____ ___ ____ ____ ________ _____
/ / / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__ ) __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
/_/
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でインストールが完了している場合は次のパッケージ管理まで割愛します。
ここからはインストールをしていない方向け
今回は最新版ではなく直近の安定板をインストールする前提で解説して行きます。
ターミナルではこのようにコマンドを叩いて見てください
$ nodebrew install-binary stable
これによってインストールは完了するはずです。
その後インストールの確認をするために
$ nodebrew ls
とコマンドを打つと、直近の安定板がインストールされているはずです。
例えば2018/02/27だったらこんな感じ
$ nodebrew ls
v8.9.4
そしてバージョンを指定するために、ターミナルで
nodebrew use <任意のバージョン>
これでインストール完了かつ、有効化完了です。
パッケージ管理ツールの解説
Node.jsをインストールすると一緒にパッケージ管理ツールとしてnpmというものがインストールされます。このツールによって可能となることとして、このサイトで紹介されているパッケージの一括管理やインストールを行えるようになります。
そして今回は早くて快適と言う噂に聞くyarnをそこからインストールして行きましょう。yarnについて詳しくはこちら。
インストールにはこのコマンドを打ち込みます
$ npm install -g yarn
これによってyarnはインストールされます。
yarnを実際に使うのは環境構築の際に使って行きます。
Laravel
インストール
このインストールでの前提条件はcomposerをインストールしている状態であることです。
それでは初めて行きます。
と言ってもLaravelをインストールするだけならすごく簡単で、たったこのコマンドだけでインストール出来てしまうのです。(環境構築が終わるとは一切行っていない)
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を下記のように編集してください。
{
~~省略~~,
"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を使いパッケージをインストール
yarn install
からの
yarn run dev
で連携可能になりました。
もし間違えてはじめに素のままインストールをしてしまった場合はyarn upgradeからの
yarn run dev
でエラー解消されます
LaravelとMysqlの連携
LaravelとMysqlをリンクさせるために.envファイルを書き換えます
vim ~/<任意のname>/.env
~~省略~~
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=<任意のポート>
DB_DATABASE=<database名>
DB_USERNAME=<ユーザー名>
DB_PASSWORD=<パスワード>
UNIX_SOCKET=/tmp/mysql.sock
~~省略~~
一応これで連携は撮れるはずです
参考資料+もっと詳しく+読もう
Qiita
[homebrewとは何者か。仕組みについて調べてみた]
(https://qiita.com/omega999/items/6f65217b81ad3fffe7e6)
[NodeBrewインストール編]
(https://qiita.com/ebisennet/items/15c3c9fdb04e66db6323)
[nodebrew]
(https://github.com/hokaccha/nodebrew#install)
[Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4]
(https://qiita.com/acro5piano/items/908cd751b2ea97e19be1#%E3%81%AA%E3%81%9C-laravel-%E3%82%92%E4%BD%BF%E3%81%86%E3%81%AE%E3%81%8B)
[MacにNode.jsをインストール]
(https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
[PHP開発でComposerを使わないなんてありえない！基礎編]
(https://qiita.com/niisan-tokyo/items/8cccec88d45f38171c94)
[npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう]
(https://qiita.com/megane42/items/2ab6ffd866c3f2fda066)
[yarnチートシート]
(https://qiita.com/morrr/items/558bf64cd619ebdacd3d)
[Composerコマンドについて]
(https://qiita.com/reflet/items/d6f2c48688eb0f3af65d)
[Laravel artisanコマンドメモ]
(https://qiita.com/zaburo/items/37768b743ed6d0e28bf5)
他サイト
[人気npmパッケージ25本をサクッと紹介する]
(http://cabbalog.blogspot.jp/2017/12/npm-package-25.html)
[composer再入門(PHPパッケージ管理システム)]
(http://develtips.com/php/170)
[]
()