(cache) デザイナーもHerokuを使ってみよう！Herokuを使って静的ページを無料で作る

この記事を書いた人: machida

Tweet
Check

こんにちは、町田です。

今まではローカルでゴニョゴニョやって、自分のマシン内で立ち上がって完了、ってところまでをゴールしてやってましたが、今回は自分で公開するところがゴールです。こそこそ連載を続けてるKUROIGAMENもやっとここまで進みました。

もう静的ページを作るのに金は払わない

はい、すごいのはここです。もうこれからは静的ページを作るのにお金を払う必要はなくなります。なぜなら、Hreroku（ヘロク）というサービスを使うからです。Herokuを使えば無料で静的ページが作れてしまいます。

Herokuとは？

PaaS（Platform as a Serviceの略、パースまたはパーズ）と呼ばれてるクラウドのジャンルの一つで、アプリケーションを動かす場所を提供するクラウドです（よく聞くSaaSはサービスを提供するクラウド、PaaSはプラットフォームを提供するクラウド）。Google App EngineもPaaSです。

Google App Engineはjava、Pythonで出来たアプリを動かすためのPaaSなのですが、今回使うHerokuはRubyで出来たアプリを動かすためのPaaSです。PaaSと言ってもそのアプリが何の言語で出来てるのかによって、どれを使うのかが変わってきます。

Herokuを使えばRuby製のアプリを無料で公開することができます。今回やるのは静的ページですが、前に紹介したRuby製のCMS LokkaとHerokuの組み合わせを使えば無料で自分のブログを持てちゃいます。Wordpressとさくらの500円サーバでも十分安いと思ってたのに、Lokkaは無料なんて、すごい！このKUROIGAMENもLokkaとHerokuの組み合わせなので無料で運営しちゃってます。

Lokkaの他にもHappy1000Days!もそうだし、僕がやってる会社、合同会社フィヨルドのサービスもOSSとしてgithubに公開しているんですが、全部Rubyで出来てるので、それらもHerokuを使って無料で公開できちゃいます。

無料とは言っても、PaaSは重量課金です。転送量や使う容量、DBの容量が多い場合はお金を請求されます。まぁ、今回作るのは単なる静的ページなので、DBも必要ないし、そこまでPVもないと思うので「無料」と言ってしまいましたが、Herokuを使うのは一応自己責任で。

なんで静的ページなのにわざわざPaaSを使うの？

別に静的ページだったら広告やSEOのためのリンクが出る無料サーバーでいいじゃん、って思う方もたくさんいるかと思います。確かにそうです。ただ、自分の静的ページ置き場がPaaSって格好良くね？ってだけです。あと、広告も出ないし。

それと、Gitばっかり使ってるとFTPを使うのが面倒になってくるんですよね。バージョン管理されてないから怖いし。黒い画面をやってると、そっちの方が安心するんですよ。FTPってミスしそうで怖い。

あとは、これからKUROIGAMENでRubyで出来たアプリを公開するのにHerokuを使うことが多くなってくると思うので、その練習として静的ページをHerokuで公開するってのはちょうどいい課題かなぁ、と思って選んだってところです。

Herokuに登録

まずはHerokuに行ってユーザー登録をします。なんだかダークでアングラ臭のするサイトかもしれませんが、よく見ると色んなところでデザインが凝っててなかなか参考になります。「Sign Up」ボタンをクリック。

入力するのはメールアドレスだけ。Herokuから届いたメールを開くとURLが載ってるのでそれをクリック。移動したページでPasswordを二回入力するだけで登録完了！なんて楽ちん。この手軽さは自分でサービスを作るときも見習いたいですね。

herokuコマンドをインストール

続いて、Herokuを使うにはherokuっていうコマンドを使えるようにherokuコマンドをインストールする必要があります。黒い画面で「heroku XXXXX」って感じでコマンドを打って、ローカルで作ったLokkaやHappy1000Days!や今回の静的ページをHerokuサーバーに送ります。FTPの代わりにHerokuコマンドを黒い画面で使う、って感じです。

herokuコマンドのインストール方法は簡単。HerokuのトップページのCreateのところに書いてありますが、「sudo gem install heroku」っていうコマンドを打つだけ。HerokuはRubyのアプリ置く専用のサーバなので、herokuコマンドもRubyのGemなんですね。では、早速。

$ sudo gem install heroku

はい、出来ました。GemのインストールもHmebrewでやる「brew install XXXX」と同じで依存しているGemも一緒にインストールしてくれます。今回はherokuっていうGemをインストールした訳ですが、それが依存する色々なGemも一緒にインストールされました。

静的ページを動かすためのアプリをgit clone

一旦ここでHerokuの作業は中断。Herokuで公開する静的ページの作成に入ります。

@komagataさんが作ってくれたHerokuで静的ページを公開できるアプリ（と言ってもファイル数の少ないシンプルなものです）を毎度おなじみ、Githubからgit cloneします。今回Herokuにアップする静的ページを公開するアプリの名前を「kuroigamen-sandbox」と名付けました。

ちなみにこの「kuroigamen-sandbox」はSinatraっていうRubyのフレームワークで出来てます。Railsよりもお手軽なフレームワークで、ちょっとしたものを作るのに便利ってことをよくRubyをやってるエンジニアさんから聞きます。そうそう、LokkaもSinatraで出来てます。

ちょっと、cloneする前に。

僕はいつもアプリやサイト開発は「/Users/ユーザー名/Sites」（Finderで見ると「ユーザ/ユーザー名/サイト」とカタカナ表示されてる）のディレクトリで作業をしていますので、これからKUROIGAMENでもそうしていこうと思います。なので、

$ cd Sites/

と、「Sites」ディレクトリに移動。

今回のアプリのページはここです。今回の取ってくるリポジトリは「git@github.com:machida/kuroigamen-sandbox.git」。

$ git clone git@github.com:machida/kuroigamen-sandbox.git XXXXXX

「XXXXXX」に入れた名前がフォルダ名になって、その中にkuroigamen-sandboxの中身が入ります。僕の場合は「machida-sandbox」っていう名前で作りました。

はい、出来ました。

公開する静的ファイルをアプリに入れる

では、cloneしたアプリの中身を見てみましょう。

このpublicフォルダ以下に公開したい静的ファイルを入れます。

こんな感じで「index.html」と、フォルダ「stylesheets」を作って、その中に「style.css」を入れて、

こんな静的ページを作りました。これで公開する準備はOK。

Herokuにリポジトリ置き場を登録

ではでは、またHerokuに戻ります。

先程herokuコマンドをインストールしてherokuコマンドが使えるようになったので、それを使って今回作る「sandbox」を公開する場所を登録します。

ここで一旦、HerokuとGithubは似てるので、両方の似たところと違うところを並べてHerokuを説明してみたいと思います。

HerokuもGithubもgitのリモートリポジトリを作るサービス。
ローカルリポジトリをリモートリポジトリであるHerokuまたはGithubにpushすることで、自分のマシンでゴニョゴニョやってたことを外に出すことができる。
どちらもリモートリポジトリなんだけど、Githubの方はそこにpushすることでソースが公開される。
一方、Herokuの方はそこにpushすることでアプリが公開される。つまり、URLを持ったサービスとしてアプリが立ち上がる。

という感じで、外のリポジトリにpushするのは一緒なんですが、目的が違うんですよね。

では、早速Herokuにリモートリポジトリ置き場を作りましょう。

まずは黒い画面でローカルの「machida-sandbox」へ移動します。僕の「machida-sandbox」は「Sites」の中にあるので、

$ Sites/machida-sandbox

で、移動完了。

いよいよherokuコマンドの登場です。トップページ左上のCreateってところにあるコマンド、「heroku create XXXX」と打つだけ。このXXXXには好きな名前をつけることができ、それが公開されるときのURLにもなります。例えば、「heroku create shimuraken」と打ったなら、そのHeroku内のリポジトリに置かれたアプリは、http://shimuraken.heroku.comというURLで公開されます（その後で自分で取得したドメインに切り替えることも可能です）。今回僕は「machida-sandbox」という名前のリポジトリ置き場をHerokuに作ります(※Heroku上では同じ名前のものは作れないので、これを読んでる皆さんは別の名前で登録してください）。

$ heroku create machida-sandbox

すると、

Git remote heroku added

って表示が出ました。これでHeroku上のリモートリポジトリに「git push」が出来るようになった、ということです。

もしかしたら、最初の一回目はメールアドレスとパスワードを聞かれるかもです。ちょっと前のことなので忘れてしまいました…。聞かれたら、入力してください。あと、これでいい？みたいなことも聞かれるかもです。

ブラウザでHerokuのページの右上にあるMy Appsをクリック（もし表示されてなかったらHerokuにログインしてから）。ここにHeroku上の自分のリモートリポジトリの一覧が表示されます。先ほど作った「machida-sandbox」が表示されました。

「machida-sandbox」をHerokuにデプロイ。

さて、作った静的ページをHerokuにアップします。人が見れるところにアップすることをエンジニアはデプロイって呼びます。デプロイ、なんか格好いいですね。「やっとバグが直ったし、テストもOKでした。ではでは、本番にデプロイしまーす。」みたいな感じで使います。

ファイルを一気に追加してみましょう。

$ git add *

強引ですが、これで一気にディレクトリ「machida-sandbox」以下のファイルを追加できます。追加の作業が終わったらコミット。

$ git commit -a -m"added files"

トップページの左上に「deploy」っていうのがありますね。ここにデプロイの方法が書いてあります。書いてある通りにやってみましょう。

$ git push heroku master

これだけ。コミットしてこのコマンドを打つだけでOKなんですよね。FTPより全然楽チンだし、安全。

これを打ったら、

The authenticity of host 'heroku.com (75.101.145.87)' can't be established.
RSA key fingerprint is 8b:48:5e:67:0e:c9:16:47:32:f2:87:0c:1f:c8:60:ad.
Are you sure you want to continue connecting (yes/no)?

って聞かれるかもです（すいません、ちょっとこの辺は環境によって変わるかもで、そこは未確認）。もし聞かれたら、「ここ信用できるの？ここに繋いじゃっていいの？」って言う感じですね。答えは「yes」ですので、yesと打ってEnterキー。僕の場合、ちょっとその画面のままかなり長時間放ったらかしにしてしまったので、エラーが出てしまいました。もう一回、「$ git push heroku maste」を打ったらうまくいきました。