24
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

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

まとめ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
24
Help us understand the problem. What are the problem?