2
4

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-07-25

はじめに

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

Macローカルでの開発環境構築

localhostで表示確認できるよう、サーバを動かす

Macローカル
$ sudo apachectl start

http://localhost/
にアクセス。
Screen Shot 2020-07-25 at 9.20.28.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ファイルを作ってみる。

/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ローカルで作ったファイルのディレクトリをアップする。

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
Screen Shot 2020-07-25 at 9.19.27.png

Herokuで新規アプリを作成

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

GithubとHerokuを連携

Deployメニューの、Githubを選択し、リポジトリ名で検索し、Connectする。
Screen Shot 2020-07-25 at 9.27.05.png

Herokuでデプロイ

Manual Deployメニューの、Deploy Branchボタンを押す。
Screen Shot 2020-07-25 at 9.37.36.png
Viewボタンを押すと、Herokuでホスティングされたページが確認できる。
Screen Shot 2020-07-25 at 9.37.10.png
成功!
ここまでで、一通りの流れが完了。
以降は、よく使われる機能やライブラリを追加していきたいと思います。

DBを動かす

DBのセットアップ

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

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

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

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=> 

サンプルデータを作成

適当にテーブルを作ってみる。

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情報が格納されている。

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の設定が必要。

.htaccess
# 本番環境
# SetEnv DATABASE_URL 'production'

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

React化

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4