Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

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

完成イメージ

image.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

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

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

$ heroku xxxxxx

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

Heroku CLI

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

image.png

Heroku CLI

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

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

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

コマンドプロンプト
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

Sourcetree

image.png

Sourcetree

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

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

Heroku Console

image.png

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

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

image.png

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

image.png

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

image.png

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

コマンドプロンプト
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

index.php
<?php
phpinfo();

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

image.png

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

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

image.png

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

コマンドプロンプト
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でタネ明かししますね。

コマンドプロンプト
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と、新しいアプリのリモートリポジトリがきちんとリンクされています。なので何もしなくて大丈夫。

確認してみましょう。

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

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

image.png

4. いざ PUSH!

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

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

image.png

そしてすかさずPUSH

image.png

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

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

image.png

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

image.png

5. デプロイと公開

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

image.png

まとめ

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

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away