Ruby
JavaScript
GitHub
Heroku
RubyOnRails

WebサイトをHerokuで公開してドメイン取得とSSL化までの全手順

2018/6/4 公開していたサービスはAPIのリクエスト数上限を超えたため、停止いたしました

ここでは元々作成したサイトも紹介していましたが、F5攻撃を受けたことでAPIのリクエスト数上限を超えてしまいました。
元々勉強の為に作成した物だったのでこのまま対策方法を学ぶのも時間が掛かりそうでしたのでサービスは終了させました。
今後のために対策方法がわかれば、次のサービスを公開する際に一緒に共有しようと思っています。

ここには公開手順のみ残して置きますのでよければ参考にしてください。


本文

自分で作ったwebサービスを公開したことがなかったので、知見を広げる為にもやってみようと思いました。

同じように、知識が浅い人、作ったサービスを公開したいけど何をすればいいかわからないという人の参考になればと思います。

公開手順

GitHubに登録

もしかしたら最初にやるべき事なのかもしれないですけど、ノウハウがわからないのである程度コーディングが終わって、公開しようと思った所で登録する事にしました。

リポジトリを作成する前に学生であれば、無料でPrivateリポジトリを作成できるので、「GitHub Education」の申請をします。
通常Privateリポジトリは有料で、「Public」にしてしまうとソースコードが公開されてしまいます。

GitHub Education

まずは下のリンクから「Join GitHub Education」を選択

https://education.github.com/  

スクリーンショット 2018-06-01 19.23.15.png

情報入力

職業、アカウントの用途を選択
スクリーンショット 2018-06-01 23.00.29.png

続いて名前、メールアドレス、学校名、卒業年、GitHubをどう使うかを入力。
おそらく英語での入力が必須です(日本語では試していません)、最後の項目に関しても2行程度しか書かなかったのでそんなに重要じゃない気もします。

スクリーンショット 2018-06-01 23.10.20.png

ここでは学校のメールアドレスを選択する必要があります。
もし学校のメールアドレス以外で登録してしまった場合は「Personal settings」から追加できます。
スクリーンショット 2018-06-01 23.16.34.png

入力が終わって、「Submit Request」を押すと申請完了です。
結果はメールで送信されます。(自分は数分できましたが、もっとかかる場合もあるみたいです)

申請が通ったら今度こそリポジトリを作成します。

リポジトリ作成

GitHubにログインして、リポジトリ一覧画面からnewを押す。
スクリーンショット 2018-06-01 19.01.50.png

1.リポジトリ名を入力
2.公開設定を選択(GitHub Educationに登録したので「Private」が選択可能になってます)
3.「Create repository」

スクリーンショット 2018-06-01 19.04.59.png

ローカルで作成したものをリポジトリに登録

スクリーンショット 2018-06-02 0.08.49.png

まず1をコピーし、ターミナルで下記の内容を入力

git remote add origin (コピーした1の内容)
git push origin master

これでリモートリポジトリのmasterブランチが作成され、
ローカルのmasterブランチが登録されます。

Herokuでアプリを公開

今回はHerokuを使ってアプリを公開します。
Herokuってなに? と思った方は是非下記の記事を読んで見てください。

https://www.sejuku.net/blog/7858

会員登録

Herokuにアクセスして会員登録します。

https://signup.heroku.com/login

スクリーンショット 2018-06-02 1.12.03.png

情報を入力したら、確認のメールが届くのでそこからパスワードを登録しましょう。

heroku toolbaltインストール

登録が終わったら、ターミナルでHerokuの操作ができるように「heroku toolbalt」というツールをインストールします。

brew install heroku/brew/heroku

ターミナルで上記のコマンドを入力するか、下記のURLからパッケージ版をダウンロード&インストールできます、特にどっちから入れても問題はないです。

https://devcenter.heroku.com/articles/heroku-cli

Heroku用にPostgreSQLをインストール

ローカルではMysqlを使っていましたが、HerokuではPostgersを使うようなのでGemfileに下記を追加
group: :productionはローカルでは使わないようにするためです、元からPostgresを使っている方には不要な作業です。

gem 'pg', group: :production

追加したらbundle install

bundle install

Production(本番環境)でProtgreSQLを使うためにconfig/database.ymlを少し変更。
下記のコードを追加します。

config/database.yml
production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5

GitHubにpushするのを忘れずに。

Herokuに公開

いよいよアプリを公開していきます。

まずはターミナルで下記を入力しHerokuにサーバーを作成します。

heroku create (サーバー名)

サーバー名はなんでもいいですが、アプリ名と統一するとわかりやすいですね。
確かここでHerokuの会員情報を求められるので入力しましょう(スクショ撮り忘れた)

作成したら、下記のコマンドでデプロイします。

git push heroku master

デプロイが完了したら、マイグレーションもします。

heroku run rake db:migrate

マイグレーションが完了したら、下記のコマンドでアプリが開けます。
実行したらブラウザで確認しましょう。

heroku open

サーバーアップグレード

アプリの公開自体は無料で可能ですが、
今回はサーバーを有料版にアップグレードします。

無料版と有料版の違いは下記の記事で確認できます。

Heroku 運用検討

https://qiita.com/RYT/items/77b77e3b0e4f88774ef3

まずは、支払い用のカード情報を登録します。

https://dashboard.heroku.com/account/billing

登録したら、画面右側の1→2のダッシュボードを選択して該当のアプリを選択。
スクリーンショット 2018-06-02 2.05.07.png

詳細画面に進んだら 「Dyno formation」の囲んだ所を選択します。
画像はアップグレード後のものなのですでに7ドルの表示が出ていますが、最初は0となります。
スクリーンショット 2018-06-02 2.09.06.png

Hobby Dynosの横のChangeを押します。
スクリーンショット 2018-06-02 2.12.10.png

今回はHobbyプランなので1,2と選択します。
スクリーンショット 2018-06-02 2.12.54.png

これでアップグレード完了です。

独自ドメイン設定

次はドメインを設定します。
Herokuでは何も設定しなければ https://〇〇.herokuapp.com/ とういうようになります。
スクリーンショット 2018-06-02 1.42.42.png

これを独自ドメインを取得して、変更します。

スクリーンショット 2018-06-02 1.44.39.png

ドメイン購入

今回は お名前.com でドメインを購入します。

https://www.onamae.com/

好きな文字列で検索して、購入できるかを確認します。
スクリーンショット 2018-06-02 1.47.35.png

すでに使われているものはチェックできません。
チェックしたら、購入しましょう。

(余談ですが、購入した翌日に500円割引キャンペーンがあったみたいで、1150円で購入したので後1日遅ければ約半額だったのにとショックでした。)

ドメイン設定

購入したドメインを設定します。

ターミナルで下記のコマンドを実行。

heroku domains:add www.(ドメイン名).com

そして「お名前.com」でも作業が必要です。

DNSの画面で以下を選択して「次へ」
スクリーンショット 2018-06-02 3.24.27.png

1をクリック
スクリーンショット 2018-06-02 3.28.49.png

進んだら下記のように、1を「CNAME」、2を「www」、3を「(アプリ名).herokuapp.com」と入力したら「追加」
スクリーンショット 2018-06-02 3.32.36.png

これでしばらくたてば設定したドメインから接続できます(数時間かかることもあるみたいです)

SSL化

ドメインが反映されて最初に気になったのがこれ

スクリーンショット 2018-06-01 11.36.12.png

かろうじてhttpとhttpsが何なのかを知っていましたが、証明書だとかその辺の知識が全くないので、ここが一番苦労しました。

調べてみると、httpsに対応させるには証明書を購入して、サーバーに上げて... 等と結構めんどくさそう、しかしHerokuでは、(上で設定した)Hobbyプラン以上なら無料で(サーバー代は掛かる)SSL化できるとのこと。

スクリーンショット 2018-06-02 3.48.43.png
スクリーンショット 2018-06-02 3.48.56.png
スクリーンショット 2018-06-02 3.49.11.png

調べてみると「settings」から上記の手順だけでSSL化できるようだったが、何時間たっても変化なし、そこでもう少し調べたが、ここで古い記事を読んでしまったせいでさらに苦労してしまいました。
今は証明書の発行も不要で全部Herokuがやってくれるが、読んでいた記事の当時は証明書は自前で更新を自動でやってくれる、無料なのは「Let's Encrypt」というところで証明書を無料で取得できるからだったみたいで、証明書周りの操作を試しても数日間うまくいかない。
調べても証明書の取得がどうとかいう2016年頃の記事ばかりだったが、違うやり方を発見。

https://medium.com/indies-band/heroku-%E3%81%8A%E5%90%8D%E5%89%8D-com-%E3%81%A7-ssl-%E9%80%9A%E4%BF%A1%E3%82%92%E8%A1%8C%E3%81%86-1d08a94c3c00

heroku certs:auto:enable
heroku certs:auto

とりあえず上記のコマンドを実行。
そして下記からPointDNSをインストール。

https://elements.heroku.com/search/addons?q=PointDNS

スクリーンショット 2018-06-02 4.01.49.png

インストールできたらダッシュボードから選択。
スクリーンショット 2018-06-02 4.03.14.png

ここで「Alias」「Cname」が最初は〇〇.herokuapp.comとなっているので下記のように書き換えます。
スクリーンショット 2018-06-02 4.06.33.png

これでしばらくしたら...
スクリーンショット 2018-06-02 4.09.56.png
できました!

正直ここに関して理解できていないので間違ってたら指摘お願いします。
実際にこの手順でどのタイミングでSSL対応したのかも確信がないので、余計な作業も含まれてる可能性があります。

公開完了!

以上が公開までの手順でした!
この後にGoogleの検索にヒットする為にした設定もまとめようと思ったのですが、これはまた後日にまとめます。

最後に

プログラミングを勉強してるけど、公開の仕方に関する知識がなく、中々動けない人も一定数はいると思うので、これを読んで具体的に何が必要かがわかって、公開してみようと思ってもらえれば幸いです。