GitHubPagesとCloudflareを使用した無制限のスケールと無料のWebホスティング

私には、クライアントに莫大なお金を節約し、Webサイトを安全に保ち、バックアップが組み込まれている秘密があります。

秘密：私は彼らのウェブサイトを静的にします。 次に、GitHubで保存してホストし、Cloudflareを使用してHTTPS経由で提供し、高速化します。 私のクライアントは自分のドメイン名にお金を払うだけですが、それでも彼らは今までに交渉したよりもはるかに多くのものを手に入れます。

なぜ静的コンテンツなのか？

サーバーの処理時間がないため、静的サイトは非常に高速です。 また、静的アセットのコードベースをgitリポジトリにコミットすることで、変更をロールバックするだけで、以前のコミットに戻すことができます。 バックアップはgit pushアウェイであり、基本的にキャッシュからWebサイト全体を提供します。つまり、サーバーがリクエストを再度処理する必要はほとんどありません。

複雑なUIを構築しますか？

Reactやその類のようなフロントエンドフレームワークの出現により、HTML/CSSとJavaScriptだけで魔法のような体験を作り出すことができます。 ただし、バックエンドロジックをフロントエンドから分離する必要がありますが、RubyonRailsでさえAPIモードで出荷されるようになりました。

ウェブサイトの構築を契約するときはいつでも、静的サイトがクライアントのニーズを満たすのに十分かどうかを検討します。多くの場合、そうです。

私がどのようなユースケースを考えているのか疑問に思っていますか？ すごい！ 静的コンテンツを検討する場合のいくつかの状況について説明し、このアプローチによってユーザーとクライアントの両方の時間を節約できる方法を説明しましょう。

パンフレットウェアのウェブサイト

パンフレットウェアのウェブサイトは、ビジネスに関する情報を提供することを目的としており、生涯を通じて大幅に変更されることはありません。 このようなサイトでは、動的なアプリケーションは明らかにやり過ぎです。これらのサイトは何年もメンテナンスされておらず、更新があったとしてもごくわずかであるため、通常、ハッカーがハッキングするのは簡単です。

静的HTMLテンプレートは、対応するCMSテンプレートよりも大幅に安価であり、将来的に調整するのも簡単です。 このようなサイトの更新を依頼された開発者は、特定のCMSに関する専門知識を必要としません。 原則として、私は常にパンフレットウェアサイト用の静的Webサイトを作成しています。

ボーナス：中小企業は、定期的な毎月のホスティング料金を支払わないのが大好きです。 確かに、ホスティングは大きなコストではありませんが、クライアントはドメイン以外の費用をわざわざ支払う必要はありません。これは素晴らしいことです。

シングルページアプリケーション

最新のフロントエンドフレームワークに依存する素晴らしい、クールな新しいアプリを披露していますか？

アプリケーションはすでにほとんど静的です。 サーバー側のロジックを別のアプリケーションに分離するためにいくつかの追加の手順を実行し、Cloudflareのキャッシュからアプリを完全に提供するという利点を最大限に活用します。

アプリケーションはいつでも利用できます。

ブログ

これは難しい販売です。 静的なサイトをブログに採用できると人々に納得させるのは難しいですが、私を読んでください–私は深いところから離れていません。

ブログは、テンプレートでレンダリングされたコンテンツにすぎません。 各リクエストを解析して新しいページをレンダリングする本格的なアプリケーションは必要ありません。 静的サイトは、このユースケースに最適です。

Jekyllを考えてみましょう。 LiquidテンプレートとMarkdownコンテンツを提供し、それらを組み合わせて静的Webサイトにします。 オンザフライの処理は必要ありません。ブログは突然大幅に速く感じられます。

GitHubページはJekyllビルドをサポートしているため、このワークフローは特に役立ちます。 突然、ブログ投稿がプルリクエストで提供されるようになり、すべてのコンテンツがバージョン管理内に保存されます。 非開発者は、Stackeditを介して投稿を公開することにより、Markdownで投稿を投稿できます。

実際、私は現在Stackeditを使用してこの投稿を作成しています！

また、ブログの投稿にコメントが必要な場合、DisqusはJavaScriptのスニペットを挿入することで強力なコメントシステムを提供します。

あなたが読んでいるこのページもDisqusを使用しています。

GitHub Pages

GitHub Pagesは、プロジェクトページに対するGitHubの回答であり、リポジトリから直接静的Webサイトを提供できます。 GitHubページはカスタムドメインをサポートしているため、Gitから直接デプロイしてGitHubページで静的ウェブサイトを無料でホストできます。

GitHubPagesへのデプロイ。

十分に話して、それが実際に動いているのを見てみましょう！

私は先に進んで、パブリックAPIからパキスタンルピーの現在の為替レートを取得して表示する単一ページのReactアプリを作成しました。 これをGitHubPagesにデプロイしましょう。

まず、新しいGitHubリポジトリを作成しましょう。

GitHubページはgh-pagesというブランチから提供されるので、プロジェクト用に作成しましょう。

 $ git checkout -b gh-pages Switched to a new branch 'gh-pages'

そして、サイトを押し上げましょう：

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

これで完了です。 この時点で、Webサイトはhttps://amingilani.github.io/price-checkで利用できるようになります。

注意すべき重要なこと：

• GitHub Pagesは、プロジェクトのgh-pagesブランチでindex.htmlファイルを提供します
• ウェブサイトはUSERNAME.github.io/REPOSITORY-NAMEで提供されています

ドメイン名のカスタマイズ。

GitHubからサイトを提供することは問題ありませんが、適切なWebサイトにはカスタムドメイン名が必要です。 幸い、GitHubを使用すると、独自のドメインをパーティーに持ち込むことができます。

まず、特別なCNAMEファイルを作成し、そこにドメイン名を配置しましょう。 これにより、GitHubはリポジトリにルーティングするドメイン名を知ることができます。

 $ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...

次に、サブドメインのCNAMEをUSERNAME.github.ioにあるGitHubのDNSにポイントします。

注意：これをapexドメインに使用しないでください！ ドメインのルートにCNAMEレコードを追加すると、 MXレコードとTXTレコードが無効になります。 これはサブドメインにのみ使用してください。 Apexドメインについては後で説明します。

この時点で、当社のWebサイトはHTTP上のカスタムドメインで実行されているはずです。

注意すべき重要なこと：

• デフォルトの*.github.ioドメインはHTTPSを介して提供されます。
• カスタムドメイン名は、安全でないHTTPを介して提供されます。
• メールを強制終了する場合を除いて、apexドメインでCNAMEレコードを使用しないでください。

GitHubページの制限：

• リポジトリのファイルサイズは1GB未満である必要があります。
• Webサイトのファイルサイズは1GB未満である必要があります。
• 1か月の帯域幅制限は100GBです。 これは後でバイパスします。

カスタムドメインとしてapexドメインを使用する

この制限を回避する最も簡単な方法は、 wwwをサブドメインとして使用し、すべてのHTTPトラフィックを頂点からwwwにリダイレクトすることです。 私の例では、 gilani.meをwww.gilani.meにリダイレクトします。これは、静的サイトを指しますが、簡単な方法で行うのは好きではありません。

本当にapexドメインを使用したい場合は、DNSプロバイダーでANAMEレコードの設定が許可されているかどうかを確認してください。 これらは、同じゾーンの他のレコードを無効にしないため、ドメインとAレコードを指すことができるため、 CNAMEレコードの（簡略化された）中間にあります。

ANAMEなし？ 最後のオプションは、これをサポートするDNSプロバイダーに変更することです：Cloudflareと入力します。 Cloudflareは、 ANAMEレコードに相当するapexドメインでのCNAMEフラット化を提供します。 次のセクションでCloudflareについて説明するので、今すぐ切り替えるのが最善です。

TLDR ： Cloudflareの無料DNSに切り替えて、apexドメインにCNAMEを設定します。 彼らはCNAMEを使って何か特別なことをしてそれを機能させます。

SSLとCloudflare

スノーデン後の時代へようこそ。 政府が認可したスヌーピングやハッキングに対する私たちの最悪の恐れはすべて確認されており、世界は転送中および保存中のデータを保護するためにスクランブルをかけています。

最新のWeb管理者は、混合コンテンツを使用せずに、少なくともSSLをWebサイトに提供することが期待されています。

グーグルクロームがプレーンなHTTPSウェブサイトを安全でないとマークし、グーグル検索がランキングでHTTPSウェブサイトをより好意的に支持し始めているところまで来ています。 フロントエンドを安全にするためのさらに多くの戦略については後で説明しますが、現時点ではSSLについてのみ説明します。

幸い、Let'sEncryptができました。

これは非営利で完全に自動化された認証局（CA）であり、管理しているドメインに対してプログラムで90日間の短期SSL証明書を発行できます。 使用するのは簡単です。 オープンソースです。 このプロジェクトは、MozillaやElectronicFrontierFoundationを含む多数の企業によって支えられています。

Cloudflareを有効に活用する

Cloudflareは、DNS、CDN、およびDDoS保護サービスです。

それはあなたのウェブサイトをキャッシュし、地理的に近くのサーバーからユーザーにそれを提供し、あなたのウェブサイトをより速くします。 Webサイトがめちゃくちゃ人気になったとしても、ほとんどのリクエストがキャッシュに到達し、サーバーに到達しないため、GitHubの100GBの帯域幅制限を下回るという追加の利点があります。

さらに、CloudflareはユニバーサルSSLと呼ばれるサービスを提供しており、CAパートナーから無料のSSL証明書を発行するため、HTTPSを無料で入手できます…永久に。

なぜCloudflare？

私はあなたが何を考えているか知っています：Gilani、あなたはちょうど私にLet'sEncryptがどれほど素晴らしいかを教えてくれました。 なぜCloudflareについて話しているのですか？ まあ、それはすべて単純さに帰着します。

精神的な演習として、世界中に複数のNginxキャッシュとリバースプロキシを設定し、それらすべてに有効なSSL証明書を与え、最も近い場所からユーザーのWebページにサービスを提供することを想像してみてください。

これにより、オリジンサーバーにSSL証明書がなくても、WebサイトはSSL経由で提供されますが、Cloudflareは、オリジンサーバーに配置してCloudflareのサーバーまでの接続を保護できる特別な自己署名証明書を提供します。 これはCloudflareが無料プランで提供するものであり、90日ごとに証明書を更新する必要さえありません。

フリーランサーとして、私は自分のビジネスのためにサイトをできるだけ早く立ち上げて実行したいクライアントを獲得します。 彼らは、セキュリティ上の懸念、最新のWebの問題、または転送中の暗号化を理解または気にかけていません。 一部のクライアントはドメイン名の概念を理解するのに苦労しており、「私のWebサイトを稼働させ続けるためだけに」15ドルの年会費を支払わなければならないときにそれを煩わしく感じます。 それで、彼らが無料ホスティング自体で実行される彼らのウェブサイトを保護するリバースプロキシのクラスターにお金を払わなければならない理由を彼らに説明してみてください。

CloudflareSSLの設定

もう一度手を汚しましょう。 最初に行うことは、Cloudflareを介してすべてのトラフィックをルーティングするように切り替えることです。

次に、Cryptoで、SSLレベルを「Full」に設定します。

「自動HTTPS書き換え」を強制して、混合コンテンツの警告を強制終了します。

この時点で、当社のWebサイトはHTTPとHTTPSの両方で機能します。 ドメイン上のすべてにHTTPSを強制しましょう。

全部できた。 私たちのウェブサイトは、Chromeで常に緑色の「安全」評価のHTTPSを介してロードする必要があります。

最後の言葉とセキュリティに関する考慮事項

上記で説明しなかったことがいくつかありますが、少し時間を取っていくつかの点を明確にしておきたいと思います。

この設定にはいくつかの明白なセキュリティ問題があること、つまり次のような安全なHTTPヘッダーがないことを指摘するでしょう。

• Content-Security-Policy ：ホストのホワイトリストからスクリプトとアセットをロードし、インラインjsを禁止することができます。
• X-Frame-Options ：Webサイトがiframeに読み込まれないようにします。

そして、あなたは正しいです。 GitHubページやCloudflareでさえ、HTTPヘッダーをカスタマイズすることはできません。 ただし、HTML metaを使用してCSPを設定できます。

これをWebページに挿入するだけです。

 <meta http-equiv="Content-Security-Policy" content="default-src https:">

ただし、現時点では、GitHubページにX-Frame-Optionsヘッダーを設定する実用的な方法はありません。つまり、攻撃者はWebページを特別に細工したiframeに読み込んで、XSS攻撃を仕掛けることができます。 ただし、専任の場合は、機密性の高いアクションごとにパスワードまたは2FAトークンの確認をユーザーに求めるか、認証されたリクエストごとにCSRFトークンを渡すことで、この問題を回避できます。

一部の人にとっての主な懸念は、GitHubの無料の公開リポジトリを使用することで、フォークまたはダウンロードしたい人なら誰でもWebサイトとソースコードを利用できることです。 ですから、ここでの懸念は見当違いだと思います。

静的コンテンツは、ユーザーに提供される前にスクリプトとしてコンパイルまたは処理されないという意味で、ソースコードではありません。 ユーザーがWebサイトを指すWebクローラーを実行した場合、ユーザーはWebサイトのまったく同じ静的コピーを取得します。 GitHubリポジトリでコードをホストすると、確かにWebサイトのコピーを簡単にダウンロードできますが、まだ公開されていないものは公開されません。

スケーリング、無制限のスケーリング

この記事で紹介するアイデアは、小さなアプリケーションの無料のWebホスティングに限定されません。

最新のJavaScriptフレームワークに基づいてフロントエンドレイヤーを構築し、Firebaseなどの大規模なクラウドベースのBackend-as-a-Service（BaaS）に接続して、サーバーや稼働時間を気にせずに複雑なアプリケーションを作成できます。またはその他のインフラストラクチャ関連の問題。

新しいエキサイティングなウェブベースのゲームを作る？！ GameSparksをチェックしてください。

要約、告白、およびリンク

この記事では、Reactアプリを手動でgh-pagesに公開したように見せました。 私はそのようなことをしませんでした。 私はmasterに取り組み、デプロイするときにnpm run deployを実行して、ビルドスクリプトを開始し、ビルドをgh-pagesにプッシュしました。 リポジトリのmasterブランチを参照して、どのように機能するかを確認してください。

要点

長所：

• 即時展開
• 簡単なコラボレーション
• 安全なホスティング環境

警告：

• HTTPヘッダーにアクセスできません
• ウェブサイトのコピーをダウンロードするのは簡単
• GitHubの知識が必要です
• テクノロジーベンダーによって異なります

リンク：

• 私のアプリのソースコードはamingilani/price-checkにあります。
• このアプリはpricecheck.gilani.meで公開されており、無期限に利用できるはずです。