JavaScript 프레임워크, 특히 Angular는 요 며칠 동안 매우 빠르게 성장했다.Angular의 최신 업데이트 버전은 MVVM, TypeScript, 구조, 프로젝트 확장성을 위한 구조에 대한 특수 지원 등 여러 가지 장점을 제공합니다.어떤 것이 아름다운 서버 없는 백엔드보다 가장 선진적인 각도 있는 백엔드를 완성할 수 있습니까?여기에서 Angular를 사용하여 더 빠르고 빠르게 실행할 수 있는 방법을 소개할 것입니다. 이 방법은 서버에 없는 (FaaS) 백엔드를 추가하는 동시에 앞뒤 양쪽에서 HTTP 부분을 작성하는 것을 피하는 것입니다.
이 점을 어떻게 사용하는지 보여 드리겠습니다. 이것은 서버 없는 새로운 방법입니다. 서버 없는 기능(FaaS)에서 백엔드를 인코딩하고 배치하는 독특한 방법을 제공합니다.AWS Lambda, GCP 함수 또는 개인 클라우드와 같은 공용 FAA 유형에 배치할 수 있습니다.
ScaleDynamics platform

1. 프로젝트 초기화

먼저 주요 각도 항목을 만듭니다.

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

2, ScaleDynamics 플랫폼 서버 설정

예제에서는 기본 HTTP 서버 에이전트를 생성하여 다음을 수행합니다.

으로부터 데이터 가져오기

클라이언트

처럼 과도한 데이터 요청을 피하기 위해 데이터 필터링

랜덤 레고 화신을 추가하여 보여주는 페이지를 더욱 예뻐 보이게 한다.)

이를 위해 주 프로젝트의 루트 디렉터리에 서버 디렉터리를 만들고 그 중에서 새로운 Node.js 프로젝트를 초기화합니다.

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

그리고 필요한 설치REST API:

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”,
 }));
};

이제 매우 중요한 부분입니다. 플랫폼에서 함수를 서버 함수 없음(FaaS)으로 변환하고 이를 서버 함수 없음으로 관리해야 합니다.

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

너 다 했어?지금부터 HTTP 매개 변수, 오류, 단점을 처리할 필요가 없습니다...ScaleDynamics는 이러한 문제를 해결할 것입니다.
Axios library
다음은 플랫폼을 구성하기 위해 다음과 같이 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라는 패키지를 생성하여 클라이언트 프로젝트에 사용합니다.이것은 보조 모듈(포장기)로 우리 서버를 호출할 수 있다.

출력 형식 3. 프로젝트에서 ScaleDynamics 설정

서버가 준비되었습니다. 이제 프로젝트에 ScaleDynamics를 설정해야 합니다.
ScaleDynamics는 서버에 명령줄 인터페이스(CLI)를 제공하여 로컬 시뮬레이터를 시작하고 프로젝트를 구축하며 클라우드에 배치하는 데 도움을 줍니다.클라이언트에서 플랫폼 엔진과 조수 모듈은 우리가 HTTP 호출을 하는 것을 막을 것이다. 이것이 바로 우리가 이 방면에서 필요로 하는 것이다.
이제 프로젝트로 돌아가려면 다음과 같은 작은 종속성을 설치해야 합니다.

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

그리고 start와build 명령에 서버 부분을 추가하고 warp-server 에 배치 명령줄을 추가합니다.

“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”
},

프로젝트를 실행하고 테스트하기 전에, 코드에서 서버 함수가 없는 것을 호출할 수 있도록 가져오기 를 한 번 더 해야 합니다.
기본 항목의 입구점에서 초기화하는 것이 좋습니다.

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

그리고 package.json 모듈을 init로 가져오고 서버리스 함수를 호출합니다.다음은 서버가 없는 백엔드를 호출할 때의 상황입니다.

// 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();

모든 것이 준비되었으니, 너는 이제 너의 프로젝트를 자유롭게 테스트할 수 있다🤞 🙏🏻

Warp 엔진 4, 실행

클라우드에서 프로젝트를 실행하고 배치하려면 ScaleDynamics 계정이 필요합니다.아직 없는 경우 이 링크를 요청할 수 있습니다 .그것은 무료입니다. 스팸메일이 없습니다.😊.
계정을 가져온 후 콘솔로 돌아가 로그인합니다.

npx warp login

우리는 이제 이 프로젝트를 실행할 수 있습니다. 이 명령줄은 백엔드에 서버 없는 시뮬레이터를 실행하고, 서버가 우리의 각도를 위한 전단 서비스를 시작할 것입니다.

# run a dev server:
npm run start

이후 브라우저에서 가짜 사용자와 러고인의 얼굴 목록을 개인 정보 사진으로 팝업합니다.프런트엔드 또는 백엔드 코드를 일관되게 재생하면 두 서버 모두 실시간으로 다시 로드됩니다.😎
이제 때가 됐어...마지막 단계: 구름 위에 배치!
ScaleDynamics는 FaaS 플랫폼(GCP 기능)에 백엔드를 배치하고 Google 스토리지에 백엔드를 배치합니다.

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

무료 시용 너의 프로젝트는 지금 준비가 다 되었다!

현재, 우리는 우리의 URL이 생겼고, 클라이언트와 서버는 모두 좋은 위탁 관리를 받았다.전체 과정에서 HTTPs 요청, 라우팅, 보안, 노드 또는 오류를 처리할 필요가 없습니다. 이것은 논리와 UI에 집중하고 파이프라인을 잊어버릴 수 있는 더 빠른 경험을 제공합니다.🔧
다른 프레임워크와 통합하기 위해 GitHub에서 많은 용례를 찾을 수 있습니다. 저는 최근에 이 용례를 기록했습니다. 그리고 code samples 단계별 강좌를 찾을 수 있습니다.
나는 네가 이 강좌가 너에게 도움이 된다는 것을 발견하기를 바란다. 만약 네가 어떤 문제가 있다면, 조금도 주저하지 않고 그것을 아래의 평론 부분에 두어라🙂

반응하다 신용

누가 응용 프로그램을 개발했는지 예로 들어 주셔서 감사합니다.그는 ScaleDynamics 분야의 JavaScript 전문가입니다.그는 프랑스어 자바스크립트 모임인 RennesJS를 공동으로 조직했기 때문에 브레타니에 오신다면 우리에 가입하신 것을 환영합니다!