でろぐのロゴ 豚さんブーブー

herokuに独自ドメイン当ててホスティングっぽく使ってみる

2013年12月19日 (木)

どうも出口です。
こないだ作ってたアプリのサイトのドメインを飛ばしちゃいまして、サイトがなくなってたままになってたのでアプリの更新を機会にサイトも新しいドメイン取り直して運用する事にしました。

そんで、いつものようにただ作るだけじゃ面白くない、どうせ自分でやる事なんやし今までやっていない事をやろうぜ病が発病したので、興味を持ってたもののやった事のない「heroku」を使ってやろうって決めました。
herokuを知らない人に簡単に説明しますと、herokuはアプリ開発のためのプラットフォームで、サイトの公開もできるっていうようなものです。
詳しくはこちら

Herokuは元々Ruby on Railsを対象とした、Amazon Web Services(AWS)のIaaS上に構築されたPaaSで、デプロイには分散リポジトリのGitを利用するなど、Webアプリケーションの開発から公開まで非常に簡単にできる優れたプラットフォームです。

FAQ:Herokuってなに?メリットは?

要はGit使ってファイルをherokuにデプロイ(アップロードみたいなもん)して公開みたいな感じ。
われながら説明ゆるすぎるけどw

で、こんかいはそのherokuに独自ドメインを当てて運用しようっていう感じです。
今回のサイトは基本ペライチの紹介ものなので、CMSとか全然必要ないし好きな感じでHTMLとCSS突っ込めばいいだけのものにしてるし、ベースも面倒やからFoundationをそのまま使ってます。
なのでファイル構成も全然複雑じゃないので、そのままGit管理でやっちゃおうっていう、テストとしてはまあいい環境かなと思います。
入門編にぴったりな感じですね。

では実際の手順です。

もくじ

  1. 作る
  2. ドメインを取得する
  3. Gitのリポジトリを作る
  4. herokuにサインアップ
  5. herokuでアプリの作成
  6. herokuにデプロイ
  7. herokuのアプリドメインを独自ドメインのDNSに設定する
  8. 確認ウェーイ♪ ヽ(;0w0)ノ
  9. 公開後の運用

作る

公開するものなのでまずは中身がないとね。
ここはそれぞれお好きなようにどうぞ。
僕の場合は今回はFoudation使って1ページだけなのでさくっと作った感じですよ。
注意点としてはindex.phpがないと後でエラーになるらしい(実際そこで詰まった)ので、空のindex.phpを用意しておきましょう。
あと、後述のherokuドメインと独自ドメインで同じ内容になるのでcanonicalで重複対策しておくとかも必要かと。

ドメインを取得する

今回は独自ドメイン当てる事も目的なのでドメインを取得しましょう。
ドメイン取得はどこでもいいですけど、あとでDNSいじらないといけないので、いじれるタイプのレジストラを選んだ方がいいかと思います。
僕はめんどくさいのでいつものムームーで。ムームーDNSあるし。

Gitのリポジトリを作る

サイト作ってドメインとったら、いよいよ公開の準備。
作ったサイトでGitリポジトリを作ろう。
コマンド打ってもいいけど、めんどくさがりなので今回はsoursetreeを使いました。
後ろでどう動いているか分かってれば別にCUIでもいいと思う派です。
作ったらaddしてcommitしときましょう。
バックアップもいるよねって人はGithubでもBitbucketでも使ったらいいんではないかと思いますよ。
無料というくくりでいえば、公開でいいならGithubでいいし、非公開にしたいならBitbucketでいいかと。
有料なら何でも好きなのでいいと思います。

herokuにサインアップ

で、やっとここからがある意味本編。
まずはherokuを使うためにherokuにサインアップです。

サインアップ

アカウントを作成したらローカルで作業ができるようにheroku toolbeltをいんすころーりします。

herokuでアプリの作成

いんすころーりんしたら、サイトに書いてあるように白い画面を開いて以下のコマンドを打つのです。

$ heroku login

メールアドレスとパスワードを入力してログイン。
白い画面からログインしたら、自動的にSSHの公開鍵がローカルに作成されてそのパスが表示されます。
あとはそのパスの場所にあるid_rsa.pubをテキストエディタで開きます。
herokuの管理画面のアカウントのところでSSH keysを設定する箇所があるので、そこに先ほどの内容をコピペしてAdd Keyで追加したら準備はおっけい。

SSH Keys

公開鍵設定後は、cdで作成したサイトのフォルダに移動します。

$ cd [作ったサイトのディレクトリ(ローカル)]

cdって打ったあとに作成したフォルダをドラッグすると簡単。

$ heroku create [app名]

herokuでappを作ります。
appで一つのサイトって考えると分かりやすいかも。

herokuにデプロイ

用意ができたので、ついにデプロイしちゃうよ。
以下コマンドを打つのです。

$ git push heroku master

Gitでブランチ作ってる場合はmasterの部分をブランチ名で。
まあブランチ理解している人ならいわれんでも分かっとるわいって感じやと思いますが念のため。

herokuのアプリドメインを独自ドメインのDNSに設定する

デプロイできたので、今度はDNS設定します。
DNS設定の画面に行く前に、herokuのダッシュボードにアクセスします。
入ると先ほど作成したappの名前があるので、そこで設定を確認します。

settings

ここにあるDomainsの項目にherokuドメインが設定されていますので、このドメインをコピペ

コピペしたドメインをDNSのCNAMEに設定します。
この時にwww付きのサブドメインで設定します。
サブドメインじゃない場合はお作法が違うようです。
今回はwwwでよかったので調べてませんので、おggrくださいませ。

ムームー側の設定

で、設定完了後はherokuダッシュボードのDomainsに独自ドメインを設定してaddボタンを押すだけ。
ここも多分コマンドでいけるけど、開いてるのでWebですませちゃおう。

herokuの画面でドメイン登録

確認ウェーイ♪ ヽ(;0w0)ノ

まずはherokuドメインを確認。
ダッシュボード開いてたらそっから確認でもいいし、「俺はコマンドを打って確認したいんや!」って人は以下のコマンドでもおk。チカライッパイエンターキーヲターンってしてください。

$ heroku open

確認して問題なかったら、独自ドメインをチェック。

公開後の運用

こんな感じで公開はかなりお手軽にできる。いい感じ。
で、ふと思ったのがこの後の運用はどうしたらいいんやろう?って部分。
実はここで詰まってたんですけど、$heroku createでapp作ったから、heroku xxxって感じでアプリに移動しないといけないのではって勝手に思ってました。
実際はそんな事なくて、

$ cd [作ったサイトのディレクトリ(ローカル)]

でローカルの作業領域に移動して作業を行ったら、Gitでcommitして

$ git push heroku master

でpushすればいいだけでした。
これでメンテも非常にお手軽ですね。

実際に使ってみたらかなり快適なので、チャレンジしてみようっていう人も結構簡単にできると思うのでおすすめです。

注意点
違う環境でherokuにデプロイする場合は、SSHの公開鍵の設定を忘れがちですねん。

Permission denied (publickey).

ってでたら公開鍵が設定してないよって証拠なので、

$ cd ~/.ssh

$ssh-keygen -t rsa -C "herokuのアカウントに使ってるメールアドレス"

っていうって公開鍵を作ろう。
できたらid_rsa.pubの中身をherokuの管理画面のSSH Keysに設定すればおk

で、今回作ったサイトがこちら

めもべび

こんな感じのサイトならさくっと出来てしまうわけです。
今回やるにあたって参考にしたgist。さすが。
Heroku導入メモ

シェアする