JavaScriptフレームワークと角度は、特に、最近非常に速いペースで成長しています.角度の最新の更新されたバージョンは、MVVMのようないくつかの利点を提供します.そして、特にプロジェクトスケーラビリティのためにつくられるタイプスクリプト、構造とアーキテクチャのための特別なサポートを提供します.何が良いより良いServerlessバックエンドより最先端の角度フロントエンドを完了?ここでは、両端のHTTPパーツをコード化するのを避けながら、Serverless(FAAS)のバックエンドを追加することによって、より良い角度で実行する方法を紹介します.
私は、あなたとそれをする方法を示しますScaleDynamics platform — Serverlessに対する新しいアプローチ- Serverless Function(FAAS)でバックエンドをコード化して、展開する独特の方法を提供します.あなたはAWSラムダ、GCP関数、またはプライベートクラウドのような公共のFAAの任意のタイプでそれを展開することができます.

プロジェクトの初期化

まず、主な角度プロジェクトを作成します.

$ npm install -g @angular/cli
$ ng new angular-warp-tuto

2 . ScaleDynamicsプラットフォームサーバの設定

この例では、基本的なHTTPサーバプロキシを作成します.

からデータを取得するREST API

クライアント側としてあまりにも多くのデータを要求しないようにデータをフィルタリングする

応答でランダムなレゴのアバターを追加レンダリングページをきれいに見えるようにする;

そのためには、メインプロジェクトのルートでサーバーディレクトリを作成し、新しいプロジェクトを初期化しましょうNode.js プロジェクトの内部:

mkdir angular-warp-tuto/server
cd angular-warp-tuto/server
npm init -y

そして、Axios library 必要なのは

npm install axios

サーバーのサブプロジェクトでは、index.js バックエンドサーバレス関数を作成するには、次の手順に従います.

// server/index.js
const axios = require(“axios”);
const getUsers = async () => {
 // fetch users from API
 const { data } = await axios.get(“https://jsonplaceholder.typicode.com/users");
// Pick attributes and add photo
 return data.map(({ id, name, email, phone, company, address }) => ({
  id,
  name,
  email,
  phone,
  city: address.city,
  work: company.name,
  photo: “https://randomuser.me/api/portraits/lego/" + (id % 10) + “.jpg”,
 }));
};

今、これは非常に重要な部分です.私たちは、関数をServerlessな関数(FAAS)に変えて、これをすることによってServerlessな関数としてそれを主催するためにプラットホームに言う必要があります:

// getUsers is the function that we will call from the Front-end
module.exports = { getUsers };

あなたはそれをしたか.今後、HTTP引数、エラー、エンドポイントに対処する必要はありません.

次に、プラットフォームを設定するにはwarp.config.js この例のようなファイル

module.exports = {
 // project name in the ScaleDynamics console (demo is created by default)
 project: “demo”,
 output: {
  format: “node-module”,
  // path to the “node_modules” directory of our main project
  projectPath: “../”,
  // module name to import it in our main project
  name: “warp-server”,
 },
};

ScaleDynamicsコンソールは、「プロジェクト」プロパティーに関してさらに紹介されます.
プラットフォームはnpm パッケージ名warp-server ノードモジュールのおかげでクライアントプロジェクトで使用するにはoutput format . これはヘルパーモジュールとして動作します.

プロジェクトでScaleDynamicsを設定する

当社のサーバーは、今私たちのプロジェクトでScaleDynamicsを設定する必要が準備が整いました.
ScaleDynamicsは、サーバー側にコマンドラインインターフェイス(CLI)が付属しており、我々のローカルエミュレータを起動し、プロジェクトを構築し、クラウド上に展開するのを助ける.クライアント側では、プラットフォームエンジンとヘルパーモジュールがHTTPコールを作るのを防ぎます.
プロジェクトに戻るには、これらの小さな依存関係をインストールする必要があります.

cd ..
npm install @warpjs/engine
npm install warp npm-run-all — save-dev

次に、起動時にサーバーパーツを追加し、コマンドを実行しますpackage.json :

“scripts”: {
+ “postinstall”: “cd ./server && npm install”,
“ng”: “ng”,
- “start”: “ng serve”,
+ “start:client”: “ng serve”,
+ “start:server”: “warp start-emulator -w ./server”,
+ “start”: “run-p start:*”,
- “build”: “ng build”,
+ “build:client”: “ng build — prod”,
+ “build:server”: “warp build ./server”,
+ “build”: “run-s build:server build:client”,
+ “deploy”: “warp deploy — asset-dir dist/angular-warp-tuto ./server”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},

我々が我々のプロジェクトを走らせることができて、テストすることができる前に、もう一つのステップWarp engine 一度コード内のServerless関数を呼び出します.
メインプロジェクトのエントリポイントで初期化を勧めます.

// src/main.ts
import “@warpjs/engine”;

その後、インポートnpm initへのモジュールで、Serverlessな関数を呼び出します.以下のようにします.

// imports the Warp helper module, to back-end wrapper
import WarpServer from “warp-server”;
// creates an instance of the helper
const { getUsers } = new WarpServer();
// async call to the serverless function
const users = await getUsers();

すべてはすべて設定され、あなたは今あなたのプロジェクトをテストする無料です🤞 🙏🏻

実行

プロジェクトをクラウドで実行し、配備するためには、ScaleDynamicsアカウントが必要です.あなたがまだ持っていないならば、あなたはAを要求することができますfree trial このリンク.無料、スパム無料😊.
アカウントを取得したら、コンソールに戻ってログインしてください.

npx warp login

私たちは今このプロジェクトを実行することができます、このコマンドラインは、バックエンドのためのServerlessエミュレータを実行し、我々の角度フロントエンドを提供するサーバーを起動します.

# run a dev server:
npm run start

その後、ブラウザのプロファイルの写真として偽のユーザーとレゴの顔のリストをポップアップします.フロントエンドまたはバックエンドコードをプレイすることを躊躇しないでください😎
最後のステップ:雲の上に展開!
ScaleDynamicsは、FaaSプラットフォーム(GCP機能)とGoogleストレージ上のフロントエンドにバックエンドを配置します.

# build and deploy to production
npm run build
npm run deploy

あなたのプロジェクトは準備ができました！

今、我々のURL、クライアントとサーバーがよくホストされている.プロセスを通して、我々はHTTPSの要求、ルート、セキュリティ、終点、またはエラーに対処する必要はありませんでした🔧
他のフレームワークと統合するにはcode samples GitHubで多くのユースケースのために、私は最近、最近記録し、あなたのためのステップバイステップのチュートリアルを見つけることができますReact .
私はあなたがこのチュートリアルを参考にしたことを望みます、そして、あなたが質問をするならば🙂

クレジット

私たちが例として取ったアプリを開発した人に大きな感謝.彼はScaleDynamicsのJavaScriptの専門家です.彼はRennesjs、フランスのJavaScript meetupを組織するので、あなたがブリタニーによって来るならば、あなたは我々に加わるために歓迎以上です!