クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

Laravel元年!インストールしてMAMP環境で白い画面出す!!

令和元年。そして(私にとって)Laravel元年!!何はなくとも始めました。まずはLaravelをインストールしてローカルのMAMP環境で白い画面を出すところまで。

【目次】

Laravelとは

LaravelとはPHPフレームワーク。Webアプリ(ブラウザで動くアプリケーション)を作ることができます。WordPressなどのCMSを構築するまでの規模じゃないがPHPやDBを動かすコンテンツを作りたい、という場面が増えてきたため、ぜひ習得したいと思っています。2019年度のマイテーマの一つです。

PHPとPHPフレームワークについてはこちらで書きましたが、この時点ではPHPフレームワーク=CakePHPのイメージしかありませんでした。

※参考:サーバサイドの中でのWordPressの位置付け - クモのようにコツコツと

その後、Laravelの存在を知り、今は本を購入して学習中です。

※参考:PHPフレームワーク-Laravel入門

Laravelインストールの流れ(ローカル環境)

以前、PHPコードをMAMP環境からSourceTreeでGitHubにプッシュし、さらにHerokuにデプロイしました。

※参考:ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!) - クモのようにコツコツと

今回もそこまで行きたかったのですがHeroku上では期待した挙動にならなかったため、今回はローカル環境でのインストールまでを書きます。このような流れです。

  • composerをインストール
  • Laravelをインストール
  • 環境変数PATHを設定
  • MAMP環境でプロジェクトを作成
  • MAMP環境で「白い画面」表示

先のLaravel本の手順がベースですが、本ではプロジェクト作成がXAMPPだったのをMAMPにしました。あと私はコマンドの知識が少ないため、写経だとエラーの内容が理解できず、ひとつひとつのコマンドの意味を調べながら進めました。

composerをインストール

公式サイトからファイルをダウンロード

まずはcomposerをインストールします。composerとはPHPの依存関係を管理できるツールです。

※参考:ComposerでPHPの依存関係を管理する - Qiita

composerはまず公式サイトで最新版のファイルをダウンロードします(Macの場合)。

※参考:Composer

ファイルがダウンロードフォルダにcomposer.pharというファイルがダウンロードされます。

/usr/local/bin/ディレクトリに移動

ターミナルを開いてダウンロードフォルダに移動

$ cd ~/Download/

cdコマンドはチェンジディレクトリ(ディレクトリの移動)という意味。~/はOSのホームディレクトリでその直下のDownloadディレクトリに移動。

先ほどダウンロードしたファイルを /usr/local/bin/ディレクトリに移動します。

$ sudo mv composer.phar /usr/local/bin/composer

sudoコマンドはスーパーユーザ(最高権限)として命令をdo(実行)します。mvコマンドはファイルの移動(move)。composer.pharファイルを移動。移動先が/usr/local/bin/ディレクトリでファイル名がcomposerに変わります。/bin/はコマンドが保存されているディレクトリです。

パーミッションを設定

配置したcomposerのパーミッション(アクセス権)を変更。

$ chmod a+x /usr/local/bin/composer

chmodコマンドはファイルやディレクトリのアクセス権を変更するコマンド。

※参考:chmod

aは全員、+は追加、xは実行権限。対象ファイルは先ほどのcomposerです。

ターミナルで下記のコマンドを実行。

$ composer -V

composerのバージョンが表示されていれば正常にインストールされています。

Laravelのインストール

いよいよLaravelをインストールします!下記のコマンド

$ composer global require "laravel/installer=~1.1"

composer global requireはcomposerで追加されたコマンド。

※参考:Composer のグローバルインストール - Qiita

Laravelをcomposerを通してインストールします。しばらく時間がかかったあとにまた入力できる状態になったら完了。

環境変数PATHを設定

Laravelのコマンドを実行するには環境変数PATHの設定が必要です。

環境変数PATHは、コマンドを実行するプログラムが保存されているディレクトリの場所を設定する変数です。

※参考:読めばわかるMACでのPATH設定を完全理解 | アールエフェクト

$ echo "export PATH=~/.composer/vendor/bin:$PATH" >> ~/.bash_profile
$ source ~/.bash_profile

ここらへんもコマンドがわかってないとかなり写経になってしまう。echo コマンドは画面に文字を表示する。exportコマンドは環境変数を設定する。

※参考:PATHを通すために環境変数の設定を理解する (Mac OS X) - Qiita

そして>>はファイルに追記とのこと。(>は上書きなので注意!)

※参考:「>」と「>>」の違い

最後のsourceコマンドはファイルを読み込む。

私はここでつまづいてしまいました。not a valid identifierというエラーになり、やり直すためにGUIの「Funter」というソフトをインストールし、隠しファイル「.bash_profile」を表示して、追記された部分を削除してやり直しました。こちらの記事に助けられました!

※参考:ターミナルが「not a valid identifier」というエラーを吐くときの対処法 - Qiita

MAMP環境に新規プロジェクト作成

MAMPをインストールしていない方はインストールしてください。

※参考:誰でもできる!MAMPのインストール方法【初心者向け】 | TechAcademyマガジン

MAMP環境でのファイル置き場に移動します。

$ cd /Applications/MAMP/htdocs/

場所は/Applications/MAMP/の中のhtdocs/ディレクトリです。

この場所でlaravelのプロジェクトを作成

$ laravel new hoge

laravel newはlaravelで追加されたコマンドで新しいプロジェクトを作ります。hogeの部分はプロジェクト名なので任意でつけてください。

しばらく時間がかかったあと、コマンドが打てるようになったら作成完了です。

MAMP環境でLaravelの白い画面を表示

MAMPを立ち上げてください。

f:id:idr_zz:20190502233024j:plain

ツールの「preferences」の「Web Server」タブを開くとMAMPのドキュメントルートがどのディレクトリになっているか見えます。

f:id:idr_zz:20190502233038j:plain

初期設定は/Applications/MAMP/htdocs/です。

「select」で今回作ったディレクトリを選び直してもいいですし、この画面に表示されているディレクトリ名を辿って開いていってもいいです。

MAMPの最初の画面の真ん中、「Open WebStart page」を押すとブラウザが開きます。

f:id:idr_zz:20190502233323j:plain

さらにこの画面の上メニューにある「MY WEBSITE」を開いてください。

ただし、/Applications/MAMP/htdocs直下の/hogeだとLravelのディレクトリ一覧しか表示されません。

f:id:idr_zz:20190502233513j:plain

初期設定ではさらにその下の/publicディレクトリを開いて初めてlaravelの「白い画面」が表示されます。

f:id:idr_zz:20190502233526j:plain

おお!麗しの白い画面!やっと逢えたね…

最後に

ということで、本の写経ではエラーが出たりしてかなり難航してしまいました。コマンドの意味がわかると対処法を調べる手がかりになりました。

今後も単なる写経ではなく、一つ一つのコマンドの意味を理解しながら進めていきたいと思います。

こちらの記事に書いているように、Herokuならオンライン上にCodePenばりに気軽にサーバサイドコンテンツを作っていけると思っていました。

※参考:ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!) - クモのようにコツコツと

しかし、実際にやってみると自分にはまだまだコマンドの知識やセキュリティ(パスワードの隠蔽など)の知識が不足していることがわかりました。

スムーズにいかない場合は、オンライン環境は後回しにして、ローカル環境で作ったものをスクショに撮ってで記事にする、という形で継続したく思います。それではまた!