TAURI 개념 및 설치 사용법 (Svelte Kit, Mac Arm64)

TAURI란?

https://tauri.app/v1/guides/

Guides | Tauri Apps

Tauri는 웹을 기반으로 Desktop Application을 빌드할 수 있는 툴킷, 많은 프론트엔드 프레임워크와 호환

• 백엔드 언어는 Rust 기반이며 CLI는 Node.js가 사용됨
• CLI만 설치하면 핫 리로딩, 번들링, 앱 생성 등을 바로 사용할 수 있음
• Rust 언어를 기반으로 구동이 되기 때문에 Rust의 도구들을 직접적으로 사용할 수 있음
• 내장된 Updater를 통해 자동으로 앱을 업데이트
• 추후 어플리케이션의 백엔드를 Rust뿐만 아니라 Python, C++, Deno도 지원할 예정
• 2019년 12월 Pre-Alpha로 처음 출시되었고 2022년 6월에 정식 버전이 출시

Rust란?

Mozilla에서 개발한 시스템 프로그래밍 언어. C와 C++과 같은 기존의 시스템 프로그래밍 언어 대안으로 개발

Cargo 란?

Rust 패키지 매니저로 의존성 관리와 빌드 시스템을 손쉽게 처리

신규 혹은 기존 프로젝트에 적용

신규 프로젝트와 기존 프로젝트에 적용하는 방법에는 큰 차이가 없음

신규 프로젝트

// 신규 프로젝트 생성
npm create svelte@latest

기존 프로젝트 

https://tauri.app/ko/v1/guides/getting-started/setup/integrate

기존 프로젝트에 연동하기 | Tauri Apps

해당 내용부터는 신규 프로젝트와 기존 프로젝트 설정하는 방법이 동일

SvelteKit SSG 모드

npm install --save-dev @sveltejs/adapter-static@next

// svelte.config.js 파일에 임포트된 adapter를 변경
import adapter from '@sveltejs/adapter-static' // This was changed from adapter-auto
import { vitePreprocess } from '@sveltejs/kit/vite'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: vitePreprocess(),

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

export default config

// src/routes/+layout.ts
export const prerender = true
export const ssr = false

RUST 설치

https://rust-kr.org/pages/install/

한국 러스트 사용자 그룹

Rustup을 이용한 설치

# Rustup 설치
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# 터미널 재 시작 없이 수동으로 러스트를 시스템 경로에 추가
source $HOME/.cargo/env
# 위의 명령어 혹은 ~/.bash_profile에 경로 수정하고 실행하는 것도 가능
export PATH="$HOME/.cargo/bin:$PATH"
source ~/.bash_profile

# 설치 확인 하기
rustc --version
# 최신 버전 업데이트
rustup update
# 삭제
rustup self uninstall

패키지 매니저를 이용한 설치

# Home Brew 이용한 설치
brew install rust
# Rust 설치 확인
rustc -V
# cargo 설치 확인
cargo --version

TAURI CLI 설치

# TAURI CLI 설치
npm install --save-dev @tauri-apps/cli

// package.json
"scripts": {
  "tauri": "tauri"
}

RUST 프로젝트 생성

npm run tauri init
# 설치 순서
# 1. 사용할 앱의 이름
# 2. 메인창 제목
# 3. 빌드 시 빌드 파일 생성되는 경로 (front-end 빌드 경로와 동일)
# 4. front-end url (port 포함)
# 5. front-end 개발 서버 실행 명령어 (npm run start)
# 6. front-end build 명령어 (npm run build)

Cargo.toml : Cargo의 매니페스트 파일, 앱에 대한 부가 정보를 기록
tauri.conf.json : 이름부터 허용된 API 목록까지, 이 파일을 통해 앱의 다양한 부분을 맞춤 설정 가능
src-tauri/src/main.rs : Rust 프로그램의 진입점과 부트스트랩을 정의

앱 실행

npm run tauri dev

앱 배포

바이너리 자체는 src-tauri/target/release/[앱 이름]에 위치하고,

설치 프로그램은 src-tauri/target/release/bundle/에 위치

npm run tauri build
# `tauri.conf.json > tauri > bundle > identifier`에서 번들 식별자 변경 필요
# 기본값 `com.tauri.dev`는 유니크 하지 않기에 변경하여 사용

TAURI 설정 옵션 및 소스 확인

main.rs

// cfg! 매크로 같은 경우에는 windows OS에서 나오는 명령 프롬프트 창을 비활성화
// main 함수는 진입점으로 프로그램을 실행할 때 가장 먼저 불리는 함수
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

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

tauri. conf.json

// 실행 시 webview는 해당 OS가 사용하는 기본 브라우저를 바라보고 있으므로
// Window는 Edge, Linux는 Firefox, MacOS는 Safari를 통해 GUI 화면이 보여짐
{
  "build": {
    // `tauri build`를 돌릴 때 이 명령어가 실행
    "beforeBuildCommand": "npm run build",
    // `tauri dev`를 돌릴 때 이 명령어가 실행
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:5173",
    "distDir": "../dist"
}

 

 

참고 URL
http://www.incodom.kr/Tauri