PHP＋MySQLで作成したアプリをHerokuでデプロイする手順(workbenchの設定まで)



##概要
初心者がPHPで作成したwebアプリをHerokuでデプロイするまでの過程をまとめてみました。

##環境
　【言語】: HTML、CSS（レスポンジブ未対応）、PHP 7.3.9、JavaScript、jQuery2.2.2
　【DBMS】: MySQL 5.7.26
　【フレームワーク】: なし
　【開発環境】: MacOS Catalina 10.15.5
　【バージョン管理】: Git 2.24.3
　【本番環境】: Heroku

##大まかな流れ
###1.Gitと連携
###2.Heroku操作
###3.DB情報の移行（workbench操作）
###4.ライブラリの追加
###5.Herokuへpush


#1.Gitと連携
※既にGithubにリポジトリを作成している場合はの過程はスキップ

①新規リモートリポジトリを作成

②デプロイするディレクトリに移動し、ローカルリポジトリの作成↓

```
$ git init
```

③add~push↓

```
$ git add.
$ git commit -m 'commit'
$ git push origin master
```

#2.Heroku操作
①Herokuにログイン↓（Herokuのインストールの説明は省略）

```
＄heroku login
```

②Heroku上に新しくアプリケーションを作成↓

```
$ heroku create　つけたいアプリ名
 Warning: heroku update available from 7.35.0 to 7.44.0.
Creating ⬢ つけたいアプリ名... done
https://munakatatest8.herokuapp.com/ | https://git.heroku.com/munakatatest8.git

```

③HerokuのアプリケーションにClearDBを追加↓（igniteは無料です）

```
$ heroku addons:create cleardb:ignite
Creating cleardb:ignite on ⬢ つけたいアプリ名... free
Created cleardb-rectangular-89660 as CLEARDB_PUCE_URL
Use heroku addons:docs cleardb to view documentation
```


④データベース情報の確認↓（後々この情報を使用します）

```
$ heroku config | grep CLEARDB_DATABASE_URL
 
CLEARDB_DATABASE_URL: mysql://＊＊＊＊＊＊:＊＊＊＊＊＊@us-cdbr-east-02.cleardb.com/heroku_dff14ec3ad68e70?reconnect=true
//↓下記のデータが入ってる認識
CLEARDB_DATABASE_URL: mysql://ユーザー名:パスワード@ホスト名/データベース名?reconnect=true
```


##3.DB情報の移行（workbench操作）
①Workbenchのインストール
MySQL Workbenchの公式ページに飛んで、「ダウンロードはこちら」をクリック。

②インストールが完了したら、phpmyadmin から使用したいDBをエクスポート↓
![スクリーンショット 2020-10-05 20.03.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/732b5e51-0f86-1c68-2677-2b2251c1a16d.png)

③workbenchを起動し、Connectionを新規作成↓
2-④で取得したCLEARDBのユーザー名、ホスト名、データベース名、パスワードを打ち込む
![スクリーンショット 2020-10-05 20.17.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/672881fa-14e3-0c51-ab67-672b6d367ddb.png)



『Test Connection』を実行したところ謎のwarningが表示されたが、無視して続行。↓

![スクリーンショット 2020-10-05 20.16.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/7feb407b-c014-ba4b-f972-fb24c479bfae.png)

パスワードを再度打ち込み→any continueと進み
『MySQL接続が正常に確立されました』との表示がでたため、↓
![スクリーンショット 2020-10-05 20.23.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/091a5607-3e21-3841-7ff2-e174c4bbc2ff.png)


戻って立ち上げたconectionをクリック
④DB情報をインポート
Data Import/Restoreをクリックしインポート画面へ。


エクスポートした、DB情報ファイルを入力、
![スクリーンショット 2020-10-17 13.04.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/170546f6-fea8-8806-59d3-2438f7f84e4f.png)

【記入箇所】
・Import from Self-Contained→Fileを選び、エクスポートした「〇〇〇〇.sql」を記入。

・Default Target Schema→Newではなくデフォルトで表示されるデータベース名を選択。

・Start Importを押してインポート。

Import Completedと表示されレバ、インポートが完了し、Workbenchのデータベース設定も無事終了。

⑤エラー例
私がDB情報のインポートの際実際に直面したエラーです。
![スクリーンショット 2020-10-05 22.23.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/20d2b222-0086-3d79-23d6-d11cd1f8e112.png)
![スクリーンショット 2020-10-05 20.41.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/9e26da71-faf4-03ad-4342-a788c751dbe5.png)

####原因
SQL文内に「CREATE DATABASE IF NOT EXISTS」が含まれていた。
ここではデータベースが1つしか使えない設定になっている為エラーが起きた。

####解決法
１.エクスポートしたSQLファイルをメモ帳などのエディタで開く
2.CREATE DATABASE IF NOT EXISTSで始まる1行を削除
2.その下にUSE ‘データベース名’があればそれも削除

Import Completedと表示されたため、 DBのインポート完了

⑥自分が作ったwebアプリをデータベースに接続できるようするためコードを書き換える。

```
function dbConnect()
{

  $dsn = 'mysql:dbname=DB名;host=ホスト名;charset=utf8';
  $user = 'ユーザー名';
  $password = 'パスワード';
  $option = array(

    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::MYSQL_ATTR_USE_BUFFERED_QUERY => true,
  );

  $dbh = new PDO($dsn, $user, $password, $option);
  return $dbh;
}
```

⑦完了したら、git add~pushまで行う

###4.ライブラリの追加
デプロイする前にフォルダの中に「composer.json」「composer.lock」「Procfile」がきちんと入っているか確認する。

もし入っていない場合は、フォルダ内にこれらのファイルを追加する。

①ディレクトリ内にcomposerのインストール

```
brew install composer
```

②ディレクトリにcomposer.jsonファイルが追加されているので中身にPHPのバージョンを記述

```

{
  "require": {
    "php": "~7.3.9",
    "ext-mbstring": "*"
  }
}
```

③次にcomposer.lockファイルの追加

```
composer install
```

vendorディレクトリ、composer.lockファイルが追加されていることを確認。


![スクリーンショット 2020-10-17 13.27.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/9cab4552-dd3c-2435-a5b7-19886e79737c.png)

↑追加されている状態

##5.Herokuへpush
①フォルダの中身を確認し「composer.json」「composer.lock」が存在していれば、ターミナルに下記を打ち込む。

```
$ git push heroku master
```

エラーメッセージが出なければ、無事にデプロイ完了。

②実際にページを開いて確認

```
$ heroku open
```

アプリが表示されていればデプロイ完了。

##デプロイ後私が経験したエラー
・DBのカラム形式が間違っている（invaild~）
・小文字大文字が混同してる。（４０４）

#最後に
以上、Herokuを使って、PHPポートフォリオサイトを無料でデプロイする方法でした。認識違いなどございましたら、ご指摘していただけると幸いです。