Tauri와 Vue.js로 작은 데스크탑 앱 만들기

게시 됨: 2022-03-10
빠른 요약 ↬ Tauri는 기존 HTML, CSS 및 JavaScript에서 작고 빠르고 안전한 데스크톱 앱을 만들기 위한 도구 모음입니다. 이 기사에서 Kelvin은 기본 응용 프로그램으로 nota 라는 예제 웹 앱을 번들로 묶는 두 기술을 통합하여 Tauri가 점진적 프레임워크 Vue.js와 어떻게 잘 작동하는지 설명합니다.

기술은 사용자뿐만 아니라 제작자(개발자 및 디자이너)도 우리의 삶을 더 좋게 만듭니다. 이 기사에서는 황소 자리를 소개합니다. 이 문서는 다음과 같은 경우에 유용합니다.

  • HTML, CSS 및 JavaScript를 사용하여 웹에서 애플리케이션을 구축했으며 동일한 기술을 사용하여 Windows, macOS 또는 Linux 플랫폼을 대상으로 하는 앱을 만들고자 합니다.
  • Electron과 같은 기술로 이미 크로스 플랫폼 데스크톱 앱을 구축하고 있으며 대안을 확인하고 싶습니다.
  • PureOS와 같은 Linux 배포판용 웹 기술로 앱을 구축하려는 경우
  • 당신은 Rust 매니아이고 네이티브 크로스 플랫폼 애플리케이션을 구축하기 위해 이것을 적용하고 싶습니다.

기존 웹 프로젝트에서 기본 크로스 플랫폼 애플리케이션을 빌드하는 방법을 살펴보겠습니다. 가자!

참고 : 이 기사에서는 HTML, CSS, JavaScript 및 Vue.js에 익숙하다고 가정합니다.

점프 후 더! 아래에서 계속 읽기 ↓

황소자리란?

공식 웹 사이트는 황소 자리를 잘 요약합니다.

  • Tauri는 작고 빠른 바이너리를 모두 사용하여 보다 안전한 기본 앱을 구축하기 위한 다중 언어 도구 모음입니다. "다국어"라는 말은 Tauri가 여러 프로그래밍 언어를 사용한다는 것을 의미합니다. 현재 Rust, JavaScript, TypeScript를 사용하고 있습니다. 그러나 Go, C++, Python 등을 사용할 수 있도록 할 계획이 있습니다.
  • Vue.js, React 또는 Angular와 같은 HTML 및 JavaScript 기반 프런트 엔드 프레임워크를 사용하여 기본 데스크톱 앱을 빌드할 수 있으며 모든 파이프라인에 통합할 수 있습니다.
  • 주요 데스크톱 플랫폼(모바일 및 WebAssembly 곧 제공 예정)을 위한 바이너리를 빌드하고 번들링하는 데 도움이 됩니다.

따라서 기본적으로 Tauri를 사용하면 웹 기술을 사용하여 작고 안전한 기본 데스크톱 앱을 만들 수 있습니다.

GitHub 페이지에서 Tauri는 아주 작은 바이너리(예: 파일 크기)가 있고 매우 빠른(즉, 최소 RAM 사용) 고도로 안전한 기본 앱을 빌드하기 위한 프레임워크에 구애받지 않는 도구 체인으로 설명되어 있습니다.

전자가 아닌 이유는 무엇입니까?

웹 기술을 사용하여 데스크톱 애플리케이션을 구축하는 데 널리 사용되는 도구는 Electron입니다.

그러나 Electron 앱은 번들 크기가 다소 크고 실행 시 메모리를 많이 차지하는 경향이 있습니다. 다음은 황소자리를 전자와 비교하는 방법입니다.

  • 묶음
    Tauri 앱의 크기는 600KB 미만일 수 있습니다.
  • 메모리
    Tauri 앱의 설치 공간은 Electron 앱 크기의 절반 미만입니다.
  • 특허
    재라이센스는 Tauri에서는 가능하지만 Electron에서는 불가능합니다. Electron은 Chromium과 함께 즉시 배송됩니다. 그러나 Chromium에는 Widevine이라는 디지털 권한 관리 시스템이 포함되어 있습니다. Chromium에 Widevine을 포함하면 PureOS와 같은 플랫폼 사용자가 Electron으로 만든 앱이 자유/자유로운 오픈 소스 소프트웨어(FLOSS)가 아니라는 이유로 눈살을 찌푸리게 됩니다. PureOS와 같은 플랫폼은 FSF(자유 소프트웨어 재단)에서 검증합니다. 즉, 앱 스토어에는 무료 및 오픈 소스 소프트웨어만 게시할 수 있습니다.

간단히 말해서 앱이 Electron으로 빌드된 경우 PureOS 스토어에 공식적으로 출시되지 않습니다. 이는 이러한 배포를 대상으로 하는 개발자의 관심사여야 합니다.

황소자리의 더 많은 기능

  • 보안은 Tauri 팀에게 정말 중요합니다. Tauri로 만든 앱은 처음부터 안전해야 합니다.
  • Tauri는 모든 프론트엔드 프레임워크와 호환되므로 스택을 변경할 필요가 없습니다.
  • 간단한 구성으로 중요한 기능을 선택하는 데 도움이 되는 많은 디자인 패턴이 있습니다.

황소자리의 장점

  • Tauri를 사용하면 웹용으로 구축한 코드 기반을 변경하지 않고도 기본 데스크톱 앱으로 전환할 수 있습니다.
  • 황소 자리 기반 프로젝트에서 Rust를 사용할 수 있지만 완전히 선택 사항입니다. 그렇게 하면 웹을 대상으로 하는 원래 코드 기반에서 아무 것도 변경할 필요가 없습니다.

현실 세계의 황소자리

Vue.js 커뮤니티의 일원이었다면 Vue.js의 핵심 팀 구성원인 Guillaume Chau에 대해 들어봤을 것입니다. 그는 Vue.js 명령줄 인터페이스(CLI)와 다른 멋진 Vue.js 라이브러리를 책임지고 있습니다. 그는 최근에 "JavaScript 프로젝트를 위한 그래픽 사용자 인터페이스"를 의미하는 guijs를 만들었습니다. JavaScript 프로젝트를 시각적으로 관리할 수 있는 Tauri 기반 기본 데스크톱 앱입니다.

Guijs는 Tauri로 가능한 것의 예이며 Vue.js 팀의 핵심 구성원이 앱에서 작업한다는 사실은 Tauri가 Vue.js(다른 프런트 엔드 프레임워크 중에서)와 잘 작동한다는 것을 알려줍니다. 관심이 있는 경우 GitHub에서 guijs 리포지토리를 확인하세요. 그리고 예, 오픈 소스입니다.

황소자리의 작동 원리

높은 수준에서 Tauri는 Node.js를 사용하여 HTML, CSS 및 JavaScript 렌더링 창을 사용자 인터페이스(UI)로 스캐폴딩하고 Rust에서 관리하고 부트스트랩합니다. 제품은 Linux(deb/appimage), macOS(app/dmg) 및 Windows(exe/msi)용 공통 파일 형식으로 배포할 수 있는 모놀리식 바이너리입니다.

Tauri 앱이 만들어지는 방법

Tauri 앱은 다음 단계를 통해 생성됩니다.

  1. 먼저 GUI 프레임워크에서 인터페이스를 만들고 HTML, CSS, JavaScript를 사용할 준비를 합니다.
  2. Tauri Node.js CLI가 이를 가져와서 구성에 따라 Rust 러너를 조정합니다.
  3. 개발 모드에서는 디버깅 및 Hot Module Reloading 이 포함된 WebView 창을 만듭니다.
  4. 빌드 모드에서는 번들러를 조작하고 설정에 따라 최종 애플리케이션을 생성합니다.

환경 설정

이제 Tauri가 무엇이고 어떻게 작동하는지 알았으므로 Tauri를 사용하여 개발할 컴퓨터를 설정하는 방법을 안내해 드리겠습니다.

참고 : 여기의 설정은 Linux 시스템용이지만 macOS 및 Windows용 가이드도 사용할 수 있습니다.

리눅스 설정

Tauri의 다중 언어 특성은 여러 도구 종속성이 필요함을 의미합니다. 몇 가지 종속성을 설치하여 시작하겠습니다. 다음을 실행합니다.

 $ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev build-essential curl libssl-dev appmenu-gtk3-module

위의 작업이 성공하면 Tauri에 런타임이 필요하므로 Node.js 설치를 진행합니다(아직 설치하지 않은 경우). 다음을 실행하여 수행할 수 있습니다.

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

그러면 nvm(Node.js 버전 관리자)이 설치되어 Node.js 런타임을 쉽게 관리하고 Node.js 버전 간에 쉽게 전환할 수 있습니다. 설치된 후 다음을 실행하여 Node.js 버전 목록을 확인하세요.

 nvm ls-remote

작성 당시 최신 버전은 14.1.0입니다. 다음과 같이 설치하십시오.

 nvm install v14.1.0

Node.js가 완전히 설정되면 Rust 컴파일러와 Rust 패키지 관리자인 Cargo를 설치해야 합니다. 아래 명령은 둘 다 설치합니다.

 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

이 명령을 실행한 후 다음을 실행하여 Cargo와 Rust가 $PATH 에 있는지 확인하십시오:

 rust --version

모든 것이 잘 되었다면 버전 번호를 반환해야 합니다.

Tauri 문서에 따르면 다음 명령을 실행하여 최신 버전인지 확인하십시오.

 $ rustup update stable

짜잔! 기계를 100% 황소자리에 사용할 수 있도록 준비하는 데 한 걸음 더 다가섰습니다. 이제 남은 것은 tauri-bundler 상자를 설치하는 것뿐입니다. CLI를 종료하고 새 CLI 창에서 아래 명령을 실행하는 것이 가장 좋습니다.

 $ cargo install tauri-bundler --force

유레카! 모든 것이 잘 되었다면 이제 기계가 Tauri를 사용할 준비가 된 것입니다. 다음으로 Tauri를 Vue.js와 통합하는 작업을 시작합니다. 가자!

실

Tauri 팀은 Yarn 패키지 관리자를 설치할 것을 권장합니다. 따라서 다음과 같이 설치해 보겠습니다.

 npm install -g yarn

그런 다음 다음을 실행합니다.

 yarn --version

모든 것이 작동했다면 버전 번호가 반환되었을 것입니다.

Vue.js와 황소자리 통합하기

이제 Tauri가 설치되었으므로 기존 웹 프로젝트를 번들로 묶습니다. Netlify에서 프로젝트의 라이브 데모를 찾을 수 있습니다. 쉘 역할을 할 저장소를 포크하십시오. 포크한 후 다음을 실행하여 포크를 복제해야 합니다.

 git clone https://github.com/[yourUserName]/nota-web

프로젝트를 복제한 후 다음을 실행하여 종속성을 설치합니다.

 yarn

그런 다음 다음을 실행합니다.

 yarn serve

애플리케이션은 localhost:8080 에서 실행되어야 합니다. 실행 중인 서버를 종료하고 Tauri용 Vue.js CLI 플러그인을 설치해 보겠습니다.

vue-cli-plugin-tauri

Tauri 팀은 Vue.js 단일 페이지 애플리케이션(SPA)을 빠르고 안전한 작은 크로스 플랫폼 데스크톱 앱으로 신속하게 조작하고 바꾸는 Vue.js CLI 플러그인을 만들었습니다. 해당 플러그인을 설치해 보겠습니다.

 vue add tauri

플러그인이 설치된 후 시간이 걸릴 수 있으며 창 제목을 묻는 메시지가 표시됩니다. nota 를 입력하고 "Enter"를 누르십시오.

Tauri 플러그인에 의해 도입된 변경 사항을 살펴보겠습니다.

패키지.json

Tauri 플러그인은 package.json 파일의 스크립트 섹션에 두 개의 스크립트를 추가했습니다. 그들은:

 "tauri:build": "vue-cli-service tauri:build", "tauri:serve": "vue-cli-service tauri:serve"

tauri:serve 스크립트는 개발 중에 사용해야 합니다. 실행해 보겠습니다.

 yarn tauri:serve

위의 내용은 앱을 시작하는 데 필요한 Rust 크레이트를 다운로드합니다. 그런 다음 개발 모드 에서 앱을 시작하고 디버깅 및 핫 모듈 다시 로드 와 함께 WebView 창을 생성합니다!

src-tauri

또한 플러그인이 앱 디렉토리의 루트에 src-tauri 디렉토리를 추가했음을 알 수 있습니다. 이 디렉터리에는 Tauri에서 데스크톱 앱을 구성하는 데 사용하는 파일과 폴더가 있습니다. 내용을 확인해보자:

 icons/ src/ build.rs cmd.rs main.rs Cargo.lock Cargo.toml rustfmt.toml tauri.conf.json tauri.js

우리가 해야 할 유일한 변경은 src-tauri/Cargo.toml 입니다. Cargo.toml 은 Rust의 package.json 파일과 같습니다. Cargo.toml 에서 아래 라인을 찾으세요.

 name = "app"

다음과 같이 변경합니다.

 name = "nota"

이것이 이 예제에서 변경해야 하는 전부입니다!

번들링

현재 플랫폼에 대한 nota 을 번들로 사용하려면 다음을 실행하기만 하면 됩니다.

 yarn tauri:build

참고 : 개발 창과 마찬가지로 이것을 처음 실행하면 Rust 상자를 수집하고 모든 것을 빌드하는 데 시간이 걸립니다. 후속 실행에서는 Tauri 상자 자체를 재건하기만 하면 됩니다.

위의 작업이 완료되면 현재 OS에 대한 nota 바이너리가 있어야 합니다. 저는 src-tauri/target/release/bundle/deb/ 디렉토리에 .deb 바이너리를 생성했습니다.*

플랫폼 간 이동

yarn tauri:build 명령이 운영 체제용 바이너리를 생성했다는 사실을 눈치채셨을 것입니다. 따라서 다른 운영 체제용 바이너리를 생성해 보겠습니다. 이를 달성하기 위해 GitHub에서 워크플로를 설정합니다. 여기에서 GitHub를 플랫폼 간 앱의 배포 매체로 사용하고 있습니다. 따라서 사용자는 프로젝트의 "릴리스" 탭에서 바이너리를 다운로드할 수 있습니다. 우리가 구현할 워크플로는 GitHub 작업의 힘을 통해 자동으로 바이너리를 빌드합니다. 해보자.

황소자리 워크플로 만들기

Jacob Bolda 덕분에 GitHub에서 Tauri를 사용하여 크로스 플랫폼 앱을 자동으로 만들고 출시하는 워크플로가 있습니다. 다양한 플랫폼(Linux, Mac 및 Windows)용 바이너리를 빌드하는 것 외에도 이 작업은 GitHub에 릴리스로 바이너리를 업로드합니다. 또한 이를 달성하기 위해 Jacob이 만든 Create Release 작업을 사용합니다.

이 워크플로를 사용하려면 nota-web 의 루트에 .github 디렉터리를 만듭니다. 이 디렉터리에서 workflows 라는 다른 디렉터리를 만듭니다. 그런 다음 .github/workflows/ 에 워크플로 파일을 만들고 이름을 release-tauri-app.yml 합니다.

release-tauri-app.yml 에서 Linux, macOS 및 Windows용 바이너리를 빌드하는 워크플로를 추가합니다. 이 워크플로는 바이너리도 GitHub에 초안 릴리스로 업로드합니다. 워크플로는 마스터에 푸시할 때마다 트리거됩니다.

release-tauri-app.yml 열고 아래 스니펫을 추가하세요.

 name: release-tauri-app on: push: branches: - master paths: - '**/package.json' jobs: check-build: runs-on: ubuntu-latest timeout-minutes: 30 steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build create-release: needs: check-build runs-on: ubuntu-latest outputs: RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }} steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: get version run: echo ::set-env name=PACKAGE_VERSION::$(node -p "require('./package.json').version") — name: create release id: create_tauri_release uses: jbolda/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }} release_name: 'Release nota app v${{ env.PACKAGE_VERSION }}' body: 'See the assets to download this version and install.' draft: true prerelease: false create-and-upload-assets: needs: create-release runs-on: ${{ matrix.platform }} timeout-minutes: 30 strategy: fail-fast: false matrix: platform: [ubuntu-latest, macos-latest, windows-latest] include: — platform: ubuntu-latest buildFolder: bundle/deb ext: \_0.1.0_amd64.deb compressed: '' — platform: macos-latest buildFolder: bundle/osx ext: .app compressed: .tgz — platform: windows-latest buildFolder: '' ext: .x64.msi compressed: '' steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk (ubuntu only) if: matrix.platform == 'ubuntu-latest' run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/release/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset id: upload-release-asset uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/release/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip — name: build tauri app in debug mode run: yarn tauri:build --debug — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/debug/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset with debug mode on id: upload-release-asset-debug-mode uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/debug/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota-debug{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip

워크플로를 테스트하려면 변경 사항을 커밋하고 포크의 master 분기에 푸시합니다. GitHub에 성공적으로 푸시한 후 GitHub에서 "작업" 탭을 클릭한 다음 "빌드 확인" 링크를 클릭하여 워크플로의 진행 상황을 볼 수 있습니다.

작업이 성공적으로 실행되면 GitHub의 리포지토리 페이지에 있는 "릴리스"에서 초안 릴리스를 볼 수 있습니다. 그런 다음 릴리스를 게시할 수 있습니다.

결론

이 기사에서는 안전한 크로스 플랫폼 및 작은 기본 애플리케이션을 구축하기 위한 다국어 도구 모음을 소개했습니다. 우리는 Tauri가 무엇인지, Vue.js와 어떻게 통합하는지 살펴보았습니다. 마지막으로, yarn tauri:build 를 실행하여 첫 번째 Tauri 앱을 번들로 묶었고 GitHub 작업을 사용하여 Linux, macOS 및 Windows용 바이너리도 생성했습니다.

당신이 Tauri에 대해 어떻게 생각하는지 알려주세요 — 당신이 Tauri로 무엇을 만드는지 보고 싶습니다. 궁금한 점이 있으면 Discord 서버에 가입할 수 있습니다.

이 기사의 리포지토리는 GitHub에 있습니다. 또한 GitHub 워크플로에서 생성된 바이너리를 참조하십시오.