이 가이드에서는 Rust로 작성되고 웹 Assembly로 컴파일된 백엔드 API를 사용하여 새로운 Azure Static Web Apps 서비스의 서버 없는 환경에 모든 내용을 배치하는 프런트엔드 Angular 응용 프로그램을 사용하는 방법을 설명합니다.
사용자 인터페이스는 Angular 로 작성되었습니다.이 응용 프로그램의 흥미로운 점은 생성기는 백엔드 API의 핵심 부분으로 완전히 Rust로 작성된 다음에 웹 어셈블리(WASM)로 컴파일된다는 것이다.공통 API는 노드 뒤에 공개됩니다.jsfaçade는 서버 없는 Azure 기능을 통해 구현됩니다.
시작합시다...

우리는 무엇을 창조하고 있습니까?

우리는 고양이 이름 생성기 응용 프로그램을 구축할 것이다.나는 고양이를 좋아한다. 너도 좋아한다고 내기를 걸겠다.이 프로그램은 당신이 사랑하는 애완동물을 위해 독특한 고양이 이름을 발견할 수 있도록 합니다.
⚡️ https://catsify.app에서 애플리케이션 테스트⚡️
우리의 응용 프로그램 구조는 다음과 같다(중요한 부분만 표시).

.
├── api
│   ├── dist
│   │   └── func
│   ├── func
│   ├── ...
│   ├── Cargo.toml
│   └── rust
├── app
│   ├── dist
│   │   └── ui
│   ├── ...
│   └── src
├── ...
└── scripts

몇 가지 주요 기능:

api는 표준 Azure Functions 응용 프로그램 폴더입니다.

api/func 노드를 포함합니다.js는 서버 기능이 없습니다.

api/rust에는 Rust 소스 코드가 포함되어 있습니다.

app 각도 소스 코드를 포함합니다.

화목하다

api/dist/func에는 API 구축 작업이 포함되어 있습니다.

app/dist/ui 응용 프로그램 구축 부품을 포함합니다.

다음은 각 스택의 역할: Rust/WASM, 노드를 설명합니다.js.모서리의가 있다그리고 모든 부분을 어떻게 구축하고 배치하는지 설명한다.

우리는 어떻게 그것을 창조합니까?

Azure 기능: 노드.js 코드

우리의 공공 백엔드 API는 노드입니다.js Azure 함수Façade로 사용됩니다../api/func/index.ts 파일에서 우리는 "a"generate() 함수를 가져오고 호출하기만 하면 (다음 절 참조) 결과를 얻고 클라이언트에게 보낼 수 있습니다.
다음은 코드의 단순화 버전입니다.

const { generate } = require("./wasm_loader");

const func = async function (context, req) {
   const name = await generate();
   const [adjective, noun] = name.split(" ");
   context.res = {
     body: {
       adjective,
       noun,
     },
   };
};

export default func;

그러나 ./api/func/wasm_loader.ts 파일에서 이것이 신기한 일이다. 우리는 실제로 Rust에서 컴파일한 WASM 모듈을 불러오고 generate_name_str 함수를 호출하여 피드 파라미터를 전달하고 결과 문자열을 디코딩하여 출력한다.
다음은 코드의 단순화 버전입니다.

const fs = require('fs');
const path = require('path');

// the WASM file is copied to dis/func during the build
const wasmFile = path.join(__dirname, 'generator.wasm');

// a bunch of utilities to decode the WASM binary
function getInt32Memory(wasm) {...}
function getUint8Memory(wasm) {...}
function getStringFromWasm(wasm, ptr, len) {...}

// export a JavaScript function 
export const generate = async function() {

  // load the WASM module
  const bytes = new Uint8Array(fs.readFileSync(wasmFile));
  const result = await WebAssembly.instantiate(bytes);
  const wasm = await Promise.resolve(result.instance.exports);

  // setup args
  const retptr = 8;
  const seed = Date.now() % 1000 | 0;

  // invoke the WASM code
  const ret = wasm.generate_name_str(retptr, seed);

  // decode result
  const memi32 = getInt32Memory(wasm);
  const v0 = getStringFromWasm(...);
  wasm.__wbindgen_free(...);

  // this is final the decoded name
  return v0;
};

핵심 API: Rust 코드

This is NOT a deep dive guide into Rust code or WASM. You can learn about Rust and WASM on the official Rust website.

앞서 언급한 바와 같이 백엔드 API의 주요 부분은 Rust로 작성된 이름 생성기입니다.

use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn generate_name_str(seed: i32) -> String {
    // the seed is coming from the JS side
    let a = seed % (ADJECTIVES.len() as i32);
    let b = seed % (NOUNS.len() as i32);
    [ADJECTIVES[a as usize].to_string(), " ".to_string(), NOUNS[b as usize].to_string()].join("")
}

const ADJECTIVES: [&str; 1116] = [
"aback",
"abaft",
//...
];
const NOUNS: [&str; 1201] = [
"abbey",
"abbie",
//...
];

// used for debugging only
pub fn main() {
    println!("{:?}", generate_name_str(1));
}

우리는 기본적으로 두 개의 녹 벡터를 사용하여 고양이의 명사와 형용사를 저장한 다음에 각 벡터에서 무작위 값을 선택하여 문자열을 구성한다.generate_name_str 함수 사용 #[wasm_bindgen] 외부 속성은 Rust에서 JavaScript로 내보냅니다.이것은 우리로 하여금 자바스크립트 코드에서 이 함수를 호출하고 seed 매개 변수를 전송할 수 있게 할 것이다.

사용자 인터페이스:각도 코드

Angular 응용 프로그램은 버전 10.0.0-next를 사용하여 생성됩니다.4, 클래식 설정!

각도 CLI 우리는 어떻게 그것을 건설합니까?

Azure 함수

우리의 노드.js Azure 기능 노드js 코드는 TypeScript로 작성되었기 때문에 tsc 를 사용하여 JavaScript로 전송하고 결과를 ./dist/func 폴더로 출력합니다.

cd api
tsc # will create ./dist/func/

WASM 녹슨

Rust 코드의 경우 WASM 모듈을 컴파일하고 생성하기 위해 사용됩니다 [wasm-pack](https://github.com/rustwasm/wasm-pack).

cd api
wasm-pack build # will create ./pkg/

및 api/Cargo.toml 의 다음 구성:

[dependencies]
wasm-bindgen = "0.2.58"

[lib]
crate-type = ["cdylib", "rlib"]
path = "rust/lib.rs"

[[bin]]
name = "generator"
path = "rust/lib.rs"

[profile.release]
lto = true
panic = "abort"
# Tell `rustc` to optimize for small code size.
opt-level = "s"

Note: wasm-pack generates a Node.js wrapper that loads the WASM module. Since we wrote our own loader, we are only interested in the *.wasm file. We will then need to copy the WASM file to the ./api/dist/func:

cp pkg/catsify_bg.wasm dist/func/generator.wasm

각진 몸매

Angular 응용 프로그램을 구축하는 것은 간단합니다.Angular CLI가 담당하는 모든 기능:

ng build --prod

이 명령은 ./app/dist/ui 아래에 패키지를 생성합니다.

프로젝트 구축 개요

cd api
tsc                # builds the Azure function.
wasm-pack build    # builds the WASM module.
cp pkg/catsify_bg.wasm \
   dist/func/generator.wasm
cd ../app
ng build --prod    # builds the front-end app.

프런트엔드 Angular 응용 프로그램과 백엔드 서버 없는 API를 만들었기 때문에 Azure에서 정적 서버 없는 응용 프로그램을 가장 쉽게 실현할 수 있는 것은 무엇입니까?

소개: ! 🎉

Azure Static Web Apps는 Azure 애플리케이션 서비스의 신제품입니다.이것은 서버 API가 지원되지 않는 현대 웹 응용 프로그램에 적용되는 새로운 간소화 관리 옵션이다.
Static Web Apps
혜택:

HTML, CSS, JavaScript 및 이미지와 같은 정적 컨텐츠를 무료로 관리합니다.

Azure 기능을 통한 통합Static Web Apps 지원

GitHub 통합, 저장소 변경 트리거 구축 및 배포.

전 세계에 분포된 정적 콘텐츠는 사용자에게 더욱 가깝게 한다.

무료 SSL 인증서, 자동 갱신.

API 어플리케이션을 위한 브랜드 맞춤형 구성

API를 호출할 때 CORS를 구성할 필요가 없는 리버스 에이전트가 있는 원활한 보안 모델입니다.

Custom domains 공급업체와 Azure Active Directory, Facebook, Google, GitHub, Twitter의 통합.

역할 정의와 분배를 사용자 정의할 수 있습니다.

백엔드Authentication는 귀하의 서비스 내용과 노선에 대한 완전한 통제를 실현합니다.

출시 전에 사이트의 authorization 에서 생성된 임시 저장 버전을 지원합니다.

라우팅 규칙 응용 프로그램을 3단계로 배치합시다!

끌어오기 요청 미리보기 버전 활성화 GitHub 계정 연결

구축 정보 제공

Azure 정적 웹 애플리케이션에서 GitHub의 애플리케이션 구축 및 배포 보기

Note: The YML workflow file created by Azure Static Web Apps has been updated with custom build steps.

해보다

방문, 몇 분 안에 첫 번째 정적 웹 응용 프로그램을 구축하고 배치합니다.

정적 웹 응용 프로그램에 대한 자세한 내용은 을 참조하십시오.
icrosoft Learn for Static Web Apps quickstart 및 API 또는 for Static Web Apps documentation 에서 학습 경로를 안내합니다.

Angular, React, Svelte 또는 Vue JavaScript 응용 프로그램 작성 및 게시 리소스

creating and publishing an app with the Gatsby static site generator

Azure Static Web Apps documentation

Azure Functions documentation

Visual Studio 코드를 사용하여 첫 번째 함수 생성 / 무료 평가판 Azure

Catsify는 간단하고 창의적인 응용 프로그램으로 당신이 사랑하는 고양이를 위해 독특한 이름을 찾을 수 있도록 도와줍니다

manekinekko
catsify

Catsify란 무엇입니까?

Catsify는 Azure 정적 웹 응용 프로그램에 위탁 관리되는 고양이 이름 생성기입니다.기술 스택은 다음과 같습니다.

각도 v10(미리보기)으로 작성된 .

Rust로 작성된 WASM으로 컴파일되어 노드를 통해 공개됩니다.js는 서버 기능이 없습니다.

Bazel 의존도

UI
API