Heroku&Macで個人Webサービスをさくっと開発&リリースするまで

#はじめに
最近では、HerokuやGithubが無料で使えるので、ある程度の知識があれば無料でWebサービス開発とリリースまで、企業と同様の手法でできてしまう。
ローカル開発環境 ⇔ Githubでソース管理 ⇔ Herokuでホスティング

# Macローカルでの開発環境構築
localhostで表示確認できるよう、サーバを動かす

```zsh:Macローカル
$ sudo apachectl start
```
http://localhost/
にアクセス。
<img width="345" alt="Screen Shot 2020-07-25 at 9.20.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/c7c56a50-176c-f51b-802b-b6f584f9d126.png">

ファイルの実態は「/Library/WebServer/Documents/」

PHPを動かすための設定もしておく。
https://qiita.com/shuntaro_tamura/items/bdabcb77926dc92617b1#2-1-php%E3%82%92%E4%BD%BF%E3%81%86

# Macローカルでファイル作成
トップページの素のPHPファイルを作ってみる。

```PHP:/Library/WebServer/Documents/yws/index.php
<!doctype html>
<html>
<head>
<title>a</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css"><!--
--></style>
<script type="text/javascript"><!--
--></script>
</head>
<body>
<h1>YWS</h1>
<p>this is your web service.</p>
</body>
</html>
```

# Githubにアップ
Github側で新しくリポジトリを作成し、Macローカルで作ったファイルのディレクトリをアップする。

```zsh:Macローカル
$ git remote add origin git@github.com:atsuto/yws.git
$ git push -u origin master
$ git add index.php
$ git commit
$ git push
```
これでGithubで新しく作ったリポジトリにファイルが上がる。
https://github.com/atsuto/yws
<img width="1126" alt="Screen Shot 2020-07-25 at 9.19.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/abe281c2-f69d-826e-9128-b8c17d7aa4fb.png">


# Herokuで新規アプリを作成
Herokuにログインし、Create New Appから新しいアプリを作成する

# GithubとHerokuを連携
Deployメニューの、Githubを選択し、リポジトリ名で検索し、Connectする。
<img width="942" alt="Screen Shot 2020-07-25 at 9.27.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/3e72e725-5a37-5308-5df2-253421b861e3.png">

# Herokuでデプロイ
Manual Deployメニューの、Deploy Branchボタンを押す。
<img width="928" alt="Screen Shot 2020-07-25 at 9.37.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/472726ae-0d4b-a2f3-e6e0-808621e1e9c0.png">
Viewボタンを押すと、Herokuでホスティングされたページが確認できる。
<img width="321" alt="Screen Shot 2020-07-25 at 9.37.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80263/5eadfdb4-1608-a215-9cba-05ee2cee83a0.png">
成功！
ここまでで、一通りの流れが完了。
以降は、よく使われる機能やライブラリを追加していきたいと思います。

# DBを動かす
## DBのセットアップ
HerokuのコンソールのResourcesメニュー、Add-onsからHeroku Postgresを追加する。
Settings > Database Credentials > View Credentials のHeroku CLIをコピーして実行する。
psqlがインストールされてないと下記のようになる。

```zsh:Macローカル
 ▸    The local psql command could not be located. For help installing psql, see https://devcenter.heroku.com/articles/heroku-postgresql#local-setup
```
https://devcenter.heroku.com/articles/heroku-postgresql#local-setup

接続に成功すると下記のようになる。

```zsh:Macローカル
% heroku pg:psql postgresql-sinuous-91862 --app yws
 ›   Warning: heroku update available from 7.42.1 to 7.42.5.
--> Connecting to postgresql-sinuous-91862
psql (12.3)
SSL connection (protocol: TLSv1.2, cipher: ECDHE-RSA-AES256-GCM-SHA384, bits: 256, compression: off)
Type "help" for help.

yws::DATABASE=> 
```

## サンプルデータを作成
適当にテーブルを作ってみる。

```zsh:Macローカル
yws::DATABASE=> \c <データベース名>

yws::DATABASE=> CREATE TABLE weather (
city            varchar(80),
temp_lo         int,           -- 最低気温
temp_hi         int,           -- 最高気温
prcp            real,          -- 降水量
date            date
);

yws::DATABASE=> INSERT INTO weather VALUES
('Tokyo', 25, 30, 300, '2020-07-26');
```

## プログラムからデータの取得
Heroku環境では、環境変数 DATABASE_URLにDB情報が格納されている。

```php:index.php
$url = parse_url(getenv('DATABASE_URL'));
$dsn = sprintf('pgsql:host=%s;dbname=%s', $url['host'], substr($url['path'], 1));
try{
	//DB接続
	$dbh = new PDO($dsn, $url['user'], $url['pass']);
	$sql = "SELECT * FROM weather";
	$res = $dbh->query($sql);
	foreach( $res as $value ) {
		echo "$value[city]<br>";
	}
}catch (PDOException $e){
	print('Error:'.$e->getMessage());
}
```

## Macローカルでの環境変数の定義
MacローカルではHerokuと違いDATABASE_URLが定義されていないので、.htaccessで定義してあげる。
ちなみにMacローカルでは.htaccessを有効化するために、confでAllowOverRide Allの設定が必要。

```conf:.htaccess
# 本番環境
# SetEnv DATABASE_URL 'production'

# 開発環境
SetEnv DATABASE_URL 'http://user@localhost/dbname' #user,dbnameは適宜変更する
```

# React化