Go to Qiita Advent Calendar 2024 Top
LoginSignup
14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@A_zarainIPFactory

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

Last updated at Posted at 2018-02-27

#目的
パソコン初心者が突然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とは何者か。仕組みについて調べてみた]
(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)
[]
()

14
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?