はじめに
Laravelでローカル開発からHerokuデプロイまでWebアプリを作成する流れをご紹介します。
いろんな方の記事を拝見させていただきながら環境を構築していきましたので、
その参考を記事のリンクを入れながら、手順を書かせていただきます。
こんな方におすすめ
・Laravel(Vueはどちらでも)を用いてローカルでは一通り基本やチュートリアルなど終わらせた方
・Webへのデプロイに悩んでいる方
・私のようにプログラミング歴2年未満の初学者やデザイナー属性の方
準備
・Mac Mohave（Hisierraでも可）
※Windows環境ではテストしてません(持ってない)
・node.js(npm) ※yarn不使用
・Laravel5.5
・仮想環境
- VirtualBox バージョン5.2.28
※最新版の6.0.6だとVagrant upでエラーになる（安易なバージョンアップは大変危険です！）
※一度VirtualBoxをアンインストールして再度このバージョンをインストールしてなんとか復旧できた苦い思い出 - Vagrant バージョン2.2.4（VirtualBoxを操作するためのコマンド）
- Homestead（Laravelを仮想サーバーに入れるための箱）
- Xcode（Mac限定 gitコマンドを使用するため）
・Web環境 - Heroku
公式HP
https://jp.heroku.com/
※アカウントを作成しておいてください
ローカル環境立ち上げ
【Laravel 5.5 or latest】Homestead で mac に Laravel 開発環境を構築
https://qiita.com/7968/items/68b3566d92d2b007038e
※Step1〜Step2、Step5は初回のみ
Vue.js動作確認
LaravelからVue.jsを使う最短レシピ
https://qiita.com/fruitriin/items/e0f2c9aa035c3ff2c874
※この記事ではVue router不使用なので、説明されていません。
もし仕込んでおきたい場合は
$ npm install --save-dev vue-routerで追加してください。
この記事までおこない、動作確認したら準備完了です。
もう仮想サーバーは切っておいても大丈夫です。
Herokuデプロイ
今ローカル環境のルート（Homestead）にいると思いますので、
Laravelのルート(code)にターミナルで移動しておいてください。
Laravel5.4 + Vuejsのアプリをherokuで公開する手順
https://qiita.com/naoki0531/items/c4de80efd35199682ac3
基本はこの記事の流れに沿って進めれば問題はないですが、
一部補足しておきます。
補足
・nodejsセクションで「webpackでのコンパイルはnpmでなく、yarnで行いyarn.lockファイルをルートにコミットする。」とありますが、npmで行う場合、必要ありませんでした。
むしろ、このデータがあるとうまくデプロイされませんでした。この辺はまだ調査不足です。
・ローカル側でrunさせて動作確認するのならわざわざheroku側でrunさせる必要はないので、追加しなくていい。むしろ追加することでnpmエラーでハマりました。
"scripts": {
"heroku-postbuild": "npm run production"
}
・手順セクションの部分、この記事通りに打つとエラーで返されました。
うまくいったコマンドを下記に書きますので手順セクション部分はこちらを参照してください。
Herokuログイン
$ heroku login
Herokuアプリ追加
$ heroku create {アプリケーション名}
※アプリケーション名を入れなければ自動で付けられます（後でも変更可能）
buildpack入れる
$ heroku buildpacks:set heroku/php -a {アプリケーション名}
$ heroku buildpacks:add heroku/nodejs -a {アプリケーション名}
Heroku APIキー生成
$ heroku config:set APP_KEY=$(php artisan key:generate --show) -a {アプリケーション名}
Gitリポジトリを作成
$ git init
リモートリポジトリに登録
$ heroku git:remote -a {アプリケーション名}
ファイルを追加
$ git add .
ファイルをコミット
$ git commit -m "コメントを入れる"
ファイルを更新
$ git push heroku master
Herokuアプリ描画
$ heroku open
[参考]Herokuアプリケーションを確認するコマンド
$ heroku list
PostgreSQLを設定
$ heroku addons:create heroku-postgresql:hobby-dev
$ heroku config:get DATABASE_URL
# メモしよう
postgres://<ユーザ名>:<パスワード>@<ホスト>:5432/<DB名>
$ heroku config:set DB_CONNECTION=pgsql
$ heroku config:set DB_HOST=<ホスト>
$ heroku config:set DB_DATABASE=<DB名>
$ heroku config:set DB_USERNAME=<ユーザ名>
$ heroku config:set DB_PASSWORD=<パスワード>
$ heroku run php artisan migrate
Do you really wish to run this command? (yes/no) [no]:
> y
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated: 2014_10_12_100000_create_password_resets_table
# (マイグレーションをやり直したい場合)
> heroku run php artisan migrate:refresh --seed
参考記事まとめ
中にも書いてありますが、参考にさせていただいた記事をまとめておきます
・【Laravel 5.5 or latest】Homestead で mac に Laravel 開発環境を構築
https://qiita.com/7968/items/68b3566d92d2b007038e
・LaravelからVue.jsを使う最短レシピ
https://qiita.com/fruitriin/items/e0f2c9aa035c3ff2c874
・Laravel5.4 + Vuejsのアプリをherokuで公開する手順
https://qiita.com/naoki0531/items/c4de80efd35199682ac3
・Laravelをherokuにデプロイする(データベースはPostgreSQL)
https://qiita.com/tamappe/items/14a4e6890ecef4d49d1f
・Heroku コマンド・設定 メモメモ
https://qiita.com/pugiemonn/items/0e69b7a29a384b356e65
・Herokuでのアプリ作成・削除
https://qiita.com/TakahitoNakashima/items/68b067526af8c5c39a82
・【Git】基本コマンド
https://qiita.com/konweb/items/621722f67fdd8f86a017
・HerokuのPostgreSQLにログインしてSQLを直接実行する。
https://qiita.com/ucan-lab/items/fb74af3d78e71407db7b
あとがき
この手順おこなっていただければ最低限のWebアプリ開発の下準備はできるはずです。
ただなに分プログラミングを始めて1年半くらいの新参者なので、
もしここ抜けてるよなどご指摘がありましたら、教えていただけると幸いです。