CloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築します

サーバーレスコンピューティングは、ソフトウェア開発に革命をもたらし、展開とDevOpsを簡素化しました。このチュートリアルでは、スケーリングとインフラストラクチャを抽象化するプラットフォームであるCloudFlare Workersを使用して、フルスタックのサーバーレスアプリケーションを構築します。プロジェクト「Repo Hunt」は、製品ハントとRedditに触発されたオープンソースプロジェクトの毎日のリーダーボードです。完成したサイトはこちらから入手できます。

CloudFlareのグローバルネットワークを活用するCloudFlareワーカーは、ユーザーの場所に関係なく、非常に低い遅延性能を提供します。 Wrangler CLIツールは、建物、アップロード、公開を簡素化します。このチュートリアルでは、「ルーター」テンプレートを使用して、URLベースのルーティングを有効にします。ソースコードは、github [link-togithub-repo]で利用できます。

環境を設定します

ラングラーをインストールする：

 NPMインストール-G @CloudFlare/Wrangler

ルーターテンプレートを使用して新しいプロジェクトを作成します。

 Wranglerは、レポハントhttps://github.com/cloudflare/worker-template-routerを生成します
CDレポハント

ルーターテンプレートはWebpackを利用して、NPMモジュールを含めることができます。 RouterクラスはURLルーティングを処理します。基本的な例：

 // index.js
const router = require（ './ router'）;

addeventListener（ 'fetch'、event => {
  event.respondwith（handlerequest（event.request））;
}）;

async function handlerequest（request）{
  試す {
    const r = new Router（）;
    R.get（ '/'、（）=> new Response（ "Hello、world！"））;
    const resp = await r.route（request）;
    RETURN REST;
  } catch（err）{
    新しい応答を返す（err）;
  }
}

労働者はイベントのfetchに対応し、 Responseを返します。このチュートリアルでは、ホームページ（ / ）、送信フォーム（ /post ）、および送信処理（ /repo ）のルートを使用します。

ルーティングとテンプレート

ホームページ（ / ）ルートは、提出されたリポジトリのリストをレンダリングします。簡単なHTML応答から始めます。

 // index.js
const router = require（ './ router'）;
const index = require（ './ handlers/index'）;

// ...（index.jsの残り）

// handlers/index.js
const headers = {'content-type'： 'text/html'};
const handler =（）=> {
  新しい応答を返します（ "Hello、World！"、{Headers}）;
};
module.exports = handler;

wrangler previewを使用してテストします。次に、より洗練されたテンプレートを作成します。

 // handlers/index.js
const headers = {'content-type'： 'text/html'};
const template = require（ '../ templates/index'）;

// ...（残りのハンドラー/index.js）

//テンプレート/index.js
const layout = require（ './ layout'）;
const template =（）=>レイアウト（ `<h1 id="こんにちは世界">こんにちは世界！</h1> `）;
module.exports = template;

// Templates/Layout.js
const layout = body => ` $ {body} `;
module.exports = layout;

これは、一貫したスタイリングにレイアウトテンプレートを使用します（Bulma CSSが含まれています）。

労働者によるデータの持続性kv

ワーカーKVは、データの持続性のためのキー価値ストアを提供します。リポジトリ（key： repos:${id} ）と毎日のリスト（key： $date ）を保存します。注：労働者KVには有料プランが必要です。

基本的なKV操作：

 repo_hunt.put（ "mystring"、 "hello、world！"）; //値の設定
const string = await repo_hunt.get（ "mystring"）; //値を取得します

レポとデイデータを管理するためのクラスを作成します。

 // store/repo.js
const uuid = require（ 'uuid/v4'）;

クラスレポ{
  // ...（リポジトリクラスの実装）
}
module.exports = repo;

// store/day.js
const today =（）=> new date（）。tolocaledAtestring（）;

module.exports = {
  追加：async function（id）{// ...}、
  getRepos：async function（）{// ...}
};

Repoクラスは、検証と永続性を処理します。 Day毎日のリポジトリリストを管理します。

ユーザーの提出物の処理

フォーム（get /post ）を使用すると、ユーザーはリポジトリを送信できます。投稿/repoハンドラープロセス提出：

 // handlers/create.js
const qs = require（ 'qs'）;
const repo = require（ '../ store/repo'）;
const day = require（ '../ store/day'）;

// ...（ハンドラーの実装を作成）

これにより、 qsライブラリを使用してフォームデータを解析し、 Repoオブジェクトを作成し、KVに保存し、IDを毎日のリストに追加します。

ホームページでのデータのレンダリング

ホームページは、リポジトリデータを取得およびレンダリングするようになりました。

 // handlers/index.js
// ...（更新されたインデックスハンドラー）

//テンプレート/index.js
// ...（更新されたテンプレート関数をレンダリングするためにレポをレンダリング）

DayモジュールのgetRepos関数は、 Repoオブジェクトを取得してインスタンス化します。テンプレートは、各リポジトリをレンダリングします。

展開

労働者を請求するdevサブドメイン：

ラングラーサブドメイン私のサブドメイン

アプリケーションを展開します：

ラングラーパブリッシュ

CloudFlareダッシュボードにKVネームスペースを作成し、名前空間IDを使用してwrangler.toml更新します。

 [[kv-namespaces]]
バインディング= "repo_hunt"
id = "$ yournamespaceid"

KVネームスペースをwrangler.tomlに追加した後に再発行します。アプリケーションは現在ライブです！

さらなる開発

このチュートリアルは、サーバーレスアプリケーションの基盤を提供します。将来の拡張機能には、賛成、コメント、より洗練された機能が含まれます。さらなる開発のアイデアについては、労働者のドキュメントとテンプレートギャラリーを調べてください。

以上がCloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。