herokuでデプロイしてみた!

TECH::CAMPの最終課題発表会が終わり、卒業しました。

早いもんでもう半年か・・・という感じです。

 

TECH::CAMPは卒業しましたが、私のプログラミング人生は始まったばかり。

これからもっと頑張ります💪!!

 

現在ポートフォリオとして、PHPを使ったWebサイトを作成しています。

書籍を使用して学習しているのですが、

本番環境への移行を教えてくれる書籍がなく、

ネットで調べるぞーと思ったら、Railsに比べてPHPでのデプロイの記事が少ない。

laravelは結構あるんですが・・

まる1日ぐらいかかってしまいましたが、なんとかデプロイとDB紐付けまでできたので、

記録したいと思います。

開発環境

  • PHP7.0
  • MySQL(PHPMyadmin)
  • XAMMP
  • Git紐付け済み
  • herokuユーザー登録済み

Gitとherokuを紐付け

めちゃめちゃ時間かかりました。

Railsでやっていた時はコマンドでコードを保存しているディレクトリにいって操作していたので、
今回も同じだろう。よし、コマンド打って移動だ。

Githubに紐付けているディレクトリはXAMPP内のhtdocsに保存しているから・・

ん?このディレクトリってどういう位置にいるんだ?!?!

XAMPPの仮想サーバーってどうやってコマンドでアクセスするの?!?!?
色々試してみましたが、どこにいるのかわからない・・

いろんな記事を見ていると、「本番用のディレクトリ」という記述があったので、
みんな仮想サーバーとは別のところに保存してるのか?!ミスったああああ!!!
でもGithub紐付けちゃってるし・・・

    解決→GithubDesktopからアクセスできるんです!!!!(GithubDesktop派です)

Githubデスクトップの左上、「current repository」のプルダウン をクリック

対象のリポジトリを右クリック

「open in terminal」の文字があります!
これをクリックすると・・・ターミナルが開いて、XAMPPの仮想サーバーにアクセスできています!!!
やった!!!

herokuで登録されていない方はこちらで登録を済ませてください。
https://signup.heroku.com/login

登録したら、cilをダウンロード
https://devcenter.heroku.com/articles/heroku-cli

私はMacなので下記コマンドを打ってダウンロードしました。

brew tap heroku/brew && brew install heroku

パスを通してください、と出たら下記のコマンドを打ちます。

$echo 'PATH="/usr/local/heroku/bin:$PATH"' >> ~/.profile

下記コマンドを打って、herokuのバージョンが出てきたら、ダウンロード成功です!

$heroku --version
>>heroku/7.0.47 darwin-x64 node-v10.1.0


herokuでデプロイ!

$ heroku login
herokuのホームページがブラウザで開きますので、ログインします。

heroku上に新しいアプリを作成するコマンドを打ちます。
現在ターミナルでアクセスしているディレクトリをherokuに認識させ、デプロイ時のアプリ名をつけてあげるという仕組みです。

$ heroku apps:create アプリの名前


$ git remote -v

このコマンドでheroku、gitのアプリの名前が表示されればOK。
$ heroku addons:create cleardb:ignite


データベースを切り替え

ローカルで開発しているときは、PHPMyadminというところからMySQLに保存したデータをみていたと思います。
本番環境では本番環境用にDBを切り替えてやる必要があります。
herokuではデフォルトでpostagreSQLというのを使用する設定になっているので、
herokuのclearDB MySQLというアドオンをインストールする必要があります。
下記コマンドを打ち込むか、herokuのHPからもインストールすることが出来ます。

$ heroku addons:create cleardb:ignite
※因みにこのアドオンはherokuにクレジットカードを登録しないと使用できません。
freeプランでも、形式上登録の必要がありますので、登録してからコマンドを使用しましょう!

clearDBのインストールが終わったら、下記コマンドでclearDBのURLを確認することが出来ます。
この内容はclearDBに接続する際にも使用しますので、内容を確認しておきます。

$ heroku config

こんな感じで表示されます。

CLEARDB_DATABASE_URL = mysql://ユーザ名:パスワード@ホスト名/DB名?reconnect=true


次に、DBを可視化できるworkbenchというものをダウンロードします。
下記HPからダウンロードできます。
https://www.mysql.com/jp/products/workbench/

workbenchが立ち上がったら、「MySQLConnections」の横辺りにある「+」から、下記の通り入力します。
ConnectionName:任意のDB名
HostName:ホスト名
UserName:ユーザー名
Default Schema:DB名
Password:パスワード

入力したら、TestConnectionボタンをクリックします。

次に、PHPMyadminで作成した、テーブル・カラムとその中身をエクスポート→clearDBにインポートします。
PHPMyadminにアクセスし、出力したいDBを選択→
画面上のタブから「エクスポート」を選択→
エクスポート方法の「詳細」を選択し、必要なテーブルが全て選択されているか確認→実行ボタン

次にMySQLworkbenchからインポートします。
さっきConnectionをしたDBから、Administrationタブ選択→
DataImport/Restoreを選択→
DefaultTargetSchema→インポートしたDBを選択。ない場合はnewschema
Inport from self contained file を選択→インポートしたいファイルを選択し、「実行」をクリック。

インポートを確認するには
Administratetionの右の「schema」タブをクリックし、tablesをクリックすると開発環境で作成したテーブルが表示されていればOK!
見たいテーブルのうえにポインタを乗せると、テーブルのアイコンが出てくるので、
それをクリックすればテーブルの中身が見れます!

本番環境用にデータベース関係の記述を書き換え

下記ファイルを用意し、sqlに接続する必要のあるページでrequireを使用して読み込むようにします。
また、開発環境用のSQL文はコメントアウトするなどして、使えないようにしておきます。

<?php

$host = getenv('DB_HOSTNAME'); //MySQLがインストールされてるコンピュータ
$dbname = getenv('DB_NAME'); //使用するDB
$charset = "utf8"; //文字コード
$user = getenv('DB_USERNAME'); //MySQLにログインするユーザー名
$password = getenv('DB_PASSWORD'); //ユーザーのパスワード

$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, //SQLでエラーが表示された場合、画面にエラーが出力される
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, //DBから取得したデータを連想配列の形式で取得する
    PDO::ATTR_EMULATE_PREPARES   => false, //SQLインジェクション対策
];

//DBへの接続設定
<?php

$host = getenv('DB_HOSTNAME'); //MySQLがインストールされてるコンピュータ
$dbname = getenv('DB_NAME'); //使用するDB
$charset = "utf8"; //文字コード
$user = getenv('DB_USERNAME'); //MySQLにログインするユーザー名
$password = getenv('DB_PASSWORD'); //ユーザーのパスワード

$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, //SQLでエラーが表示された場合、画面にエラーが出力される
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, //DBから取得したデータを連想配列の形式で取得する
    PDO::ATTR_EMULATE_PREPARES   => false, //SQLインジェクション対策
];

//DBへの接続設定
<?php

$host = getenv('DB_HOSTNAME'); //MySQLがインストールされてるコンピュータ
$dbname = getenv('DB_NAME'); //使用するDB
$charset = "utf8"; //文字コード
$user = getenv('DB_USERNAME'); //MySQLにログインするユーザー名
$password = getenv('DB_PASSWORD'); //ユーザーのパスワード

$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION, //SQLでエラーが表示された場合、画面にエラーが出力される
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, //DBから取得したデータを連想配列の形式で取得する
    PDO::ATTR_EMULATE_PREPARES   => false, //SQLインジェクション対策
];

//DBへの接続設定
$dsn = "mysql:host=$host;dbname=$dbname;charset=$charset";
try {
    //DBへ接続
    $dbh = new PDO($dsn, $user, $password, $options);
} catch (\PDOException $e) {
    throw new \PDOException($e->getMessage(), (int) $e->getCode());
}

 require_once('dbconnect.php');

ここまできたら、masterブランチにマージ。
herokuでデプロイします。

$ git push heroku master
ページを開きます。
$ heroku open

課題

デプロイするのにやることが多すぎて、うろ覚え部分がかなりある。
何回もやれば覚えられるのか・・・

後、DB接続の部分、本番環境と開発環境でコメントアウトつけたり外したり、外し忘れたり・・
なんてもさいことしているんだ、と思う。
切り替える方法がきっとあるはずなので、調べたいと思います!