「WEB公開と言えばFTP」世代に贈る Windows + SourceTree で Heroku を使おうとして悪戦苦闘した話

# Windows から Heroku を使いたい。

PredictionIOが使いたかったんです。人工知能ですってよ。ECには欠かせないレコメンデーションエンジンが作れるんだってよ。そんな言葉に踊らされて「でもね、実質 **Heroku** じゃないと使えないよ」という警告を軽く考えて手を出してみた Heroku。

しかし、全然わからない！ なにこれ。ファイルのアップロードどうやるの？ デプロイしたファイルはどこに格納されてるの？ どうやって編集するの？！ そんなこんなで約1年放置して、いい加減クローズしようと思って触り始めたら、その間に蓄えられた知識と経験で、案外すんなり使えてしまったのです。

**ここんとこ、始める前に知っておきたかった！**

そんな視点で書いた、HerokuをWindowsで使うチュートリアルです。


## 前提

- macは使ったことがない！
- Linux のコマンドだったらなんとなく雰囲気はわかる
- **GITはよく使う。リモートリポジトリとローカルリポジトリの違いがわかる**
- Windowsのcmdと、Linuxのshと、macのshellは区別がつかない。
- **PHPer**
- PredictionIOが使えるようになりたい……( *´艸｀)


# Heroku とは？

レンタルサーバーです。が、ほかのレンサバとの違いは、**ソースコードを動かすためのサーバーのインフラ構築を自動的にやってくれる**こと。PHPならだいたいどのレンサバにも入っているけど、Node.jsは？ Javaは？ ビルドはどうする？ そういうのを全部自動でやってくれるから、**開発者はソースコードを投げるだけ！**

＃「HerokuはRubyのサーバーである」的な説明は忘れてください。僕もそれに少し惑わされました。Herokuがすごいのは、インフラ構築をやってくれることと、その検出も自動的ってことと、その**対応言語が他と比べて多い**こと、なんだと思います。Rubyだけに限らず…ということです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/cc21d93d-5081-38ea-3c55-73b905409c7d.png)

後述しますが、このデプロイログにでてくる「PHP app detected」がキーポイントなんです。


## Heroku にファイルをアップロードするには？

しかしですな。どこにどう投げたらいいか、わからん！(≧▽≦)
かれこれ20年以上も前からWEB作ってたおじさんにとって、PUSHとかデプロイとか言われてもよーわからん。レンタルサーバーといえば、FTPつないでアップロードでしょ？ それってどうやってやるの？

# 完成イメージ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/ab564d3b-4d05-74c8-1ba9-6c28b3ad828d.png)

これが基本。ソースコードはGitレポジトリで管理され、GitにPUSHすると、それが自動的にサーバーにデプロイされて公開されます。Gitが、GitHubなどの外部リモートリポジトリ、ローカルリポジトリ、Heroku内のリポジトリと3種類あること。Herukuのレポジトリと実際のサーバーのディスクスペースはベツモノであることなどが、レンタルサーバーとの大きな違いであり、注意点です。

＃Githubは要らない（「実践」で例示）とか、GithubをHerokuのGitとして利用する、といったことも可能ですが、それは応用編。基本としてまずはこの図をアタマに入れておいたほうが良いと思います。


# 武器

標準で入っているものを含め、下記のツールを使います。

- コマンドプロンプト
- Heroku CLI (Command Line Interface)
- Git for Windows
- Sourcetree
- (Heroku Console)

## cmd.exe

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/31f2f558-cc86-2959-8583-a4c30f6eaaf5.png)


結局はこの「コマンドプロンプト」様が、重要なところを担います。もちろん全部GUIでできなくもないですが、かえってややこしいですし、他のドキュメントや解説サイトではコマンドラインを使っていることが多いので、それを**Windowsでどうやるか**は知っておくべし、です。

macやlinux前提の解説サイトで

```sh
$ heroku xxxxxx
```

と、$ で始まるコマンドがあったら、大体このコマンドプロンプトから実行します。スタートボタンをクリックして、```cmd```とタイプすると出てきます。


## Heroku CLI

そのコマンドプロンプトで、herokuコマンドを実行するのに必要なのがこれ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/8c35f67c-c501-7733-ffd9-7fd61ed5c1ac.png)

[Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)

こちらの公式サイトからダウンロードして、**Windows版**をインストールしてください。インストールした**後に**開いたコマンドプロンプトから（その前に開いていたコマンドプロンプトからは閉じてください）、

```console:コマンドプロンプト
D:\heroku>heroku --version
heroku-cli/6.16.3-4239951 (win32-x64) node-v9.3.0
```

としてインストールされたことを確認してください。
使い始める前に、CLIでHerokuにログインしておきます。ログイン情報は保存されるので、初回に1回実行しておくだけで大丈夫。ログインしていない状態で別のコマンドを実行するとログインを催促してくれるので、要らない操作といえば要らないんですが。

```console:コマンドプロンプト
D:\heroku>heroku login
Enter your Heroku credentials:
Email: xxxxxxxxxxx@gmail.com
Password: ***********
Logged in as xxxxxxxxxxx@gmail.com
```


## Git for Windows

そのコマンドプロンプトから、gitコマンドを実行するのに必要なのがこれ。
今回はできるだけ使わない方針ですが、結局```heroku```コマンドはコマンドプロンプトから使うので、```git```も少しタイプできるとスムーズです。

下のSourcetreeも内部ではこれを使っているのでインストールしますが、Windows全体から使うためには、先にGit for Windows をインストールしておきます。

[Git for Windows](https://gitforwindows.org/)

## Sourcetree

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/2d596ef5-3814-c0b6-540a-0d5732304ddf.png)

[Sourcetree](https://ja.atlassian.com/software/sourcetree)

とはいえ、やっぱり黒い画面のGitはなるべく触りたくないもの。そこで個人的におススメのGitクライアントがこのSoucetree。Windows対応のGUIクライアントの中では、完成度が高くデザインもクールで満足度が高い（しかしときどき起動しなくなったりするじゃじゃ馬です）。

こちらは普通に公式サイトからダウンロードしてインストールします。インストールにはAtlassianアカウントが必要です。無料なので登録だけしておきます。

## Heroku Console

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/ef71c8a3-f85d-42b6-33eb-78ec77154e13.png)

最後に。インストールするものじゃないもの。
アプリケーションを動かすコマンドなど、Herokuのサーバー上で走らせたいコマンドを実行するために使います。ほかのレンタルサーバーだったらSSHでサーバーに接続しに行くイメージです。

必要かどうかはアプリによりますが、PredictionIOだったら```pio```コマンドがそれにあたるので必須です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/1acd9ee8-798e-e715-5617-c839ca566285.png)

管理画面から Run console を選び、```bash```とするとコマンドラインが起動します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/44705f04-2b81-fa09-ced7-f94424c0465e.png)

単発でコマンドを走らせることもできます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/d7e1d67f-40e7-1021-ac7c-fd9b163f3256.png)

また、この画像にも書いてある通り、コマンドプロンプトの```heroku```コマンドからも同じようにサーバー上のコマンドを実行できます。わざわざ管理画面を開く必要がないので、慣れたらこちらしか使わなくなるかと。

```console:コマンドプロンプト
D:\>heroku run "pio app list" -a myapp-pio-ur-event
Running pio app list on ⬢ xxxxxx-pio-ur-event... up, run.5490 (Free)
Autoset Spark memory params for web process: --driver-memory 384m
Autoset Spark memory params for training: --driver-memory 384m
[INFO] [Pio$]                 Name |   ID |                                                       Access Key | Allowed Event(s)
[INFO] [Pio$]               classi |    1 | GmsUAQSDVOWokPnmunrBbX3jlnnXCWXtZXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | (all)
[INFO] [Pio$]             myapp|    2 | _HiM_cDJLNFw16PzD_iZ4u7TfmcxoP5pvXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX | (all)
[INFO] [Pio$] Finished listing 3 app(s).
```


# 実践

まずは超シンプルに、1ファイルだけのアプリを作ってみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/6cc9a784-7467-9bb4-c6c8-357340aa1ba3.png)

```php:index.php
<?php
phpinfo();

```

構成は先程より少しシンプルになってこんな感じ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/31066076-b538-9b1c-90bd-ebc380b31182.png)



## 1. ローカルレポジトリにする

Sourcetreeを使ってローカルリポジトリにします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/c7f6b68b-d674-51f6-d705-ab0473031362.png)

コマンドラインを使ってもカンタンです。

```console:コマンドプロンプト
Microsoft Windows [Version 10.0.15063]
(c) 2017 Microsoft Corporation. All rights reserved.

C:\Users\username> d:

D:\> cd heroku

D:\heroku> git init
Initialized empty Git repository in D:/heroku/.git/
```

まだコミットはしません。

## 2. heroku アプリを作成する

HerokuのアプリはもちろんHerokuの管理画面から作成できますが、あえてコマンドラインをたたきます。なぜかというと…Step3でタネ明かししますね。

```console:コマンドプロンプト
D:\heroku> heroku create my-first-php-info-app
Creating ⬢ my-first-php-info-app... done
https://my-first-php-info-app.herokuapp.com/ | https://git.heroku.com/my-first-php-info-app.git
```

**my-first-php-info-app** というのが**Herokuのアプリ名**です。これはHeroku全体でオンリーワンじゃないとダメなので、もうあなたは my-first-php-info-app は使えません。残念。ここを省略すると自動的にネーミングされます（後から変更できます）。サンプルならそれで良いかもしれない。

## 3. HerokuアプリのGitをローカルレポジトリのリモートリポジトリにする

Herokuのアプリができたら、そのHerokuサーバー上にあるGitを、さっき作ったローカルリポジトリのリモートリポジトリにします。こうすることで、ローカルからPushすると、HerokuのGitにファイルが格納されるようになります。

さぁどうやるか。

実は、先ほど ```heroku create``` をした時点で、そのローカルフォルダのGitと、新しいアプリのリモートリポジトリがきちんとリンクされています。なので何もしなくて大丈夫。

確認してみましょう。

```console:コマンドプロンプト
D:\heroku>git remote
heroku
```

Sourcetreeでも、リモートリポジトリに heroku が追加されていることが確認できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/55992966-34c8-a45f-6921-7987c4ca62bb.png)

## 4. いざ PUSH！

黒い画面さん、おつかれさまでした。
ここからは Soucetree に戻ってグラフィカルにいきましょう。

最初に作っておいた index.php をコミットします。ここでは「変更をすぐに - にプッシュする」のチェックは外しておきましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/967622e3-4c77-47a2-c46b-76fa09fd9d63.png)

そしてすかさずPUSH

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/57bec327-2863-0bed-301b-98be5763a585.png)

Push先に heroku と出ていることを確認してください。また、リポジトリのURLが、アプリ名を含んだ ```https://git.heroku.com/xxxxxxxx.git``` となっているはず。リモートブランチもローカルブランチも、そのままだと master になっているはず。

以上が確認出来たらプッシュ！ 
（すみません。ここから突然環境を変えたので英語になっています…。アプリ名もちょっと変わっていますが、気にしないでください。）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/1fbf0904-0329-12f7-7e2b-a907df80ada5.png)

ここで出てくるログは通常のGitのPUSHログだけでなく、Herokuがいろいろ頑張っていることが出てきます。せっかくなのでログを詳しく見てみましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/b1764d5a-8c6a-c4f0-77a7-e105fa0ac5e8.png)

## 5. デプロイと公開

…は、とくにすることがありません。Pushしたときに、デプロイも公開も終わっています。
出てきたURLを開けばほら。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/129854/54199273-370e-e8e6-10c3-2cf7357c9437.png)



# まとめ

というわけで、要領が掴めてしまえば、Windowsでもサクッとアプリを作ることができるようになりました（体験談）。Herokuのすごいところは、とにかく多種多様なプラットフォームを、一瞬で作ってくれることで、これはAWSなどの他のインフラサービスにも無い特徴なのかなーと思います。PredictionIOのように「Scalaで動きます」みたいなマニアックなアプリをすぐ動かすことができる。上手く使えば、最新のテクノロジーを使ったサービスをすぐに開始できるのだろうけど、実はまだそれほどHerokuのメリットを活かした事例を知らずにいます。

本当は、PredictionIOを動かすところまで紹介したかったけど、今回はひとまずここまで。次回にご期待下さい！。