Edited at

Laravel5.4 + Vuejsのアプリをherokuで公開する手順

More than 1 year has passed since last update.


heroku


概要


  • Paas

  • 料金についてはいろいろルールがありますが、趣味の範囲で公開するなら無料で利用できます。

  • ソースコードさえあればあとはherokuにおまかせで簡単に公開できます!💡

  • DBなどもアドオンで利用可能。


アカウント登録


  • 公式サイトから。

  • アドオンを利用する場合はクレカ登録が必要なのでしておきましょう。


herokuCLI


  • herokuの操作を全てコマンド実行可能。

  • 自動デプロイなどする場合に必要になってくるので今回はこっちで。


インストール


bash

brew install heroku/brew/heroku



Laravel


前提


  • Vuejsを利用したアプリケーション。

  • デプロイ前にwebpackでのコンパイルを行う。

  • 既にgit管理下であること。

  • DBのmigrationも利用。

  • ルートにcomposer.jsonが配置されていること。そうでないとPHPと認識してくれません!


herokuで動かすための準備


Procfile


  • このファイルでドキュメントルートの指定を行います。ルートにコミットする。

  • laravelはpublic配下を指定する必要があるので以下のように記述。


Procfile

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



nodejs


  • webpackでのコンパイルはnpmでなく、yarnで行いyarn.lockファイルをルートにコミットする。

  • デプロイ時にコンパイルを自動実行してもらうために、以下の記述をpackage.jsonに追加する。

  • postbuildに書いたスクリプトをnpm install完了後に実行してくれます。


package.json

  "scripts": {

"heroku-postbuild": "npm run production"
}


デプロイ


概要


  • heroku-gitのmasterに対してpushを行うとデプロイされます。

  • 開発はgithubで行い、デプロイ時はheroku-gitへpushするといったフローにする。

  • デプロイ後にcomposer、yarnなど一通り自動実行されるので、基本的にはpushしたら公開される状態になるはず。


手順


  • ログイン

heroku login


  • アプリケーション作成、ここで指定した名前がURLになります。

heroku create {アプリケーション名}


  • ビルドパックの指定、今回はPHPとnodejsを利用するので以下のコマンドを実行。

heroku buildpacks:set heroku/php

heroku buildpacks:add heroku/nodejs


  • 環境変数の設定、laravelで必要な設定

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


  • gitのリモートURLにherokuを追加する

heroku git:remote -a {アプリケーション名}


  • デプロイ実行!composer installyarnnpm run productionが実行されるはず!

git push heroku master


  • 確認、以下コマンドを実行するとブラウザで自分のアプリが開かれます。

heroku open


データベースの利用


mysqlの追加


  • 今回はmysqlのフリープランを追加していきます。

heroku addons:create cleardb:ignite

cleardb : mysqlアドオン名

ignite : プランを指定、igniteはフリープランです。


DB設定


  • 以下コマンドを実行するとDB接続に必要な情報が取得できます。

heroku config | grep CLEARDB_DATABASE_URL

CLEARDB_DATABASE_URL: mysql://{ユーザー名}:{パスワード}@{HOST}/{DB名}?reconnect=true


  • laravel用の環境変数に上記で取得した情報を設定する。

heroku config:set DB_HOST={HOST}

heroku config:set DB_DATABASE={DB名}
heroku config:set DB_USERNAME={ユーザー名}
heroku config:set DB_PASSWORD={パスワード}


マイグレーションを実行してみる



  • heroku run {コマンド}でheroku上でコマンドを実行できます。

  • 無事実行されれば完了!

heroku run php artisan migrate


その他


アクセスログを見たい


  • logsコマンド

heroku logs -t


デバッグしたい


  • .envでなくheroku config:setで環境変数を設定する。

heroku config:set APP_DEBUG=true


デプロイに失敗する!


  • ビルドパックを設定しなおしてみる

heroku buildpacks:set heroku/php


  • 必要なファイルの確認、以下ファイルがルートに存在しないとうまくいかない。

Procfile

package.json
composer.json
yarn.lock


まとめ

趣味アプリを無料公開するならお手軽なのでオススメです!