Zenn
🚀

絶対に失敗しないLaravel+Vue.jsのアプリをHerokuにデプロイする方法〜画像付きで丁寧に説明〜

2021/04/03に公開
Heroku
Laravel
PHP
Vue.js
tech

概要

プライベートでLaravel+Vue.jsのSPAを開発し、Herokuにデプロイしたのでその時の手順を初学者でもなるべく躓かないようにご紹介します。

この通りやれば絶対成功すると...思います！！

※もしこの通りにやっても上手くいかなかったらぜひコメントをいただけますと幸いです🙇‍♂️

環境

※PCはMac（≠M1チップ）を想定しています。

$ composer -V
Composer version 1.10.20 2021-01-27 15:41:06

$ php artisan --version
Laravel Framework 6.20.16

$ npm -v
6.14.6

$npm list vue
`-- vue@2.6.12

事前準備

デプロイの前にいくつかやることがありますのでまずはその説明から。
先にまとめると以下の

  • Herokuにユーザー登録して使える状態にする
  • Herokuのアプリを新規作成する
  • デプロイ方法を選択する
  • Heroku CLIをダウンロード

Herokuにユーザー登録して使える状態にする

まずはHerokuへのユーザー登録からですね。
こちらからユーザー登録を行ってください。
よくわからないな、って方はググってみてください。

Herokuのアプリを新規作成する

ホーム画面？（ https://dashboard.heroku.com/apps ）の右上の「New」のプルダウンから「Create new app」をクリック。

お好きなアプリケーションの名前を入力し、「○○ is available」と表示されたのを確認して、「Create app」をクリック。

※Herokuのアプリ名は自分以外の全てのユーザーも含め、重複することができませんのでご注意ください。

デプロイ方法を選択する

アプリの作成が完了すると、この画面になっているかと思います。

「Deployment method」にアプリのデプロイ方法は3つあり、左から

  • Heroku CLI：ターミナルでコマンドをポチポチしてデプロイする
  • GitHub：herokuとGitHubを連携する
  • Container Registory：Dockerコンテナを使ってターミナルをポチポチする（これ、まだ使ったことがないです...）

という感じです。

今回は１番左の「Heroku CLI」を使ったデプロイ方法にします。
（デフォルトでHeroku CLIを使った方法が選択されているので特にすることはありません）

Heroku CLIをダウンロード

公式サイトに書いている通り、ターミナルで下記コマンドを打ってHeroku CLIをダウンロードします。

$ brew tap heroku/brew && brew install heroku

Laravel+Vue.jsアプリをHerokuにデプロイする方法

これも初めに手順をまとめておきます。

  • Herokuにログイン
  • ローカルリポジトリにHerokuアプリ用のリモートリポジトリを登録
  • DB（PostgreSQL）を用意する
  • 環境変数を設定する
  • Build Packを追加
  • Herokuデプロイ時のビルドコマンドの追加
  • Procfile追加
  • 本番環境でのHTTPS化
  • Herokuにデプロイ

※Herokuのダッシュボードにも手順が書いているのですが、これだけではデプロイできません😱

※なお、僕が実際にデプロイした作業順序ですので、絶対にこの手順で作業しないとデプロイできないことはないです。

Herokuにログイン

ターミナル（実行ディレクトリはどこでも良い）で以下コマンドを実行し念のため、Herokuにログインしておきます。

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

上記の「heroku: Press any key to open up the browser to login or q to exit:」が出るのでとりあえずエンターを押します。

するとブラウザで下の画面が開くので「Log in」を押すとログイン成功します。

ターミナルに戻ると、こんな表示になっているはずです。

$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/322b3666-2c0a-4a0f-ba52-fb611c129f05?requestor=（略）
Logging in... done
Logged in as ご自身のメールアドレス

ローカルリポジトリにHerokuアプリ用のリモートリポジトリを登録

デプロイするアプリのソースコードがあるディレクトリに移動します。
（Laravelならappとかconfigとかresourcesとかroutesとかがあるところ）

既にそのソースコードをGit管理している場合

$ heroku git:remote -a {アプリ名}

Git管理していない場合

$ git init
$ heroku git:remote -a {アプリ名}

これはHerokuのダッシュボードの「Deploy using Heroku Git」に書いている内容です。

DB（PostgreSQL）を用意する

Herokuでは基本的にDBを使う場合はデフォルトでPostgreSQLになります。

ダッシュボードの「Resources」タブに移動して、「Add-ons」の入力フォームに「postgre」と入力すると「Heroku Postgres」が出てきますのでクリックします。

このようなモーダルが出てくるのでそのまま「Submit Order Form」をクリック。

「Heroku Postgres」が追加されました。

MySQLを使う方法も調べたら出てきたので参考程度に載せておきます。
（難しい作業ではないですが、初学者の方は変に冒険せずPostgreSQLを使用することをオススメします）

環境変数を設定する

ダッシュボードの「Settings」タブに移動し、「Config Vars」の「Reveal Config Vars」をクリックします。

すると、このように環境変数が登録できる画面に変わるので必要な環境変数を追加していきます。
（KEYとVALUEにそれぞれ値を入力して「Add」をクリックすればOKです）

まずはDB（PostgreSQL）の環境変数から。

ターミナルに移動し、デプロイするアプリのディレクトリで以下のコマンドを実行するとPostgreSQLの設定が確認できます。

$ heroku config:get DATABASE_URL
postgres://{ユーザー名}:{パスワード}@{ホスト名}:5432/{データベース名}

これをもとにダッシュボードで環境変数を追加していきます。

KEY VALUE
DB_CONNECTION pgsql
DB_USERNAME {ユーザー名}
DB_PASSWORD {パスワード}
DB_HOST {ホスト名}
DB_PORT 5432
DB_DATABASE {データベース名}

次にLaravel側の環境変数を設定します。

KEY VALUE
APP_ENV production
APP_DEBUG false
APP_URL https://アプリ名.herokuapp.com/

APP_KEYはターミナルで以下のコマンドを実行して設定します。

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

これで環境変数の設定は完了です。

Build Packを追加

ダッシュボードのタブは「Settings」のままで、「Buildpacks」の「Add buildpacks」をクリックします。

このようなモーダルが出てくるので「php」と「node.js」をそれぞれ選択して「Save changes」をクリックして追加します。
（1回の追加で複数のBuild Packを追加できないので、2回に分けてください）

こうなればOKです。

Herokuデプロイ時のビルドコマンドの追加

package.jsonにHerokuデプロイ時用のビルドコマンドを追加します。

package.json
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "heroku-postbuild": "npm run prod"
    },

scriptsの最後に

"heroku-postbuild": "npm run prod"

しました。

Procfile追加

アプリケーションのルートディレクトリ（.envとかcomposer.jsonとかpackage.jsonとかと同階層）にProcfileというファイルを作成します。

以下のコードを記載します。

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

本番環境でのHTTPS化

それぞれのファイルにコードを追加します。

htaccess
<IfModule mod_rewrite.c>

    （略）
    
    RewriteCond %{HTTP:X-Forwarded-Proto} =http [OR]
    RewriteCond %{HTTP:X-Forwarded-Proto} =""
    RewriteCond %{HTTPS} !=on
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    
</IfModule>
app/Providers/AppServiceProvider.php
    public function boot()
    {
        if ($this->app->environment() == 'production') {
            URL::forceScheme('https');
        }
    }

Herokuにデプロイ

ターミナルで以下のコマンドを実行します。

$ git add .
$ git commit -am "Herokuデプロイ"
$ git push heroku master

※既にソースコードをGit管理している場合は、git add .は不要かもです。

$ git push heroku master
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 8 threads
Compressing objects: 100% (5/5), done.

（略）

remote: Verifying deploy... done.
To https://git.heroku.com/{アプリ名}.git
   645241e..7117cfc  main -> main

マイグレーション＆シーディング実行

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

$ heroku run php artisan migrate --seed
Running php artisan migrate --seed on ⬢ ken-gen... up, run.6533 (Free)
**************************************
*     Application In Production!     *
**************************************

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

> yes

「yes」と入力してエンターをクリック。

Database seeding completed successfully.

これで完了です。

デプロイしたアプリケーションを確認

で確認できます。

これでご自身がこれまでに開発されたアプリケーションのトップページが表示されたら見事デプロイ完了です！！

余談

$ heroku login

を実行した時に

 ›   Warning: heroku update available from 7.47.13 to 7.51.0.

と表示されたので、こちらでアップデートして解決しました。

$ heroku update
heroku: Updating CLI from 7.47.13 to 7.51.0... done
heroku: Updating CLI... done
Updating completions... done

参考

Discussion