クモのようにコツコツと

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

トップ > PHP > LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと

LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと

PHP Laravel Heroku MAMP

Laravelシリーズ、前回はLarvelのファイル構成を確認し、Hello worldしました。今回はローカルのMAMP環境に作ったLaravelをHerokuにデプロイします。それでは、行ってみまSHOW♪

【目次】

※参考：Laravelの/publicをルートに変更しHello worldする - クモのようにコツコツと

LaravelをGtiHub経由でHerokuにデプロイできませんっっ！

MAMP環境からHerokuへデプロイは以前、この記事で成功している。

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

このような手順で行った。

  • GitHubにリポジトリ作成
  • GitHub→ Sourcetreeにリポジトリをクローン
  • MAMP環境でPHPファイル作成
  • MAMP→Sourcetreeにコミット
  • Sourcetree→GitHubにプッシュ
  • GitHub→Herokuにデプロイ

このときはいかに黒い画面（コマンド）を使わずにGUIのみでいけるかを追求していた。この方法をとれば、サーバサイド版のCodePenをHerokuでやっていけると思っていた。ところが、同じ手順でLaravelコンテンツをHerokuにデプロイしてみても、画面が表示されない（汗）

MAMP環境では表示されているLaravelの「白い画面」が… f:id:idr_zz:20190506211100j:plain

Herokuではこんなです。。 f:id:idr_zz:20190516200614j:plain

調べると、こちらの記事にヒントがありました！

※参考：Laravel を Heroku にデプロイする方法｜Koushi Kagawa｜note

この記事によると、先ほど現れた「Heroku | Welcome to your new app!」という画面はHerokuのデフォルト画面のようです。

そしてLaravelを動かすには「APP_KEY」の設定が必要とのこと。

次にAPP_KEY の設定を行います。下記実行します。APP_KEYはセキュリティ等の機能で暗号化に利用される設定項目です。 （APP_KEYがないと Laravel は動かないようです。）

こちらの記事はGUIを使わずにコマンドだけで行う方法。うーむ、コマンドは不慣れだがトライしてみよう。迷わずいけよ、いけばわかるさ！

Herokuの新規アプリ作成

Homebrewインストール

記事の最初にあるコマンド

$ brew install heroku/brew/heroku

自分の環境ではまずここからエラーになる。ここでめげずに頑張る。こういうときはコマンドの意味を調べる。

brew hogeはHomebrewをインストールすると使えるようになるコマンド。そもそもHomebrewとは何者か。

「Mac OS Xオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである」
実行ファイルや設定ファイル、ライブラリetcを一つのファイルとしてまとめているものをパッケージと呼びます。
パッケージ管理システムとはこのパッケージのインストール（アンインストール）作業を一元的管理するものです。パッケージやライブラリの依存関係などが管理できます。

※参考：homebrewとは何者か。仕組みについて調べてみた - Qiita

なるほど。

さらに調べるとHomebrewをインストールするにはXcodeのインストールが必要であるとか。Xcodeとは何者か？

Xcode（エックスコード）とは、Apple社が開発・リリースしているソフトウェアです。

ファイルの管理からコンパイル、ビルド、実機検証、デバッグまで。アプリ開発の一連の流れをサポートしているため、統合開発環境（IDE）とも呼ばれています。

※参考：初心者必見！Xcodeとは？をわかりやすく解説！ | CodeCampus

ふむ。こういうわからない単語数珠つなぎ状態はを繰り返すと本来の目的を忘れてしまうw

ただ、もう少し調べたところ朗報！Xcodeのインストールはしなくても大丈夫なようです♪

XcodeにはCommand Line Tools for Xcodeと同じものがアプリケーション内に入っている。

Command Line Toolsがインストールされていない場合は、以下のように、Homebrewのインストール中にCommand Line Toolsが自動でダウンロードされ、インストールされました。

※参考：【Homebrew】Command Line Toolsのインストールについて | Sutepulu

Xcodeと同じ「Command Line Tools for Xcode」というものがあり、Homebrewインストール時にそれがインストールされていない場合は一緒にインストールしてくれると。

ということでHomebrewをいきなりインストールしてみる。

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

しばらく処理が続いて、成功！

Heroku CLIインストール

ようやく準備完了。Heroku CLIをインストール。Heroku CLIとは何者か？

Heroku開発では、Salesforce開発とは異なりGitベースの開発フローとなります。 その中で欠かせないのがコマンドラインツールの「Heroku CLI」です。

※参考：Heroku開発におけるHeroku CLI - TECH BLOG | 株式会社テラスカイ

なるほど。では、早速いきましょう。最初にエラーになったコマンドを実行。

$ brew install heroku/brew/heroku

おお、こんどはインストール成功！

Herokuの新規アプリ作成

また記事の手順に従って。次はHerokuの新規アプリを作る。こちらはHerokuの管理画面でもできるんだが、せっかくなのでコマンドでやってみる！

まずHerokuにログイン

$ heroku login

このheroku hogeのコマンドが先ほど入れたHeroku CLIによって使えるようになったHerokuのコマンドってわけか。

実行すると「なにかボタン（q以外）を押して」と言われる

heroku: Press any key to open up the browser to login or q to exit:

エンターを押すとブラウザでログイン画面が出る。ログインすると

Logging in... done
Logged in as メアド

ログインできましたよ、と言われる。

次にAppの作成

$ heroku create

アプリが作れましたよ、と。

Creating app... done, ⬢ vast-meadow-11880
https://アプリ名.herokuapp.com/ | https://git.heroku.com/アプリ名.git

この六角形⬢が珍しいなと感じた。

Herokuの管理画面を見るとアプリが増えている。ページを表示すると「Heroku | Welcome to your new app!」画面。

f:id:idr_zz:20190516200614j:plain

GitHubからデプロイしたときの状態に追いついた！

データベース設定

データベース（PostgreSQL）のアドオンを追加

次にデータベースを追加する。HerokuのDBは標準ではMySQLではなくPostgreSQL。

※参考：PostgreSQLとMySQL、使うならどっち？ データベース専門家が8つの視点で徹底比較！ - エンジニアHub｜若手Webエンジニアのキャリアを考える！

またこちらの記事の手順にて。

※参考：Laravel を Heroku にデプロイする方法｜Koushi Kagawa｜note

  • Herokuの管理画面にログイン
  • メニュータブより「Resources」をクリック
  • 「Add-ons」の検索ボックスで「Heroku Postgres」表示→選択
  • 「Hobby Dev - Free」が選択されていることを確認し「Provision」を押して追加

「Heroku Postgres」とうアドオンが追加される。

データベースを設定する

ここから慎重な作業。参考記事にあるようにこのようなコードが表示される。

postgres://aaabbb:cccddd@ec2-abc-def-ghi.compute-1.amazonaws.com:5432/xyz123

ここにあるデータベース名、データベースユーザ名、パスワード等を抜き出して、heroku config:setコマンドで設定する。

※2019/05/30追記：このコマンドheroku config:setは秘匿情報を変数に置き換える「環境変数」でした！

※参考：Herokuで環境変数を設定する方法 - Qiita

この行はPostgreSQLに繋ぎますよ、という意味

$ heroku config:set DB_CONNECTION=pgsql

※ここで注意！参考記事の下の方にありますが、Herokuで複数のアプリを作っている場合は、heroku hogeコマンドのあとに--app アプリ名をつける必要があります！

$ heroku hoge --app アプリ名

自分はHerouで複数のアプリを作っているため、これを追記しています。（そうしないとうまく動かなかった）

この行はホスト名。@マークの後ろ。

$ heroku config:set DB_HOST=ec2-abc-def-ghi.compute-1.amazonaws.com

この行はデーベース名

$ heroku config:set DB_DATABASE=xyz123

この行はユーザー名。:の前

$ heroku config:set DB_USERNAME=aaabbb

この行はパスワード。:の後ろ

$ heroku config:set DB_PASSWORD=cccddd

緊張するなー。。

※参考：Laravel を Heroku にデプロイする方法｜Koushi Kagawa｜note

MAMPからHerokuにデプロイ

いよいよデプロイ！

viコマンドで設定ファイルProcfileを作成

まず、cdコマンドでアプリケーションフォルダのMAMPの中にあるアプリのパスに移動する。

$ cd /Applications/MAMP/htdocs/アプリ名

ここでviコマンドを実行する。 ん？viコマンドってなんだっけ？

viはLinuxの標準のテキストエディタを起動するコマンドだ。

そうだった、ターミナルの中で開けるテキストエディタだった。

※参考：viコマンドについて詳しくまとめました 【Linuxコマンド集】

$ vi ./Procfile

ディレクトリの第一階層Procfileというファイルが作られる。

中にこちらを書いて保存する

web: vendor/bin/heroku-php-apache2 public/

なお、自分はviエディタで編集中に「recording」という文字が消せなくなって慌てた。こちら記事のおかげで助かりました！

※参考：viエディタでrecordingの文字が出てきたときの終了方法 | よの冒険記

Viエディタの保存、終了はこちら。

:wq

gitコマンドでHerokuにデプロイ

次にgitコマンドでHerokuにデプロイする。

git init
heroku git:remote -a アプリ名
git add .
git commit -m "first commit"
git push heroku master

GUI（SourceTree）を使わずにGitを使うの初めて。gitコマンドの意味はこちらが参考になりました。

※参考：Gitコマンド早見表 - Qiita

APP_KEY の設定

さあここから！最初に書いたAPP_KEYの設定。Laravelを動かすのに必要という。で、APP_KEYとは何者か？

次にAPP_KEY の設定を行います。下記実行します。APP_KEYはセキュリティ等の機能で暗号化に利用される設定項目です。 （APP_KEYがないと Laravel は動かないようです。）

※参考：Laravel を Heroku にデプロイする方法｜Koushi Kagawa｜note

「セキュリティ等の機能で暗号化に利用」と。うむ、これはやった方がいいですね。

$ heroku config:set APP_KEY=$(php artisan --no-ansi key:generate --show)

このまま叩けばいいみたい。データベース設定のときと同じくheroku config:setです。

データベースのマイグレーション

最後の手順、データベースのマイグレーション！マイグレーションってなんだったっけ？

データベース移行
データベースを別物に移行する場合や同ソフトでバージョンアップする場合のデータ移行のことです。子の場合、フォーマットが変わりますので変換する必要があります。近年では、アプリケーション側がデータベースについての知識を持たない形式で記述してあることが多いため、マイグレーションでも機能確認のテストを行うだけでよい場合もあります。

※参考：https://furien.jp/columns/72/

データベースの移行か。heroku runというコマンドです。

$ heroku run "php artisan migrate"

APP_KEYのときも出てきたけどartisanとは「職人」という意味のようだ。php職人？

Artisan とは Laravel 専用のコマンドです。
アーティザンと読み、『職人』という意味だそうです。
Artisan コマンドを実行すると Laravel のコントローラやモデルのひな形の作成、マイグレーションの実行など行えます。

※参考：Artisanコマンド（早見表） - Laravel学習帳

ほうほう、さすが職人。

実行するとこんなこと聞かれる。

Do you really wish to run this command? (yes/no) [no]:

あんた、ほんとにこのコマンドを実行しちゃうんですか？イエース！！

yes

実行後、アプリのページをプレビューする。管理画面でなくこのコマンドでも開ける。

heroku open

オープン！

f:id:idr_zz:20190506211100j:plain やた！ついにHerokuでLaravelをデプロイできった〜〜！！

うれしすぎてツイートしてたw

※参考：https://vast-meadow-11880.herokuapp.com

おまけ：更新内容のプッシュ

参考記事の最後にある更新内容のプッシュ

トップページに表示される内容が書かれている/resources/views/welcome.blade.php。このファイルの一部を書き換えてみる。

<!--変更前-->
<p>こんにちは、ららべる♪</p>

<!--変更後-->
<p>こんにちは、へろく♪</p>

コマンドで更新のデプロイを実行する。

もしターミナルを一回閉じている場合はcdコマンドで再度MAMPのディレクトリに移動。

$ cd /Applications/MAMP/htdocs/アプリ名

そこでgitコマンドを実行。

git add .
git commit -m "テキスト修正"
git push heroku master

git commit -m "テキスト修正"が変更した内容のテキスト。

アプリのページをリロードすると…（ドキドキ） f:id:idr_zz:20190516220205j:plain やった！「こんにちは、へろく♪」に打ち変わった！完成したページはこちら！

※参考：https://vast-meadow-11880.herokuapp.com/

最後に

ようやくLaravelをHerokuにデプロイできました〜♪ 重要な手順はAPP_KEYの設定でしたが、それ以外にもコマンドの前提知識が足りない部分などを調べることができたのは良かった。特にSourceTreeもGitHubも使わず、コマンドだけでGitを初体験ができました！今後もだんだんとコマンドになれていきたく思います。 黒い画面…こわくない、こわくない…ほらね、こわくない（ナウシカ）。

最後に今回の手順の主軸となったこちら記事には感謝です。とても丁寧な解説でわかりやすかったです！

※参考：Laravel を Heroku にデプロイする方法｜Koushi Kagawa｜note

それではまた！