웹에서 Rust 애플리케이션을 실행하는 방법-JS 튜토리얼-php.cn

웹에서 Rust 애플리케이션을 실행하는 방법

Mary-Kate Olsen

풀어 주다： 2025-01-26 16:32:11

원래의

595명이 탐색했습니다.

How to Run a Rust Application in the Web

이 튜토리얼에서는 웹 브라우저에서 Rust 애플리케이션을 실행하는 방법을 배웁니다. 간단한 Rust 패키지를 만들고 이를 WebAssembly(WASM)로 컴파일한 다음 HTML 페이지에 통합하겠습니다.

1. 러스트 설치

먼저 Rust를 설치해야 합니다. 공식 Rust 설치 가이드인 Rust 설치 가이드를 참조하세요. 설치가 완료되면 다음 명령을 실행하여 설치가 성공했는지 확인하세요.

<code class="language-bash">rustc --version</code>

로그인 후 복사

2. Rust 패키지 만들기

다음으로 새 Rust 패키지를 만듭니다.

<code class="language-bash">cargo new rust-101 --lib</code>

로그인 후 복사

다음 폴더 구조가 생성됩니다.

<code>├── Cargo.toml
└── src
    └── lib.rs</code>

로그인 후 복사

Cargo.toml: JavaScript의 package.json과 유사한 프로젝트 구성 파일입니다.
lib.rs: Rust 코드가 포함된 기본 라이브러리 파일입니다.

lib.rs 파일을 엽니다. 기본적으로 add 함수 예시가 포함되어 있습니다. 우리의 목표는 웹 애플리케이션에서 이 함수를 호출하는 것입니다.

3. Rust를 WebAssembly로 컴파일

Rust 코드를 웹에서 실행하려면 WebAssembly(WASM)로 컴파일해야 합니다. 이렇게 하려면 wasm-pack 도구를 설치하세요:

<code class="language-bash">cargo install wasm-pack</code>

로그인 후 복사

4. Rust와 JavaScript 간의 통신 구축

Rust와 JavaScript를 연결하기 위해 wasm-bindgen 크레이트를 사용합니다. 업데이트된 Cargo.toml 파일은 다음과 같습니다.

<code class="language-toml">[package]
name = "rust-101"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"</code>

로그인 후 복사

여기:

crate-type = ["cdylib"]: WebAssembly와 호환되는 동적 라이브러리를 생성하도록 패키지를 구성합니다.
wasm-bindgen: Rust와 JavaScript 간의 통신을 활성화합니다.

종속성 설치:

<code class="language-bash">cargo build</code>

로그인 후 복사

5. Rust 코드 업데이트

JavaScript에서 src/lib.rs 기능에 액세스할 수 있도록 add 파일을 편집합니다.

<code class="language-rust">use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left + right
}</code>

로그인 후 복사

#[wasm_bindgen]: add 함수를 JavaScript에 노출합니다.

다음 명령을 실행하여 Rust 패키지를 WebAssembly로 컴파일하세요.

<code class="language-bash">wasm-pack build --target web</code>

로그인 후 복사

이 명령은 다음을 수행합니다.

Rust 코드를 WebAssembly로 컴파일합니다.
WebAssembly 파일 작업을 위한 JavaScript 바인딩을 생성합니다.
생성된 파일이 포함된 pkg/ 디렉터리를 만듭니다.

6. 웹페이지에서 패키지 사용

다음 내용으로 프로젝트 루트 디렉터리에 index.html 파일을 만듭니다.

<code class="language-html"><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Rust</title>
  </head>
  <body>
    <script type="module">
      import init, { add } from "./pkg/rust_101.js";
      init().then(() => {
        const sum = add(5, 10);
        console.log("5 + 10 =", sum);
      });
    </script>
  </body>
</html></code>

로그인 후 복사

7. 최종 프로젝트 구조

위 단계를 완료한 후 프로젝트 구조는 다음과 같습니다.

<code>.
├── Cargo.lock
├── Cargo.toml
├── index.html
├── pkg
│   ├── package.json
│   ├── rust_101.d.ts
│   ├── rust_101.js
│   ├── rust_101_bg.wasm
│   └── rust_101_bg.wasm.d.ts
└── src
    └── lib.rs</code>

로그인 후 복사

8. 웹페이지 시작

웹페이지를 실행하려면 로컬 웹서버를 이용하여 서비스를 제공해야 합니다. Live Server 확장(VS Code) 등 원하는 웹 서버를 사용할 수 있습니다.

브라우저 콘솔(Ctrl Shift J 또는 Cmd Option J)에 다음이 표시됩니다.

<code class="language-bash">rustc --version</code>

로그인 후 복사

그게 다야! 이 튜토리얼이 도움이되기를 바랍니다. 언제든지 의견이나 질문을 공유하십시오!

참조 :

녹에서 webassembly로 컴파일 된 나는 원본 텍스트 중 일부를 대체하고 단계에 대해 더 명확한 조직을 만들었지 만 원본 텍스트의 전반적인 의미와 그림 위치를 유지했습니다. 새로운 내용이나 원본 텍스트를 변경하는 데 초점을 두지 않았습니다. 실제 상황에 따라 대체하십시오 "[https://www.php.cn/link/d185c5ed375363f735f7a15d d24]" "및"https://www.php.cn/link/267782828999d6bcd49] "올바른 링크.

위 내용은 웹에서 Rust 애플리케이션을 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!