Tauri Project 생성(Sveltekit)

저는 Sveltekit 스택을 활용하여 빌드하는 방식으로 진행합니다.

 

Tauri는 모든 프론트엔드 프레임워크와 Rust 코어를 함께 사용해 데스크톱 앱을 빌드하기 위한 프레임워크입니다. 각 앱은 두 개의 부분으로 구성됩니다:

1. 창을 만들고 그 창에 네이티브 기능을 내어주는 Rust 바이너리
2. 창 안에서 사용자 인터페이스를 만들기 위해 선택한 프론트엔드

따라가다보면, 먼저 프론트엔드를 스캐폴딩하고, Rust 프로젝트를 설정한 다음, 마지막으로 어떻게 둘 사이 통신이 이루어지는지 볼 수 있습니다.

다음은 빌드하게 될 내용의 미리보기 입니다:

프론트엔드 만들기

$ yarn create svelte

1. Project name
   JavaScript 프로젝트의 이름이 될 것입니다. 유틸리티가 만드는 폴더의 이름이 되지만 그 외 다른 이름에는 영향이 없습니다. 원하는 이름이라면 무엇이든 적을 수 있습니다.
2. App template
   기본 템플릿인 Skeleton project를 선택할 것입니다. 좀 더 완성도 높은 SvelteKit 예제로 해보고 싶은 경우 SvelteKit 데모 앱을 선택할 수 있습니다.
3. Type checking
   프로젝트에서 JSDoc이나 TypeScript를 통해 타입 체크를 원하는 지 확인하는 것입니다. 이 안내서에서는, TypeScript를 선택했다고 가정합니다.
4. Code linting and formatting
   프로젝트에 코드린팅을 위한 ESLint와 코드 서식설정을 위한 Prettier를 같이 사용할 것을 원하는 여부를 확인합니다. 이 안내서에는 이것들에 대한 다른 설명은 하지 않겠지만, 이 두 가지 옵션을 활성화하는 것이 좋습니다.
5. Browser testing
   SvelteKit는 브라우저 테스팅을 지원하기 위해 Playwright 포함되어 제공됩니다. Tauri API는 Playwright에서 작동하지 않으므로, 추가하지 않는 것을 권장합니다.

SvelteKit SSG 모드​

$ yarn add -D @sveltejs/adapter-static@next

그리고, svelte.config.js 파일에 임포트된 adapter를 판올림 합니다:

svelte.config.js

import adapter from '@sveltejs/adapter-static' // 이것은 adapter-auto에 의해 변경됨
import preprocess from 'svelte-preprocess'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // preprocessors에 관한 더 많은 정보를 위해 
  // https://github.com/sveltejs/svelte-preprocess 참고
  preprocess: preprocess(),

  kit: {
    adapter: adapter(),
  },
}

export default config

 

마지막으로, 서버측 렌더링(SSR)을 비활성화하고, 다음 내용을 루트 +layout.ts 파일(또는 TypeScript를 사용하지 않는 경우 +layout.js)에 추가하여 사전 렌더링을 활성화해야 합니다.

src/routes/+layout.ts

export const prerender = true
export const ssr = false

 

Rust 프로젝트 생성하기

모든 Tauri 앱의 중심에는 tauri라는 Rust crate를 통해 창, 웹뷰, 운영 체제의 호출을 관리하는 Rust 바이너리가 있습니다. 프로젝트는 Rust의 공식 패키지 관리자이자 범용 빌드 도구인 Cargo로 관리합니다.

Tauri CLI가 내부적으로 Cargo를 사용해, 직접 만져야 할 일은 적습니다. Cargo에는 CLI로는 접근할 수 없지만 유용한 기능이 많습니다. 예를 들어, 테스트나 린트, 포매팅 등이 있습니다. Cargo 공식 문서를 참조하시면 더 많이 알아보실 수 있습니다.

 

TAURI CLI 설치

$ yarn add -D @tauri-apps/cli

Tauri와의 사용을 위해 미리 설정된 Rust 프로젝트를 만드시려면, 터미널을 열어 다음 명령어를 입력하세요:

$ yarn tauri init

1. What is your app name?
   최종 번들의 이름이자, 운영 체제가 부를 앱의 이름입니다. 원하는 이름이라면 무엇이든 적을 수 있습니다.
2. What should the window title be?
   기본 메인 창의 제목입니다. 원하는 제목을 적으시면 됩니다.
3. Where are your web assets (HTML/CSS/JS) located relative to the <current dir>/src-tauri/tauri.conf.json file that will be created?
   Tauri가 프로덕션으로 빌드할 때 프론트엔드 애셋을 불러올 경로입니다.
   Use ../build 값으로
4. What is the URL of your dev server?
   개발 과정에서 Tauri가 불러올 URL이나 파일 경로입니다.
   http://localhost:5173 값으로 사용
5. What is your frontend dev command?
   프론트엔드 개발 서버 실행에 쓰이는 명령어입니다.
   npm run dev (선택한 패키지 관리자에 따라 적용) 사용.
6. What is your frontend build command?
   프론트엔드 빌드에 쓰이는 명령어입니다.
   npm run build (선택한 패키지 관리자에 따라 적용) 사용.

tauri init 명령어는 src-tauri 폴더를 만듭니다. 그 폴더에 코어와 관련된 파일을 두는 것이 Tauri 앱의 규칙입니다. 이 폴더의 내용물을 빠르게 살펴봅시다:

• Cargo.toml
  Cargo의 매니페스트 파일입니다. 앱에서 어떤 Rust crate에 의존하는지 정의하고, 앱에 대한 부가 정보를 기록하고, 그 외 다양한 일을 할 수 있습니다. 완전한 참고 자료로써 Cargo 매니페스트 형식 문서를 살펴보실 수 있습니다.
• tauri.conf.json
  이름부터 허용된 API 목록까지, 이 파일을 통해 Tauri 앱의 다양한 부분을 맞춤 설정합니다. Tauri API 설정 문서에서 지원하는 옵션의 전체 목록과 각 옵션의 자세한 설명을 확인하실 수 있습니다.
• src/main.rs
  이 부분은 Rust 프로그램의 시작점이자, Tauri를 구동하는 위치입니다. 두 부분으로 나누어 볼 수 있습니다:

src/main.rs

 #![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
 )]

fn main() {
tauri::Builder::default()
   .run(tauri::generate_context!())
   .expect("error while running tauri application");
}

첫 줄은 오직 하나의 목적만 가진 cfg! 매크로로 시작합니다: 일반적으로 번들 앱을 실행할 때, Windows에서 나오는 명령 프롬프트 창을 비활성화합니다. 

 

src-tauri/tauri.conf.json

{
  "build": {
    // `tauri build`를 돌릴 때 이 명령어가 실행될 것입니다.
    "beforeBuildCommand": "npm run build",
    // `tauri dev`를 실행될 때 이 명령이 실행될 것입니다.
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:5173",
    "distDir": "../build"
  },

이걸로 끝입니다! 이제 터미널에서 다음 명령어를 실행해 앱의 개발 빌드를 시작할 수 있습니다.

$ yarn tauri dev

명령호출

Tauri는 네이티브 기능과 함께 프론트엔드를 향상시킬 수 있습니다. 명령이라고 불리는 이 기능은, 기본적으로 프론트엔드 JavaScript에서 호출할 수 있는 Rust 함수입니다. 이를 통해 성능이 뛰어난 Rust 코드로 오래 걸리는 작업이나 OS 기능 호출 등을 처리할 수 있습니다.

간단한 예제를 만들어봅시다:

src-tauri/src/main.rs

#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

 

명령은 일반적인 Rust 함수와 같지만, JavaScript 맥락과 통신하게 해주는 #[tauri::command 속성 매크로가 붙어 있습니다.

마지막으로, Tauri가 적절히 호출을 전달하도록 새로 만든 명령을 알려줘야 합니다. 아래와 같이, invoke_handler() 함수와 generate_handler![] 매크로를 조합해 줍니다.

src-tauri/src/main.rs

fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

 

이제 프론트엔드에서 명령을 호출할 준비가 되었습니다!

새로 만든 명령을 호출하기 위해서 @tauri-apps/api JavaScript 라이브러리를 사용할 것입니다. 이 라이브러리는 편리한 JavaScript 추상화를 통해 창, 파일시스템 등 핵심 기능으로 가는 진입로를 제공합니다. 좋아하는 JavaScript 패키지 관리자로 설치할 수 있습니다.

• npm
• Yarn
• pnpm

yarn add @tauri-apps/api

 

라이브러리들이 설치가 되었다면,  새로운 Svelte 컴포넌트를 만들 수 있습니다. src/lib/Greet.svelte에 만들어줄 것입니다:

src/lib/Greet.svelte

<script>
  import { invoke } from '@tauri-apps/api/tauri'

  let name = ''
  let greetMsg = ''

  async function greet() {
    greetMsg = await invoke('greet', { name })
  }
</script>

<div>
  <input id="greet-input" placeholder="Enter a name..." bind:value="{name}" />
  <button on:click="{greet}">Greet</button>
  <p>{greetMsg}</p>
</div>

 

이제 이 컴포넌트를 src/routes/+page.svelte에 추가할 수 있습니다:

src/routes/+page.svelte

<script>
  import Greet from '../lib/Greet.svelte'
</script>

<h1>Welcome to SvelteKit</h1>
<Greet />

 

이제 npm run dev를 실행하면 다음과 같이 결과를 확인할 수 있습니다: