두 번째 상태 가상 머신을 사용하여 브라우저 밖에서 WebAssembly를 실행하여 JavaScript와 Rust의 강력한 기능을 결합

사진 작성자Vadim Sherbakov via Unsplash
WebAssembly는 JavaScript보다 1000배 빠른 신기술입니다.처음에는 웹 어셈블리를 브라우저에서만 실행하려고 했지만, 지금까지는 웹 어셈블리를 브라우저 밖에서 실행하려고 노력하고 있다.브라우저 밖에서 WebAssembly를 실행할 수 있도록 하는 프로그램 중 하나는 두 번째 상태 가상 머신이다.
Second State VM (SSVM)는 서버 측 응용 프로그램에 최적화된 고성능 WebAssembly가 실행될 때입니다.이 프로젝트는 SSVM에 노드로 액세스할 수 있도록 지원합니다.js 플러그인.노드를 허용합니다.js 응용 프로그램은 Rust 또는 기타 고성능 언어로 작성된 WebAssembly 함수를 호출합니다.서버에서 WebAssembly를 실행하는 이유는 무엇입니까?SSVM 플러그인은 ssvmup 컴파일러 도구로 생성된 WebAssembly 파일과 상호작용할 수 있습니다.

골문

WebAssembly를 사용하는 이유는 무엇입니까?JavaScript는 브라우저의 모든 것을 처리할 수 없습니까?그래, 나는 옳고 그름을 말할 수 있다. 자바스크립트는 웹 페이지에서 대부분의 일을 완성할 수 있지만, 웹 응용 프로그램을 만드는 데 있어서 웹 Assembly는 자바스크립트보다 약간 우세하다.

프로그램이 2진법으로 컴파일되었기 때문에 비교적 작은 프로그램 크기

스팸 수집기 옵션(Go와 같은 스팸 수집 언어를 사용하는 경우만)

기계 코드에 더욱 가까워져 컴파일 속도가 빨라지고 더 이상 최적화가 필요하지 않다

요컨대, 우리가 해야 할 일은 JavaScript에서 WebAssembly가 지원하는 언어로 함수를 실행하는 것뿐입니다. (실행할 때 Node나 Deno를 사용할 수 있습니다.)

이 강좌에서는 Rust 언어 (C, C++ 또는 Go) 를 사용할 것입니다. 이 언어는 설정이 쉽고 초보자 템플릿에서 제공되기 때문입니다.
따라서 다음과 같은 세 가지 이점을 얻을 수 있기를 바랍니다.

녹슬음 성능

정확성 및 서비스 용이성

WebAssembly의 보안 및 이식성(한 번 컴파일, 어디서나 실행)

나는 불가지론의 방식으로 너를 해석할 것이다. 그러면 너는 나의 개인적인 선택에 얽매이지 않을 것이다.

부팅

따라서 SSVM은 기본 starter template 을 제공하여 복제하고 프로젝트를 만들 수 있습니다.따라서 프로젝트에 복제하거나 다운로드하여 붙여넣기만 하면 됩니다.
그런 다음 시스템에 SSVM을 설치할 수 있습니다.

npm i -g ssvmup
npm i ssvm

이 프로젝트에 대해 나는 나의 Rust Anime4k 프로젝트를 웹 서비스로 바꿀 것이다.프로젝트가 끝난 후에 너무 많은 Rust 코드를 다시 쓰고 싶지 않습니다.
따라서 사용자는 이미지를 업로드할 수 있고 업로드된 이미지는 Rust에서 전송되고 처리된 이미지는 자바스크립트 웹 서버로 되돌아옵니다.

녹 방지 코드를 쓰다

Rust 소스 디렉터리 src/ 에서 Rust 코드를 작성하기만 하면 함수를 공개하고 pub 속성을 제공하는 것을 잊지 마십시오.
다음은 제 코드 요약입니다.#[wasm_bindgen]

#[wasm_bindgen]
pub fn anime4k(buf : &[u8]) -> Vec<u8> {
    // Yadayada my long code
    ...
    let mut out = Vec::<u8>::new();
    image::png::PNGEncoder::new(&mut out)
        .encode(&bytes[..], img_width, img_height, image::ColorType::Rgba8)
        .unwrap();
    out
}

starter 프로젝트를 사용하면 wasmbindgen 버전 src/lib.rs 을 사용할 수 있습니다. 이것은 0.2.61, Integer 또는 String 을 함수 매개 변수 형식과 반환 형식으로만 지원합니다.따라서 이 제한을 주의하십시오. 만약 특정한 데이터 형식을 사용한다면, 반드시 바이트 Vec<u8> 로 변환해서 디코딩해야 합니다.
이것은 내가 되돌아오는 aVec<u8>에서 얻은 결과이다

Caused by:
    Type of `return value` is Vector(I32), only Integer, String or Vector<u8> are supported now

그래서 이건 간단해.나는 너무 많이 다시 쓸 필요가 없다. 나는 입력과 출력 데이터, 그리고 함수 파라미터와 되돌아오는 형식을 조정할 뿐이다.

JavaScript 코드 작성

웹 서버에 대해 나는 ExpressJs를 사용할 것이다. 왜냐하면 나는 그것에 대해 매우 익숙하기 때문이다.따라서, 나는 단지 아래의 명령을 사용하여 그것을 설치할 수 있다

npm install express
npm install express-fileupload # Needed to handle file upload

다음은 제 사이트의 전체 코드입니다.Vec<i32>

// Import the function you have create in Rust
// anime4k is the function that I will create
const { anime4k } = require('../pkg/ssvm_nodejs_starter_lib.js');
const express = require('express');
const fileUpload = require('express-fileupload');

// In Heroku, the port number was provided from environment
// variable.
const PORT = process.env.PORT || 3000;

const app = express();

app.use(fileUpload());
app.use(express.static(__dirname + '/public'));

// Accept an uploaded image and pass it to
// the `anime4k` function and return the result
app.post('/upload', (req, res) => {
  // The image had to be converted to a bytes
  const buf = Uint8Array.from(req.files.image.data);
  res.set('Content-Type', 'text/png');
  res.end(Buffer.from(anime4k(buf)));
});

app.listen(PORT, () => {
  console.log(`Server running at http://127.0.0.1:${PORT}/`);
});

응용 프로그램 실행

응용 프로그램을 실행하기 전에 Rust 라이브러리를 구축해야 합니다.Rust 라이브러리를 구축하려면 다음 명령을 입력해야 합니다

ssvmup build

그런 다음 JavaScript 응용 프로그램을 실행할 수 있습니다.

node node/app.js

배포 중

코드를 만들면 웹에 배치할 수 있습니다.
다음은 제가 수정한 node/app.js 파일 내용입니다.

FROM ubuntu:20.04
ARG DEBIAN_FRONTEND=noninteractive
ENV RUSTUP_HOME=/usr/local/rustup \
    CARGO_HOME=/usr/local/cargo \
    PATH=/usr/local/cargo/bin:$PATH
RUN apt-get update \
    && apt-get install -y tzdata \
    && apt-get -y upgrade && apt-get install -y build-essential curl wget git vim libboost-all-dev
RUN curl -sL https://deb.nodesource.com/setup_14.x |  bash \
    && apt-get install -y nodejs \
    && npm install -y -g ssvmup --unsafe-perm \
    && npm install -y ssvm \
    && npm install express express-fileupload # You can change it with any library you use
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
ADD . ./
RUN ssvmup build
CMD node node/app.js

Node, SSVM 및 일부 노드 패키지 등 필요한 모든 애플리케이션만 설치할 수 있습니다.프로젝트 코드 복사하기;녹 방지 공사 건설하기;그런 다음 Dockerfile 명령을 실행하여 웹 서버를 실행합니다.

Heroku에 배포

그것은 쉽게 배치될 수 있다Heroku.
응용 프로그램을 만들거나 기존 응용 프로그램을 사용하면 됩니다.

그런 다음 Docker를 사용하기 때문에 항목 스택을 사용 컨테이너로 변경해야 합니다.다음 명령을 실행하여 프로젝트 창고를 변경할 수 있습니다

heroku stack:set container -a APPLICATION_NAME

이후에 배포 방법을 사용할 수 있지만 GitHub 저장소를 Heroku에 연결하는 것이 좋습니다.

그런 다음 Deploy 버튼을 눌러 프로젝트를 배포하고 성공적으로 배포할 때까지 기다립니다.

이것은 웹 미리보기입니다.

판결

JavaScript는 웹 응용 프로그램에서 사용이 상당히 강할 수 있지만, 자신만의 한계가 있다.이러한 제한을 극복하기 위해 우리는 성능 관건적인 하위 루틴 코드를 자바스크립트에서 Rust로 옮기고, Rust 코드를 WebAssembly로 컴파일하고, WebAssembly와 자바스크립트를 통합합니다.
만약 당신에게 진일보한 문제가 있다면, 아래의 평론에서 저에게 알려주세요.
프로젝트 소스 코드는 대중https://github.com/andraantariksa/Anime4k-ssvm-nodejs 및 현장 프레젠테이션http://anime4k-ssvm-nodejs.herokuapp.com/에서 사용할 수 있습니다.
참고

https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/

https://www.secondstate.io/

https://devcenter.heroku.com/articles/build-docker-images-heroku-yml

이 글은 최초로 나의 블로그에 발표되었다https://andraaa.my.id/blog/run-webassembly-outside-browser-using-second-state-vm/