PHPで作ったWebサービスをHerokuでデプロイするまでの手順書


##はじめに
プログラミング学習を始め約３ヶ月が経ち、学習のためPHPメインでWebサービスを作成しました。
せっかく作ったサービスなので、これも学習を兼ね、Herokuでサーバーをレンタルし公開してみようと思ったのですが、想像以上に苦労してしまいました。
何度もググったり、記事を読み漁ったりと、かなり時間をかけてしまいました。
なので同じようにWEBサービスを公開する際の参考となればと思い、備忘録を兼ね本記事を書きました。

####開発環境
`OS：Mac(GitとGitHubを導入またはアカウント登録済であることを前提)`
`言語：PHP7.3.1`
`DB：MySQL8.0.17(ローカル環境：MAMP / 本番環境：WorkBench)`
`サーバー：Heroku`

##Heroku（ヘロク）とは
https://www.heroku.com/home
`開発したWEBアプリケーションを10分程度で全世界に公開することができ、そのままサービスを本格的に運用することも可能なホスティングサービス。多様な言語に対応。`

- 今回は無料プランを使用します。
<img width="1440" alt="スクリーンショット 2019-09-17 9.58.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/182eaaa1-ff71-fefd-3c2a-99b64dc5117e.png">


##ウェブサービス公開までの手順
####1.Herokuで新規アカウントを作成
https://www.heroku.com/
`SignUp`からで新規アカウントを作成します。
 
####2.ログイン後、クレジットカード情報を登録（形式だけです）
`右上のアイコン`→`Accountsetting`→`Billing`→`BillingInfomation`でクレジットカード情報を登録

####3.Heroku CLIをインストール
https://devcenter.heroku.com/articles/heroku-cli

もしくは、以下コマンドでインストールします。

```
$ brew tap heroku/brew && brew install heroku
```

####4.Herokuで新規アプリを作成します
https://dashboard.heroku.com/apps

`ダッシュボード右上のNew`→`Appname`にてアプリ名（任意）を入力し登録

<img width="1440" alt="スクリーンショット 2019-09-17 14.24.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/4ed2b951-6ea1-b816-eedb-cd5d2bc201ea.png">

もしくは、

```
$ heroku create アプリ名（任意）
```
で作成します。

####5.GitHubでアプリ用のリポジトリとディレクトリを作成
GitHubへアクセス
https://github.com
`new`→`リポジトリ(任意の名前)を作成`→`setupDesktop`にてデスクトップ（任意の場所）へクローン

デスクトップにリポジトリ名のディレクトリが作成されたかと思います。

分からなければ、【GitHubのアカウント登録からリポジトリ操作まで】(https://qiita.com/muneo/items/1321bf8cdb21178a73e2 ）を参考。

####6.ディレクトリにcomposerのインストール
composerとはPHPのパッケージ管理システムでインストールが必要となります。

まずは、composer.jsonというファイルを作成します。

```
$ cd Desctop/ディレクトリ名(ここではnew-appとしてます。)
```

ディレクトリへ移動したら、

```
touch composer.json
```

でファイルを作成。（エディタで作成しても問題無しです。）

するとファイルが作成されるので、

<img width="874" alt="スクリーンショット 2019-09-17 14.44.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/6a855a24-594c-0dd1-8db5-6415fda31bc3.png">

エディタでcomposer.jsonを開いて、

```composer.json
{
    "require": {
      "php": "~7.0",
      "ext-mbstring": "*"
    }
 }
```
を保存して下さい。（作成時点においては上記で動作します。）

次に、

```
$ curl -sS https://getcomposer.org/installer | php
$ mv composer.phar /usr/local/bin/composer
```

まで実施したら、一度terimalを消し、再度立ち上げ。

```
$ cd Desktop/new-app
$ composer -v
$ composer install
```
composerのインストールが成功すると、
<img width="874" alt="スクリーンショット 2019-09-17 16.45.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/406c0804-b5ec-249d-88c9-985122e3e1fc.png">

の状態になっていると思います。

ここまでできたら、次の段階に移ります！

####7.Gitリポジトリの作成
ターミナルで

```
$ git init
$ git remote add heroku https://git.heroku.com/アプリ名.git
$ git remote -v
```

このコマンドを入力して、

```
heroku	https://git.heroku.com/アプリ名.git (fetch)
heroku	https://git.heroku.com/アプリ名.git (push)
origin	https://github.com/githubアカウント名/リポジトリ名.git (fetch)
origin	https://github.com/githubアカウント名/リポジトリ名.git (push)
```
がターミナルで表示されればOKです。

####8.HerokuのDBでMySQLを使用する拡張機能

HerokuはデフォルトではPostgreSQLとなっているため、
Mysqlを使うためHerokuの拡張機能からClearDBのインストールが必要になります。

https://elements.heroku.com/addons
<img width="1435" alt="スクリーンショット 2019-09-17 18.16.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/4468f8d3-75d7-938e-a0ce-bb2713598988.png">

もしくは、

```
$ heroku addons:add cleardb:ignite
```

でインストールできます。

####9.Workbenchのインストールと新規DBの作成
Workbench（GUI）を使うことで簡単にDB管理ができます。
https://www.mysql.com/jp/products/workbench/

 - 【MySQL WorkbenchをMacにインストールする方法(https://programmingnavi.com/77/ ）】
が分かりやすいので参考にしながらインストールを進めてください。`

インストールしたらWorkbenchを立ち上がったら、以下の手順に沿って新しく、１つDBを作成してください。
①＋マークをクリック
<img width="1435" alt="スクリーンショット 2019-09-17 18.27.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/1666e178-e932-ef5c-4978-88e7e5ab7cc9.png">

②ここに入力する内容は、以下を参照。

`CLEARDB_DATABASE_URL  = mysql://ユーザ名:パスワード@ホスト名/DB名?reconnect=true`
Connection Name ： 任意の名前
Hostname ： ホスト名
Username ： ユーザ名
Password ： パスワード
Default Schema ： DB名

**CLEARDB_DATABASE_URL**は、Config Varsにて環境変数化されています。
下記のページか、
<img width="1435" alt="スクリーンショット 2019-09-17 21.07.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/62b5c632-f9b9-b7fd-a36a-9186fc15e178.png">

もしくは、

```
$ heroku config
```
で確認できます。

③入力後、`TestConnection`をクリックすると、パスワードが求められるので、上記パスワードを入力。
完了後、任意の名前でDBが作成されたことを確認してください。

####10.phpMyAdminからMySQLWorkbenchへテーブル情報をコピー
`phpMyAdminより、MySQLが無償で配布しているネイティブアプリである
Workbenchの方が個人的に分かりやすかったのでこちらを記載してます。`

まずはphpMyAdminにアクセス。
テーブル情報をエクスポート→ファイルを抽出しダウンロード
<img width="1435" alt="スクリーンショット 2019-09-17 21.46.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/ad982ef6-e91b-42c9-82cc-301ea0fa6db6.png">

MySQLWorkbenchでテーブル情報をインポートします。
<img width="1433" alt="スクリーンショット 2019-09-17 21.33.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/eac98b53-ee85-84b2-d87d-26097d0f0b00.png">

データベースにそのまま情報が移っていることを確認してください。

####11.公開するファイルのDB情報を書き換え
`ここまできたらもう公開間近ですが、重要な作業があります。
それは、DBへ接続するための変数の情報を書き換えることです。
もともと環境変数に入れたり他の方法で管理していない限り、GitHubを通じユーザー名やpasswordとかがそのまま公開される形になりますので、必ずGitHubに上げる前に行ってください。`

、、と言っても作業としては非常に簡単で`dbConnect()関数`の中身を以下の通り書き換えるだけです。
（開発環境毎に異なると思うのでご自身で確認してください。）

```◯◯◯.php
function dbConnect(){
  $db = parse_url($_SERVER['CLEARDB_DATABASE_URL']);
  $db['dbname'] = ltrim($db['path'], '/');
  $dsn = "mysql:host={$db['host']};dbname={$db['dbname']};charset=utf8";
  $user = $db['user'];
  $password = $db['pass'];
  $options = 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,$options);
  return $dbh;
}
```

- Herokuには`Config Vars`の設定でHeroku内で使える環境変数のようなものを生成できるので、それを元に変数を予め登録することができます。
- **今回のケースで言えば、特に変数を変えなくても、自動で登録されている`CLEARDB_DATABASE_URL `の情報から読み取ってくれるので大丈夫です。（めちゃ便利！）**
　　　　　　　　

**環境変数とは<br>**

>環境変数とは、環境変数とは何なのか一言で言うと、Terminal環境内における変数です。往々にして、PCの環境についての変数です。
【引用：Pathを通すとは、環境変数とは（https://qiita.com/fuwamaki/items/3d8af42cf7abee760a81 ）】

####1２.本番環境のディレクトリへファイルを移す
開発環境にあったファイル一式（上記書換え済）を、本番環境のディレクトリに移す。
その後、GitHubで`コミット`→`プッシュ`

####1３.公開するディレクトリ

Herokuにアクセスしデプロイへ→githubをサーチ→作成したリポジトリをクリック
→あとは、赤枠に２箇所をクリックして、４箇所緑のチェックがつけば
↓
**デプロイ成功**
<img width="1435" alt="スクリーンショット 2019-09-17 23.44.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/53516c66-0723-6a88-b9c8-2373c0b4148b.png">
<img width="1435" alt="スクリーンショット 2019-09-17 23.44.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/f2d29849-64ec-f751-af3e-d15b171a3703.png">
<img width="1435" alt="スクリーンショット 2019-09-17 23.48.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436521/0babe635-dcbd-ec96-6685-99087e507ad3.png">

##最後に
無駄な処理とかあるかもしれないですが、概ねこの通り進めて貰えれば大丈夫だと思います。

何か指摘がありましたら、ご連絡頂ければ幸いです。

〜自分で作ったウェブサービス〜
【BIJI-BON】（ビジネス書専門サイト）
https://biji-bon.herokuapp.com/