【初めてのデプロイ】Laravel×Herokuデプロイ（MySQL） +  Cloudinary

# はじめに

初めてLaravelでMySQLを使用したアプリをデプロイしてみたい方に向けた記事です。
この記事は既にLaravelアプリを作成済みである状態から説明します。
Herokuコマンドが使用できる状態であることを前提に進めていく。
**なるべくHerokuコマンドを使用しないで操作していきます**

# Laravelアプリフォルダ直下にてProcfileを作成する
## Procfileとは
ProcfileはHerokuアプリの起動時に実行するプロセスを定義するためのファイルです。

## Procfileファイルの作成
コマンド操作により、アプリ直下に移動したのち、下記のコマンドを実行する

```
touch Procfile
```

上記コマンドを実行後、Laravelアプリ直下にProcfileが作成されていることを確認する。

<img width="279" alt="スクリーンショット 2020-07-27 午後8.54.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/0fa8c7fb-db72-3045-cc5a-d037751ef81b.png">

## Procfileファイルの編集
Procfileには、何もコードが記載されていない状態である。
ここに下記のコードを記載する。

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

# varchar型の文字数を191に制限
## app\Providers\AppServiceProvider.phpを編集する
```
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema; //この一行を追加

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(191);　// この一行を追加
    }
}
```
上記のコードで変更箇所は二箇所である。
変更と言っても2行追加したのみで、他は何も変更は要らない。
この記載が必要になる理由は、本番環境のDBを用意する際、つまりherokuでマイグレーションを実行する際にエラーが出るのを防ぐためである。

# Githubに変更を保存しよう
この記事でGitについては詳しく解説はしない。
Githubにデータの変更を全て反映させておきましょう。

```
add
commit
push
```

# Herokuでの作業
## サインアップ

[こちら](https://jp.heroku.com/)をクリックしてherokuへの会員登録を行いましょう。

## ログイン後~Heroku上でアプリの作成

### Step1 アプリ作成①
ログインすると下記のような画面に遷移できるので、【New】ボタンから【Create new app】を選択しましょう。
![スクリーンショット 2020-07-27 午後9.16.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/f5cc5fb2-503c-cf79-68e4-d2eec608caa0.png)


### Step2 アプリ作成②
【App name】に任意の名前を入力し、【Create app】を選択します。
【choose a region】は特に変更しなくても構いません。
![スクリーンショット 2020-07-27 午後9.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/66160912-98bb-38b9-2808-92d2245b7da3.png)

## Herokuアプリの設定

### Step1 ClearDB MySQLの追加
初めて挑戦している方のために、写真を多用しております。
なお、Herokuに今回初めて、サインアップしてこの作業に挑んでいる方は、先にクレジットカードをHerokuに登録しておく必要があります。
登録しておかないと、ClearDB MySQLの追加ができません。
**ログイン後、下記の画像にあるアイコン（画面右上）をクリックし、クレジットの登録を行いましょう。**

![スクリーンショット 2020-07-27 午後9.43.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/b2f47b98-4c42-22ee-5bd7-11c0cdd5f8c2.png)


#### 手順①  
先程【Create new app】から作成したアプリをheroku上でクリックすると下記の画像のように、【Overview~Setting】のタブが開けるページへと遷移できる。
【Resources】タブをクリックすると、下記と同じ画面になることが確認できると思います。
【Find more add ons】をクリックします。
![スクリーンショット 2020-07-27 午後9.25.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/d81b216c-1cde-e714-46d9-0f5bb3ed4621.png)

#### 手順②
下記のページへと遷移されるので、【ClearDB MySQL】を探します。
![スクリーンショット 2020-07-27 午後9.25.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/85d00f82-ea47-57ee-3610-acae70c14fb2.png)

#### 手順③
手順②で探しだした下記をクリックします。
![スクリーンショット 2020-07-27 午後9.26.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/7abac628-92c4-2726-52fa-500d7646710a.png)

#### 手順④
【Install ClearDB MySQL】をクリックします。
その後、手順①のページへと戻りましょう。
![スクリーンショット 2020-07-27 午後9.26.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/1df2c9f6-d71d-7e1a-4d85-4168327a3436.png)

#### 手順⑤
手順①ではなかったClearDB MySQLが追加できたのが確認できます。
![スクリーンショット 2020-07-27 午後9.38.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/60de8eac-f948-089f-a2c3-9b05742a5407.png)

#### 手順①〜⑤はコマンドでも操作できます
```
heroku addons:add cleardb
```

### Step2 DB情報を確認し、Configにセットする

#### 手順① 【Settings】タブをクリックし、【Reveal Config Vars】をクリックする

![スクリーンショット 2020-07-27 午後9.49.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/c679eee8-e522-703e-24f4-d76d54e06602.png)

#### 手順② Valueにあたる部分、下記図で言うとmysql以下をメモ帳にメモする
![スクリーンショット 2020-07-27 午後9.49.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/0d60faca-a688-76af-77cb-c9c06e2b4acd.png)

#### 手順③ Reveal Config Varsにkeyとvalueを追加する
メモ帳にメモしたものを参照しながら入力していく。
手順②でメモした値は下記の情報となっています。

```
CLEARDB_DATABASE_URL: mysql://[ユーザー名]:[パスワード]@[ホスト名]/[データベース名]?reconnect=true

```
上記、[ユーザー名][パスワード][ホスト名][データベース名]の他、デプロイする際には下記の情報も追加で、Reveal Config Varsに入力するとよいでしょう。


```
// Reveal Config Varsに入力しておくもの（データベース情報をもとに入力）
DB_DATABASE = データベース名
DB_HOST = ホスト名
DB_PASSWORD = パスワード
DB_USERNAME = ユーザー名

// 追加でいれておくもの
DB_CONNECTION = mysql
APP_ENV = heroku
APP_KEY = ここはローカルのenv.ファイルにあるAPP_KEYの値を入れる（php artisan key:generateで生成される）
APP_NAME = 任意の名前
LANG = ja_JP.UTF-8
TZ = Asia/Tokyo

```

#### 手順②はコマンドでも操作できます
```
heroku config | grep CLEARDB_DATABASE_URL
```
#### 手順③はコマンドでも操作できます（下記コマンドは1行ずつ実行します）

```
 heroku config:set DB_DATABASE= データベース名
 heroku config:set DB_HOST= ホスト名
 heroku config:set DB_USERNAME= ユーザー名
 heroku config:set DB_PASSWORD= パスワード
 heroku config:set APP_KEY=$(php artisan key:generate --show)
 heroku config:set APP_ENV=heroku
 heroku config:set LANG=ja_JP.UTF-8
 heroku config:set TZ=Asia/Tokyo

```

### Step3 GithubとHerokuの連携
#### 手順① 【Deploy】をクリックし、画面中央の【Github】から該当のリポジトリを選択、最後にDeploy Branchをクリックします
![スクリーンショット 2020-07-27 午後10.20.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/e5054b45-bed8-3516-a234-8eedfd637d98.png)

#### 連携コマンド操作
```
heroku git:remote -a herokuアプリ名;
```

#### 手順①はコマンドでも操作できます
```
git push heroku master
```

# マイグレーションの実行
```
heroku run php artisan migrate
```

**Heroku上でGithubとHerokuを連携したあとに、マイグレーションを実行します**
**この際にエラーがでてしまうのは、GitとHerokuの連携がうまく行われていないことがおおいです。**
**その場合は、上記`連携コマンド操作`と`git push heroku master`をコマンドで実行しましょう。**


# Webサイトを確認
Open app をクリックします
ここまででLaravelアプリ（MySQL使用）のデプロイは完了です
![スクリーンショット 2020-07-27 午後10.28.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/f7ed5256-1848-59fc-73fa-b9dbcd696d80.png)

#### コマンドでも操作できます
```
heroku open
```

# CloudinaryとHerokuの連携
既にLaravelアプリを作成済みで、Cloudinaryを使用して写真を保存するなどの処理を書いていることを前提に進めますが、この記事を見てくださっている方の中には、Herokuにデプロイしたものの、これからCloudinaryと連携したアプリを作成しようと考えている方もいると思い、簡単にCloudinaryについて紹介します。

## Cloudinaryとは
画像を管理するクラウドサービスで、画像の保存、変換、配信がとても簡単できます。
[こちら](https://cloudinary.com/)をクリックし、アカウントを開設してみましょう。
 
## Cloudinaryを使用する目的
本番環境からでもCloudinaryに写真を保存できるように設定し、HerokuからCloudinaryに保存してある写真をとりだせるようにするため。

## Cloudinaryへログイン（ここから作業です）
Dashboardを開き、下記の３つをメモする。
Revealをクリックすると値がきちんと表示されます。

```
Cloud name:
API Key:
API Secret:
```

![スクリーンショット 2020-07-27 午後10.47.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/e44822f4-e47a-3501-40fa-730bea4c24fc.png)

## Configにセットする

Herokuに戻り、【Setting】タブをクリック、Reveal Config Varsをクリックし、下記のようにkeyとvalueをセットする

```
CLOUDINARY_API_KEY = 上記でメモしたAPI Keyの値
CLOUDINARY_API_SECRET = 上記でメモしたAPI Secretの値
CLOUDINARY_CLOUD_NAME = 上記でメモしたCloud nameの値
```

### コマンドでも操作できます

```
 heroku config:set CLOUDINARY_API_KEY = 上記でメモしたAPI Keyの値
 heroku config:set CLOUDINARY_API_SECRET = 上記でメモしたAPI Secretの値
 heroku config:set CLOUDINARY_CLOUD_NAME = 上記でメモしたCloud nameの値
```

ここまでの【Reveal Config Vars】は下記のようにセットしてあります

![スクリーンショット 2020-07-27 午後11.14.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/8a56b026-21e8-b218-8c55-6b846724b09d.png)

## Herokuでアプリを開き挙動を確認しましょう

写真投稿アプリを作成している場合、本番環境でも写真を投稿したら、Cloudinaryに写真が保存できていることが確認できるかと思います。

#おまけ

## GUIツールを使用して本番環境のDBを可視化しよう
- macユーザー
  - [Sequel pro](https://www.sequelpro.com/)をダウンロード
- windowsユーザー
  - [Table Plus](https://tableplus.com/)をダウンロード

### Sequel pro使用方法
Table plusもやることは同じです。
適宜読み替えてトライしてください。

#### ダウンロードしたSequel proを立ち上げます

下記の図のように画面が表示されます。

![スクリーンショット 2020-07-27 午後11.26.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485253/89610f38-3000-22fe-5365-803294758d71.png)

- ホスト(hostname)
- ユーザー名(username)
- パスワード(password)
- データベース(dbname)

これらの項目にCLEARDB_DATABASE_URLのそれぞれの値を入力しましょう

```
CLEARDB_DATABASE_URL: mysql://[ユーザー名]:[パスワード]@[ホスト名]/[データベース名]?reconnect=true
```

入力後、接続テストを行い、問題なければ【お気に入りに追加】を押した後に、接続を押しましょう

本番環境のデータが可視化できることを確認します。

# まとめ
Laravelではデータベースとの接続情報は、.envに記載されています。
つまりGithubにデータベースとの接続情報はアップロードされません。
そのため、本番環境用にデータベースとの接続情報を記載してやる何かが必要です。
それが今回でいうConfigです。
コマンドでも操作できますが、今回はherokuのwebサイト上から操作してみました。
もう一つ大事なことはherokuではClearDB MySQLを使用できるということです。
注意点として.envに記載のDB情報をconfigの中に書かないことをあげておきます。 
configにセットするDB情報は、本番環境用のDB情報です。
つまり今回でいうとClearDB MySQLの情報ということになります。