読者です 読者をやめる 読者になる 読者になる

Game Hunt

おすすめのスマホゲームのレビューや、最新ニュースを紹介するブログです。

プログラミングのド素人がHerokuを使ってウェブサイトを公開するまで【詳細解説あり】

プログラミング

どうも、ゴトーだ。

f:id:hogehoge223:20161023140138p:plain

先日からプログラミング学習をスタートさせており、まずはウェブサイトを作って少しずつアウトプットしていこうと考えている。
その決意表明の記事はこちらだ。

今回はHerokuというプラットフォームを使って無料でウェブサイトを公開することができたので、その方法を詳しく説明していきたいと思う。

HTMLはわかったほうが良いかも

俺は学生時代にホームページビルダーとかpukiwikiなんかを使ってホームページを公開したことがあって、一応もともとHTMLとCSSはかじるくらいにはわかっていた。
何も分からないという人はもしかしたらつまずくかもしれない。

Windowsユーザーの人へ

こちらの環境はMacなのでWindowsの人は同じようにできないかもしれない。
MacはRubyやgitがデフォルトで入っていたのでHerokuは初期状態で使うことができたが、Windowsはデフォルトで入っていないはずなので、環境設定が面倒かもしれない。

申し訳ないが、ここではMac環境を前提に説明する。

Herokuってなんぞや

f:id:hogehoge223:20161030194036p:plain

最初に断っておきたいのだが、俺はまだ素人なので本質的には用語を理解していなくて、Wikipediaや公式サイトに書いてある情報をそのまま書いただけなので、間違っていたら申し訳ない。初心者が書いた内容、ということで勘弁してくれ。

HerokuはPaasというプラットフォームで、Herokuを使うことで簡単にアプリケーションを動かせるらしい。
Paasというのはあらかじめ動作環境がセットアップされていて、必要に応じてその動作環境をオンライン上で時間単位で購入することで、動かしたい時にだけ稼働させることができるんだとか。

他のPaasがどうなっているのかは分からないが、どうやらHerokuは無料で使えるので、初心者向けのサービスらしい。
価格表を見ると、無料だとできることが限られていて、課金するともっとスケールの大きいことができるようになるっぽい。


Herokuで稼働させるまで

ではHerokuを使うとなぜウェブサイトを公開できるのかを説明したい。

まずHerokuアカウントを作ると、自分用のアプリケーションを作れるようになる。
入力項目も多くなくて、2分位ぽちぽちいじるだけでアプリケーションを作成できて、その時点で専用のウェブサイトが公開される。

ウェブサイトはデフォルトだとHerokuの初期画面になっているが、自分のソースコードをHerokuにアップロードするだけで、何もしないでも勝手にそれが動いてくれるという仕組みだ。

今ってこんな簡単にウェブサイト作れるのかと正直ビックリした。
本当はHTMLファイルをそのままアップロードしたかったのだけど、後述するようにHerokuではプログラミング言語が混じっていないとだめらしく、そこで少し時間かかってしまったが。

必要なもの

  • HTMLファイルをいじるエディタ
  • ターミナル
  • Ruby
  • git

今回はHTMLファイルさえ編集できれば良いので、エディタは専用のものを使わなくても大丈夫だ。

ターミナルなんてほとんど使ったことがなかったが、自分のディレクトリのデータをgitというもので管理して、それをHerokuにアップロードする時に使う。
ちなみにgitというのはソースコードのバージョンを管理するシステムのことで、それを使うとワンコマンドでアップロードすることができる。

俺はちょっとgitのところでつまずいてしまって、gitのことを少し調べる必要があった。
ここではgitがわからなくても公開できるように説明しているので安心して欲しい。

Rubyはプログラミング言語の一つだ。Macだとデフォルトで入っていたので特に問題はなかった。

Herokuにアカウント登録

それでは本題に入っていきたいと思う。
まずHerokuにアクセスして、ページ中央あたりにある「SIGN UP FOR FREE」をクリックする。

すると以下のような画面が表示される。

f:id:hogehoge223:20161030195547p:plain

この画面で右側の入力項目を一つずつ入力していく。

入力が完了したら「CREATE ACCOUNT」を押すと、登録したメールアドレスに確認のメールが届くので、そこに書かれているURLをクリックすると、以下のような画面が表示される。

f:id:hogehoge223:20161030195716p:plain

パスワードを入力したらしたら「SET PASSWORD AND LOG IN」をクリックする。
チェックボックスはメールを購読するかどうかだが、俺は切っておいた。

この時点でアカウント登録は終了だ。

Herokuにアプリケーションを追加

ログインすると下のような画面が表示される。

f:id:hogehoge223:20161030195848p:plain

ここで「Create New App」をクリックするとアプリケーションの作成画面が表示される。

f:id:hogehoge223:20161030195926p:plain

App Nameというところは任意入力なので省略できるが、俺は入力した。
後から気づいたが、これはURLになるのでこだわりたい人はちゃんと入力しよう。

下のボックスはどの地域で動かすかで、アメリカかヨーロッパどちらかが選べる。何が違うのかはわからないが一旦アメリカにした。

「Create App」を押したらもうウェブサイトは公開されている。
すごい簡単だろう。

URLは「http://[入力したアプリ名].herokuapp.com/」になっている。
ブラウザにこれを入力してアクセスすれば、もう初期画面が映っているはずだ。

自分のPCに動作させるファイルをつくる

そうしたらソースコードを作って、それをHerokuにアップロードしたいのだが、ここでは超シンプルなHTMLファイルにした。
自分の場合は「index.php」と名付けて、このようなソースにしている。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ゴトーのHeroku</title>
</head>
<body>
<p>ゴトーによるHeroku入門</p>
</body>
</html

ここで注意してほしいのが、ちゃんと決まりきったフォルダにこのファイルをつくることだ。
フォルダ単位でソースを管理するようなので、新しいフォルダを作って、そこにindex.phpを作って欲しい。

内容はこのままコピペでもいいが、「ゴトーのHeroku」というページになるので、title中とpの中の文字列を自分の好きな文字に置き換えたほうがいいだろう。

index.phpって何ぞや

実は俺はここでつまずいて、最初はindex.htmlにしたのだが、HerokuはHTMLファイルを受け付けていないらしくて、何らかのプログラミングでないとダメらしい。
そこでググって調べた所、単に拡張子を「.php」にすれば良いとのことでindex.html→index.phpにファイル名を変更した。

ちなみに.phpというのはPHPというプログラミング言語のファイルだということだ。
PHPがわからなくてもとりあえず.phpにすれば動くことは動く。

gitを使ってソースコードを管理

そうしたらgitを使ってこのディレクトリのソースコードを管理する。
gitわからねえよと言いたいところだが、実はHerokuのアプリケーションページにかかれているのでそれどおりやれば安心…ではなかった。

Herokuをインストール

Herokuに書かれているコマンドを大体そのまま打っていけばいいのだが、その前にHerokuのコマンドを使えるようにしなければならない。
先程必要なものに「Ruby」をあげていたのは、Herokuコマンドを使うのにRubyが必要だからだ。

Macの場合はデフォルトでRubyが入っているので、ここでターミナルの出番になる。
ちなみにターミナルはPCの動作をコマンドで実行するものだ。

ターミナルを開いたら以下のコマンドを入力する。

gem install heroku

これはHerokuをコマンドで実行するために必要なものをインストールするらしい。
問題がなければこのコマンドでインストールが完了する。

そうしたらHerokuにログインする必要があるので、以下のコマンドを入力する。

heroku login

するとHerokuのアカウント情報が聞かれるので、先程登録したメールアドレスとパスワードを入力する。
ここでログインが成功すると、ブラウザで作成したアプリケーションと勝手に連動してくれるようになる。

gitでHerokuのアップロード

そうしたらターミナルで先程index.phpを作成したフォルダに移動する。
移動するにはcdコマンドというものを使うらしいが、ここでも少しつまずいてしまった。

cd プロジェクトへのパス

プロジェクトへのパスがわからない方は申し訳ないが、自分で調べ方を検索してほしい。
ホームディレクトリに「first-app」というディレクトリを作っていれば以下のようにすれば移動できるので参考になれば。

cd
cd first-app

移動が完了したらHerokuが用意してくれているコマンドをターミナル上で順に入力していけば良い。

f:id:hogehoge223:20161030202236p:plain

一応コマンドもこちらで書いておく。

git init
heroku git:remote -a goto-first-app
git add .
git commit -am "コメントを自分の好きなままに入力"
git push heroku master

ここまで何らかの操作をミスっていなければこれを順に入力していくだけで、もう終了だ。
先程作ったindex.phpの内容が表示されている。

ここでつまずいたポイント

ここで書かれている通りのことをすれば大丈夫なのだが、俺は当初index.htmlでアップロードしようとしたために、「どの言語なのかわからねえよ」というエラーが出てしまった。

f:id:hogehoge223:20161030202558p:plain

そこで調べた所.phpというファイルにすればいいということにたどり着いたが、いかんせんそれだけではダメで、gitにファイルの変更を認識させないといけないということで、gitを少し勉強しなくてはならなかった。まあいずれ勉強しなければならないから、先にできてよかったのだが、正直どうすればわからなくて途方にくれてしまった。

ちなみにファイルの変更を認識させるには以下のコマンドを入力すれば良い。

git commit -am "好きなコメント"

その状態でアップロードするとHerokuが変更を認識してくれる。

git push heroku master

完成画面

無事にアップロードできたらこのようなHTMLページが動作している。

f:id:hogehoge223:20161030203023p:plain

先程のindex.phpをいじって、gitにファイルの変更を認識させて、アップロードすればその内容がHerokuに反映される。
これでプログラミングしたものをウェブ上に公開できるようになった！

ちなみにゴトーが作ったページはこちら。

ゴトーのHeroku

所要時間

簡単そうに見えて実は20時間くらいかかってしまった。
ターミナルの動作、gitのコマンド、HTMLファイルが動かない所でやたらと時間を浪費した。

ただそれでも思ったよりは早くクリアできたので、早いところプログラミングしたものをここにあげていきたいと思っている。