Laravel/Vueの練習アプリをHerokuに公開する

こんばんは！

個人練習のアプリをHerokuにデプロイする際の手順を備忘録として残しておきたいと思います

## 環境
- Laravel8/Vue3のアプリケーションをデプロイしたい
- Herokuのアカウント登録済み


## ① Herokuにログインして、アプリを作成する
まず、Herokuにログインし、「 Create New App 」に遷移します

↓下記の通り、Herokuで使用するアプリ名称を決めます。今回は「qiita-lecture-app」にしました
問題なければ、「Create app」をクリックしてください![スクリーンショット 2022-02-26 22.26.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/7ce6033b-af48-bccb-13b2-1f116529ee19.png)

## ② どうデプロイしていくのか、を設定する
クリックすると、「 Deploy 」という設定画面に遷移しているはずです
![スクリーンショット 2022-02-26 22.30.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/84e126e0-41b0-a1cc-569e-7059012387d1.png)

大方、「 Use Heroku CLI 」か「 Connect to Github 」を選択されると思います

「 Use Heroku CLI 」ですが、 ` $ git push heroku master`とターミナルを操作することでデプロイできます
「 Connect to Github 」は、「**連携したリポジトリの、どのブランチにマージされたか**」、を検知して、自動でデプロイができます

どちらでも良いですが、チュートリアルっぽく、「Connect to Github」でやってみたいと思います

## ②-1 Github連携
↓下記画像のように、まず接続するリポジトリを検索し、「Connect」をクリックしてください
![スクリーンショット 2022-02-26 22.43.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/9a0df55a-0992-f69c-1a39-ea50a312dcb7.png)

## ②-2 デプロイ設定
ここでは、自動デプロイの設定を紹介します

↓下記のように、このブランチにpushされた時、を検知して自動でデプロイを走らせることができます
![スクリーンショット 2022-02-26 22.47.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/3381196d-9642-2518-fd1d-a3d0cad5c597.png)

私は一旦masterを選択しております

## ②-3 Webからデプロイする時
この画面の下にもう一つ項目があります、これは「**このWebページからデプロイをしたい時**」に使用します
要は、Cliで`$ git push heroku master`を入力しなくても、クリック一つでデプロイできてしまう機能です

試しに、masterを選択した上で、「Deploy Branch」をクリックしてみます
![スクリーンショット 2022-02-26 22.53.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/0ea0aaac-fd17-b846-b390-6dd3b874553b.png)

↓デプロイに成功すると、下記の様な画面になります
![スクリーンショット 2022-02-26 22.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/b0305fcd-3e53-bedc-fc86-89b713390560.png)


## ③ アプリケーションの設定をしていきます
次は、デプロイするアプリの設定をGUIでしていきますので、Settingタブに移動してください
![スクリーンショット 2022-02-26 22.57.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/23bb661d-0dc5-6b23-70d1-2fcd4469e0c8.png)

## ③-1 Buildpacksの設定
今回はLaravel/Vueで作られたアプリケーションなので、PHPのビルドパックが必要なのですが、私にはもう一つ必要なものがあります

それは、「デプロイ対象がサブディレクトリにあるので、どれをデプロイするのか」を決めるビルドパックです
今回使用したのは、「[heroku-buildpack-monorepo](https://elements.heroku.com/buildpacks/lstoll/heroku-buildpack-monorepo)」です

では、下記の様に
`https://github.com/lstoll/heroku-buildpack-monorepo.git`
と打ち込んで追加しておきましょう
![スクリーンショット 2022-02-26 23.08.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/0a48b04a-90a8-1b5d-4416-9ac776565475.png)

アイコンが見えている**phpのビルドパックも選択しておいてください**

さて、このBuildpacksですが、**設定した順に上から読み込む仕様**になっていますので
１：heroku-buildpack-monorepo
２：heroku/php
となるように順番を入れ替える必要があります

![スクリーンショット 2022-02-26 23.12.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/3f9100a8-1a2e-e60e-0efe-85d653106032.png)

↑この順番になっていることを確認してから先に進みましょう！

## ④環境変数を設定する
こちらもwebページから設定できるので、一緒にやってしまいます

**まず、heroku-buildpack-monorepoで使用する環境変数**を忘れないように設定しておきましょう

↓下記のように`APP_BASE="デプロイ対象のディレクトリ名"`と入力してください
![スクリーンショット 2022-02-26 23.18.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1422262/5ac28cde-9a7a-d667-b9c7-f9b253d93209.png)

他にも、「APP_ENV」, 「APP_KEY」も設定しておきましょう！

## ⑤Procfileを用意する
次はアプリケーション側にファイルを用意します

まず、私のアプリケーションのディレクトリのイメージは以下の通りです
```tree
├── Dockerfile
├── Makefile
├── docker-compose.yml
├── install-composer.sh
└── web
    ├── Procfile
    ├── app
    └── composer.json

※邪魔になるものは排除しています
```
ポイントは、**「composer.json」とProcfileが同じ階層にいること**です

また、先ほど「heroku-buildpack-monorepo」で `APP_BASE="web"`と指定しましたが、
まさに「webディレクトリ以下をデプロイしてね」という指示になっています

では、Procfileの中に下記を記述しましょう

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


これでデプロイができる様になると思います
余裕がある人は、Cliでの設定もしておくと楽なこともあると思いますので、下記を参考に進めてみてください！
（今回は以上ですが、そのうちHerokuでのDB設定についても書く予定です）


## 参考文献
https://qiita.com/ktanoooo/items/6fd4fc6617953fdbc7db

https://tech.innovator.jp.net/entry/2018/10/22/131853

https://qiita.com/tkt989/items/97ea235dac807d46d72e