ウェブサイトを作る

会社のIT部門部門に異動してもう６年になるけど、いまだにミーティングで知らない言葉が出てくることがあってググると、そういう言葉はだいたいAWSのサービスの名前なので、そのあたりの固有名詞を実体験をともないつつザッとさらっておきたいと思ったので、簡単なウェブサイトを作ってAWSでホスティングすることにした。

簡単と言っても色々あるが、クラッシックなテキストベースのウェブサイト。


ウェブサイトの作成

ホスティングする何かが必要なので、最初にウェブサイトの作り方をUdemyで学ぶ。

HTML、CSS、JavaScriptのフロントエンドとバックエンド、DB、セキュリティ対策、その他諸々のチュートリアルを土日の空き時間にやっていく。一通り終えるとチュートリアルの開始から３ヶ月くらい経過していた。

その後ウェブサイトの作成開始。この作業も土日の空き時間にやっていく。土日しか作業をしないとあまり進まない。作成開始から２ヶ月後に最低限のブログ機能のみ備えたものが完成。

ウェブサイトの作成は１回でうまくいく作業がほとんどなくて、だいたいエラーが出て、ググって、stack overflowにたどり着くもよくわからず、結局公式ドキュメントを読むことになることが多かったが、最初から公式ドキュメントを読むということは、なぜかしない。


サーバー

だいたい完成したのでようやくAWSを覗いてみたらAWSはけっこう難しかった。

ウェブサイト作成のチュートリアルを始めてから既に５ヶ月、さらに何日、何週間、何ヶ月かかるかわからないことにチャレンジする気は起こらなかったので、他にもっと簡単な方法はないかと思い結局Herokuを使うことにした。

当初の目標はウェブサイトを作ることではなくてAWSを何かしらザッと使うことだったんだけど、考えてみればインフラを触ってみたいという事だったのにアプリケーションを作ることを5ヶ月もやっていた。しかしホストするものがなければインフラを触りようがないような気がするので、仕方がない。

Herokuはかなり簡単で、Herokuに決めてから、作業開始から３０分後にはデプロイ出来てとりあえずサイトにアクセスできるようになった。


ドメインの購入

自分の好きなURLを設定する。

"カスタムドメイン"などの単語でググってお名前.comへ。希望のドメインが購入可能か調べて購入する。ここはあまり問題にならなかった。


Heokuにドメインを設定

Heokuのコンソール > Settings > Domains > Add domainでドメインの登録をする。ドメインを登録するとDNS Targetが生成されるので、これを次のステップで使う。自分はwww.をつけずにドメイン名だけで登録したら動かなかった。www.か、サーバー指定のホスト名をメイン名をドメイン名の前につける必要があるとのこと。


お名前.comでDNSレコード設定

ドメインとDNS Targetを紐づける作業。

お名前.comのTOP > ご利用中のサービスから対象のドメイン名 > DNSレコード > 設定 > 次へ。

するとDNSレコードに関するメニューがたくさん出てくるので、DNSレコード設定を利用するの設定ボタンをクリックする。少し下にスクロースするとDNSレコードの登録フォームがあるので以下のように入力。

  1. ホスト名: www
  2. Type: CNAME
  3. TTL: 3600 (そのまま)
  4. Value: ここにHerokuのDNS Targetを入力

入力したら、確認画面へ進む > 設定する

Chat GPTによるとTTLはレコードがキャッシュされる時間らしく、頻繁に変更するようなサイトでは短め、そうじゃない場合は長めでいいとのこと。自分の場合は長めでいいと思うけど、変更せずにデフォルトの3600のまま登録した。一旦ここまでくるとHTTPであればカスタムドメインでウェブサイトが表示できるようになっている。


HerokuのACMでHTTPS化

HTTPS化する。普通、HTTPS化する場合はSSL証明を発行してもらう必要があり、自分はお名前.com経由で発行しようと思って手続きを進めると、26,400円＋サービス維持調整費として23%の32,472円かかることがわかった。けっこう高い。サービス維持調整費は物価に応じて変動する追加料金らしい。

無料でできないのか調べるとLet”s encryptという無料のSSL証明があり、普通これを使うとのこと。

しかし、HerokuはACMという仕組みでLet's encryptを使って証明を自動で出来るのでわざわざ自分で作業をする必要がないとのこと。

ただしBasicプランでは対応していないため、Standardプラン以上の契約が必要っぽい。Standardプランでも26,400円＋サービス維持調整費よりは安いような気がするし自分で一つ一つ設定するよりも簡単そうなので、Standardプランに変更してHerokuのACMを使うことにした。

Heokuのコンソール > Settings > SSL Certificates > Configure SSLでACMを選んで次へ。


Heokuの問題点

Herokuを使っていると以下の2点がとても気になる。

  1. Standardプランではジャパンリージョンが選べないのでレスポンスが悪い
  2. Standardプランのコスト

Standardプランは3500円/月くらい。けっこう高い。簡単で、楽なのは良いんだけど、一度動くようになるとレスポンスを改善したいし、月額料金は抑えたい。

Herokuの代替のものを探すとFly.ioが良いらしい。ここでもAWSを使わず。


Fly.ioへ移行

Fly.ioに移行する。ジャパンリージョンが選べて、月額料金も安い。最小構成で5ドル/月程度とのこと。

HerokuのときはDockerを使っていなかったけど、Fly.ioではDockerfileが必要。

Fly.ioでデプロイ出来たら、DNSレコードを更新する。Fly.ioのレコードを追加し、Herokuのレコードを削除なり無効化。

Heokuのコンソールでdynosを0にしてHeroku側のホスティングを止めて移行は完了。

Github Actionsに登録してgit pushで自動でfly deployされるように設定。公式ドキュメントの通り進める。

Fly.ioでとりあえず満足している。


参考

お名前.comサービス維持調整費: https://help.onamae.com/answer/20600

Heroku ACM: https://devcenter.heroku.com/articles/automated-certificate-management

Let's encrypt ACMEクライアント: https://letsencrypt.org/ja/docs/client-options/

CD with Fly.io and GitHub Actions : https://fly.io/docs/launch/continuous-deployment-with-github-actions/