【忘備録】静的ページをどこにホスティング(公開)するかで悩んだこと、やってみたこと【AWS or GitHub pages】

投稿日:2020-10-17



ナカジ(@cp_nakajun)です。

今回は自分の「忘備録」的な感じです。

前提として僕はエンジニアではありません。

「GitHub」と「AWS」について書きますが、あくまでも知識も経験も低い、興味があるだけの僕が試してみた所感として書きます。

さて、今回「どんなことをしようとしてたか?」ですが

  1. この[creative-plus.net]以外に持っているが今使っていないドメインの「休止中」静的ページがある
  2. そのページはテスト用にも使っていた安価なレンタルサーバーに置いていた
  3. そのレンタルサーバーの更新のタイミングがきた。でも「辞めようかな」と思う
  4. AWSに興味がある。テストのファイルも含めてまるっとAWSに移ろうかな、と考える

今考えると、もともとAWSに興味があったとはいえ、なんでその程度の用途で「AWSトライしようかな」となったのが自分でバカっぽく感じますが

結果的にAWSで静的ページを公開するところまでは経験できたから良かったとしてます。

(僕だけ?AWSって初心者は難しいよね?)

AWSで静的ページを公開する方法

やりたいことは「独自ドメイン」と「https化」が必須でした。

ざっくり手順としては

  1. AWS S3 BacketをWeb公開
  2. 独自ドメインでアクセスできるようにする
  3. ACM(Amazon Certificate Manager)で証明書を作成
  4. Amazon CloudFront でルーティング

という流れになります。

実際の設定方法については僕が参考にさせて頂いたものをご紹介いたします。
(先頭の数字は上記のリストとの対応です)

[1]:AWS S3で静的Webページをホスティングする
[1][2]:独自ドメインを使ってAmazon S3で静的Webサイトをホストする
[3][4]:S3を最速でhttps化する手順と全設定項目

また、S3 Backet以下のディレクトリもindex.htmlを参照させる為の設定は

CloudFront に S3 bucket のサブディレクトリパスのコンテンツを参照させる

を参考にさせていただきました。

ここまでで僕は無事にAWSで静的ページを公開することができました。

しょーもない所感ですが、さすがAWS!

表示が速くてちょっとびっくりしました。

あくまでも体感ですが…レンタルサーバーはもちろんGitHub Pagesよりも速く感じてささやかな感動がありました。

ここで僕のニーズに対して問題がありました。

それは先に書いた「今使っていないドメインの「休止中」静的ページ」において

「******.com」でアクセスしたかったのですが

AmazonのDNSサービス「AWS Route 53」で独自ドメインをホストしていない場合、これができないということが判明しました。

結局 GitHub Pages に落ち着く

結果的にこうなりました…

すでに自分のGitHubアカウント(アカウント名.github.io)にはメインのドメインを当てはめています。

これは「******.net」でも「www.******.net」でも同じページにアクセスする設定ができています。

ためしに知ってるレベル(メインのドメインを設定した時のやり方)で別のドメインを自分アカウントのリポジトリに割り振れるのかやってみたのですが上手くいかなかったので調べると

【Organization】なるものを知りました。

Organization=組織です。

おそらく複数人が関わるようなプロジェクトの為のアカウントのようです。

個人アカウントをベースに管理するアカウントなので、さしずめFaceBook Pageのようなイメージでしょうか。

設定など参考にしたページは以下です。

GitHub Pages について
githubのorganizationアカウントの運営について
複数の独自ドメインをGithub Pagesで運用する方法&.tokyoドメインをとった

これのおかげで僕の目的は見事に解決!!

ありがとう!GitHub!

まとめ

今回の僕の用途ではAWSへ回り道してからGitHub Pagesに落ち着く結果となりました。

GitHubの規約に抵触しない用途や規模のサイトやページであれば設定もそこまで複雑ではないのでとてもありがたいサービスだと思います。

また、AWSは僕にとってはまだまだ理解しておらず複雑さを感じますが、今回触れてみることができたのは良かったと思いますし

少しずつでも理解を深められれば出来ることは無限大のプラットフォームなのは間違いないと思ってます。

今回「表示速度が速い」と感じただけだったですが、これだけでも次へつなげたいと思うモチベーションになりました。

最後に以下のような記事も見つけたので残しておきます。

静的ページを公開する時 EC2 と S3 どちらが安いのか

おすすめのクリエイティブ・コーディング関連カテゴリー

クリエイティブコーディング系 講座


ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します