デザイナーがHerokuでプロフィールページを実装するまで【ドメイン発行料以外0円】

今回ポートフォリオサイト、を作る前のプロフィールサイトを独自ドメイン+herokuで作成してみました。

運用コストについては、独自ドメインを除けば0円で作成しています(制約あり)
勿論、Herokuの仕様変更や過アクセスによる課金リスク、連携サービスに不具合は発生する可能性はあるので、実装・利用は自己責任でお願いします。
各項目の末行に参考リンクも入れているので合わせてお読みください〜b

用意するもの

・herokuアカウント
・お名前.comドメイン
・ターミナル
・git環境 or Dropbox環境

Herokuでサーバーを作成

・Herokuでアカウント登録 https://www.heroku.com
・Create New App
 └ Appnameはお好きに https://{your-app-name}.herokuapp.com/ という感じになる
 └ 国はUnited Statesでおk
 └ PlanはFreeを選択
・Herokuは容量500GB、Appがひとつ、月1000時間起動で使用可能。
・一応基準が超えそうな時はメールでアラートが来るらしいが、課金したくないなら無料枠の情報は随時ウォッチした方が良い
・アドオンを使う場合にクレジットカードの登録が必要。今回はアドオンを使うので登録必須
https://qiita.com/RYT/items/77b77e3b0e4f88774ef3

独自ドメインを設定する

お名前.comで設定
・HerokuのSetting画面のDomainsで設定したいドメインを設定
ルートドメインの設定はHerokuの仕様上できないのでwww.yourdomain.comなどサブドメイン付きで設定(やり方は後述)
・お名前.comでHerokuのドメイン作成で設定されたDNS Targetを設定
・www.montblanc.design / CNAME / DNS target で設定する
・数十分〜数時間で定着するはず
https://qiita.com/icb54615/items/76acf2a1ea151535c5dc

ルートドメインにアクセスできるようにする

CloudFlareで実現可能
・CloudFlareでアカウントを作成。作成時にドメインの設定をするので設定したいドメインのルートドメインを選択する
・DNSの画面でNameをルートドメイン、Valueに上記で設定したDNStargetを入れる
・お名前.comで ネームサーバーの設定 > ネームサーバーの変更でHerokuで使用しているドメインにチェックを入れた後、他のネームサーバーを利用タブで Cloudflare Nameservers にある2つのDNSをプライマリ、セカンダリネームサーバーに変更する
・様子を見る。Herokuのドメイン登録時に比べて時間がかかるので落ち着いて設定する
http://yuji-shimoda.hatenablog.com/entry/2015/01/17/171253

ドメインを常時SSLにする

・これもCloudFlareで可能
・HerokuでSSL設定をする場合、有料アドオンを使うか無料SSLをターミナル上でチョチョイする必要があるので、デザイナーには不向きかも。
・Crypto画面のSSLで設定可能。
・Flexibleが安定している?細かい仕様は下記URLを参考(外部のSSLをCloudFlare上で登録することも可能)
・SSLへリダイレクトもできそうだけどめんどそう+Google問題は最低限クリアしているので一旦無視
https://vanshiptrip.caprug.com/20170219/5418/

常時Appsが稼働している(常にアクセスできる)状態にする

Freeの場合、30分アクセスがないのSleepになる。Sleep後のアクセスには体感20秒くらいかかってしまうので、常時接続が望ましい
・常時起動状態を実現するため、定期的にPing送信ができるHerokuアドオンの「New Relic APM」を使う
・Wayne – Freeで使用可能
・SYNTHEETICSでPing送信をしたいURLを選択する
https://blog.seiyamaeda.com/9207

デプロイする方法を選択する

・HerokuのGit、GitHub、Dropboxを使うか選択できる
・実装方法は各々方法が書いてあるのでGit以外割愛
・Heroku login でターミナル上でHerokuにアクセス
・あとはターミナルでリポジトリをCloneするのとあまり変わらない
・ログインしていれば、SourceTreeでもGitを見れる。URLはHeroku内のSetting > Heroku Git URLで確認可能

BuildPacksを追加する

・Appsを作っただけではただのサーバーなのでソフトウェアをBuildpacksで設定する
・今回はphpを使うので、SettingsのBuildpacksからphpを選択する。URLからでもインストール可能
・静的HTMLのみでの運用予定なら必要なし

あとはコーディングしてそのままコーディングしたHerokuのmasterリポジトリにpushすると自動的にデプロイされる。
自分のみの運用なので、テスト環境はローカルで運用。
Appsの追加+Pipelineを追加するとStagingなどのテスト環境も作成可能、らしい。

まとめ

とそんな感じでした。
やってみて感じましたが、タダより高いものはないという感じ。。
サーバー落ちリスクなしでSSL常時接続、ルートドメインも楽々反映は500〜600円で課金すればさくらのスタンダードプランで全部解決するので。。。

とはいえ、今回は自分でサーバーを立ててデプロイするというのが目的だったので色々勉強になりました!!
サーバー関係は今まで最も勉強できていない箇所なので、今回のポートフォリオサイト作成の機で色々学びたいと思います〜b