Cloudflareページを使用したJamstackアプリケーションの構築と配備

著者によってIkeh Akinyemi
セルフホスティングのWebアプリケーションは、エキサイティングなプロセスですが、迅速に、高価で退屈な取得することができますので、お金を払うことを目指して、管理し、自分でサーバーを維持する.このプロセスは、あなたの個人的なポートフォリオやブログのプラットフォームのような静的サイトをホストするのに最適ではありません.いくつかの無料の静的ホスティングWebサービスをご利用いただけます、セルフホスティングが簡単になりました.
この記事では、Cloudflareページについて説明します.Cloudflareは、長年にわたって、HTTP/HTTPS要求とCDNファイアウォールを保護するウェブインフラストラクチャに面しているユーザーに投資しました.
CloudFlareページは、CloudFlareのソリューションの一つとして、フロントエンド開発者向けに設計されたJamstackプラットフォームで、シームレスにWebサイトを展開します.
このチュートリアルでは、CloudFlareページを使用して構築、コラボレーション、および配備するための反応経験を持つフロントエンド開発者を紹介します.それにもかかわらず、ここで共有される概念は、反応しない他のフロントエンドフレームワークに拡張されることができます.

何がCloudflareページですか?
Cloudflare pages Gatsby、Jekyll、反応のようなフレームワークを使用して、Jamstackウェブサイトを協力して、構築して、配備するための静的ウェブホストプラットホームです.次.jsといくつかの他.それは簡単に設定して超高速です展開には約3分かかります.あなたがしなければならないのは、それをあなたの倉庫へのアクセスを与えて、構成の少しをして、自動的にあなたのためにHTTPSでドメインを設定するでしょう.
ps :フレームワークが framework guide , または静的サイトジェネレータやフレームワークを使用せずにサイトを管理するには、まだあなたのサイトを展開することができます.これを参照 guide .

どのようにCloudflareページが他のJamstackホスティングプラットフォームと異なるか
Cloudflareページを提供するユニークな違いの1つは、Cloudflare workers. netlifyと異なり、セルレス関数はCloudFlareでワーカーズと呼ばれます.CloudFlare作業者は、あなたがCloudflareダッシュボードであなたの機能を書くか、編集することができるページから分離しています.Cloudfareの関数は、書き込み時にベータ版ではありますが、サーバー側のコードを実行することなく、専用サーバーを実行することができます.労働者の助けを借りて、完全なスタックアプリケーションを構築することができます.
CloudFlareページはまた、任意のウェブサイトに不可欠なGitの統合を提供します.手動であなたのウェブページを更新するのではなく、いくつかの他のJamstackホスティングプラットフォームとは異なり、GithubまたはGitlabにあなたのコードをプッシュし、サイトが自動的に更新されます.
CloudFlareページはまた、登録として機能し、マークアップ価格設定がないドメインを提供します.これは、ドメインの約2倍の価格を支払ういくつかの他のホスティングプラットフォームと比較して、ドメインの通常価格に追加費用がないことを意味します.

Cloudflareページでの反応アプリの配備
このプロジェクトは、このチュートリアルの唯一の目的のためだけでなく、反応をブートし、実際の情報が含まれていないスパです.ただし、このチュートリアルでの手順に従って、プロジェクトリポジトリをクローン化できます.ここにレポへのリンクがあります https://github.com/Dalu46/Cloudflare-pages

上記URLを訪問し、以下のURLをコピーして貼り付けますgit clone 端末のコマンド.

git clone https://github.com/Dalu46/Cloudflare-pages.git

サイトをクローン化した後、この行のコードに依存関係をインストールします

npm install

今すぐあなたのマシン上でローカルコードポイントを持って、あなたが選択したソースコードを編集することができます.次に、我々はgithubレポを設定し、プロジェクトをプッシュします.このGithub Repoは、CloudFlareページの配備に使用するものです.あなたがGithubアカウントを持っていないならば、あなたは1をつくることができます here.
今我々はGithubレポ準備ができて、Cloudflareページアカウントを作成しましょう.指示に従う here 作る. CloudFlareページアカウントの設定が成功したら、ダッシュボードは次のようになります.

次のステップはCreate a project ボタンは、我々のページに私たちの好ましいGitプロバイダのアカウントをCloudflareページに接続します.そして、このチュートリアルのために、それはgithubであるでしょう.

次に、connect Github ボタンは、あなたのGitHubアカウントにログインする必要があります.その後、すべてのリポジトリを選択し、インストールと承認をクリックします.その後、このページに向けます.

GATHUBアカウントを正常に接続したので、作成したRPOを選択する必要があります.CloudFlareのページのリポジトリは、最近更新されたここでソートされたことがわかります.次に、[スタート]ボタンをクリックします.

プロジェクト名は、CloudFlareのページからサブドメイン名を生成するために使用されます.devドメイン名、つまり、ホスト名を持つようになりますcloudflare-pages-alh.pages.dev . あなたの好みの何かにプロジェクト名を変更することができます.
デフォルトでの生産ブランチはGithubからリポジトリのメインブランチに設定されます.

さて、ビルドの設定のために我々は、これは反応アプリケーションであり、自動的にビルドコマンドがnpm run build ビルド出力ディレクトリがビルドされます.一旦これらを適当にするならばsave and deploy ボタン.
基本的にどのようなCloudflareページはフードの後ろにやっている;それは私たちのためのビルド環境を設定し、私たちのgithubリポジトリをクローンして実行するnpm install すべてのパッケージをインストールするには、ビルドコマンドを実行してアプリケーションを構築し、約3分で公開します.

我々は正常に我々の反応アプリを展開しており、CloudFlareページも自動的に我々の反応アプリのURLを生成している.メインブランチは常にプロダクションに設定されていますので、メインブランチにコードを変更したりマージしたりするたびに、再構築され、アプリケーションに変更を展開します.
プロジェクトの最近のビルドを参照するには、ページの上部にあるCloudFlare Pageボタンをクリックし、ビルドを指示します.ページを更新して、次のように更新します.

ここでは、我々の生産コードが我々のデフォルト支店から造られるのを見ます、そして、また、我々の倉庫への新しいコミットにつき新しいビルドを得ます.これは自動展開です.手動では管理しません.CloudFlareページは、自動的にこれらの変更が配備されたサイト上で反映されるように自動的に私たちのGITUBリポジトリの変更を聞くことによってそれを管理します.
さあ、Cloudflareページによって生成された新しいURLを見ましょう.我々は、以下のように我々の反応スパアプリを見なければなりません:

そして、それは我々の反応アプリが正常に展開されている.

オープンソースセッション
Webアプリケーションの生産におけるデバッグは、挑戦的で、時間がかかるかもしれません.OpenReplay フルストーリー、ログオンとhotjarにオープンソースの代替手段です.それはあなたが監視し、すべてのユーザーが再生し、どのようにすべての問題のためにあなたのアプリの行動を示す再生することができます.
それはあなたのユーザーの肩を見ながら、ブラウザの検査官を開いているようなものだ.
OpenReplayは現在利用可能なオープンソースの代替手段です.

ハッピーデバッギング、現代のフロントエンドチームStart monitoring your web app for free .

カスタムドメインの追加
生成されたURLの代わりにカスタムドメインを持つことは常に良いです.カスタムドメインを追加するには、プロジェクトダッシュボードに移動する必要がありますcustom domain リンクとクリックsetup the custom domain ボタン.

次に、入力フィールドのプロジェクトに使用するドメインまたはサブドメインを入力します.あなたは1つを持っていない場合は、ドメイン名を取得する必要があります.から入手することをお勧めします Namecheap .
ドメイン名をCloudFlareに登録するときは、ネームサーバーを更新する必要があります.CloudFlareあなたのドメインの現在のネームサーバーが表示されます.あなたはあなたのRegistrarにログインして、あなたのドメイン名のネームサーバをCloudFlareからのものに変える必要があるでしょうcheck nameservers . あなたのネームサーバが伝播するのに数時間かかることがあります.ただし、既にドメイン名をCloudFlareに登録している場合は、ドメイン名を入力し、「続行」をクリックします.

今、あなたは変更をプレビューしなければなりません、そして、あなたがすでにいないならば、あなたはサイトでHTTPSを可能にするためにあなたのDNSを構成することができて、次に、Activateドメインをクリックすることができます.これが成功すると、カスタムドメインタブに反映されたステータスが表示されます.これは最大48時間かかることができますが、ほとんどの場合、それは活性化するより少ない時間がかかります.

結論
CloudFlareページは、あなたが伝統的なホスティングサーバーなしでグローバルに異なる場所から静的ウェブサイトを主催することができる静的サイトを主催している自己のための素晴らしいプラットホームです.この記事では、CloudFlareページを使用して反応アプリを展開しました.しかし、前述のように、ここで共有されている概念は、他のフレームワークには適用できません.