アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

DockerでTauriの開発環境を構築する方法

Featured image of the post

Tauriは、軽量でセキュアなデスクトップアプリケーションを開発するためのフレームワークとして注目を集めています。特にWeb技術(HTML、CSS、JavaScript)を活用しつつ、ネイティブアプリのような高速で軽量な実行ファイルを生成できるため、Electronの代替としても人気が高まっています。

しかし、Tauriの開発環境を手動で整えるのは、依存関係や設定ファイルなどの準備が必要で、手間がかかることがあります。そこで、Dockerを使ってTauriの開発環境を効率的に構築する方法を紹介します。

Dockerを使うメリット

Dockerは、アプリケーションの実行環境をコンテナ化して管理するツールです。これにより、開発者はホスト環境に依存せず、同じ環境での開発が可能になります。Dockerを使うことで、Tauriアプリケーションの開発環境を迅速にセットアップし、以下のメリットを享受できます。

  1. 環境の統一: チーム全員が同じ環境で開発でき、依存関係や設定の違いによるトラブルを回避できます。
  2. クリーンなホスト環境: TauriやRustなど、開発に必要なパッケージをホストマシンにインストールせずに済みます。
  3. 簡単なセットアップと移行: 新しいマシンに移行する際、コンテナイメージを使えば短時間で開発環境を再現可能です。
開発環境に必要なもの

Tauriの開発には、以下の依存関係が必要です。

  • Node.js: TauriのWeb部分のビルドに必要。
  • Rust: Tauriが内部でRustを使用しているため、Rustコンパイラが必要です。
  • Tauri CLI: Tauriアプリをビルドおよび管理するために使われます。

これらのツールを一つずつインストールして設定するのは手間がかかりますが、Dockerを使うことで簡単に一括で管理できます。

Dockerfileの作成

まず、Dockerfileを作成し、開発環境に必要なツールをインストールします。以下のコードは、Tauriの開発に必要な環境を含んだDockerfileの例です。

# ベースイメージとして公式のNode.jsイメージを使用
FROM node:18-slim

# 必要なパッケージをインストール
RUN apt-get update && apt-get install -y \
    build-essential \
    curl \
    libssl-dev \
    libgtk-3-dev \
    libwebkit2gtk-4.0-dev \
    wget \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

# Rustをインストール
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
ENV PATH="/root/.cargo/bin:${PATH}"

# Tauri CLIのインストール
RUN npm install -g @tauri-apps/cli

# プロジェクト用ディレクトリの作成
WORKDIR /app

# プロジェクトの依存関係をコピーしてインストール
COPY package*.json ./
RUN npm install

# プロジェクトファイルをコピー
COPY . .

# コンテナのデフォルトコマンド
CMD ["npm", "run", "tauri", "dev"]

このDockerfileでは、Node.jsとRustをベースに、Tauriの依存関係であるGTKやWebKit2も含めてインストールしています。これにより、コンテナ内でTauriの開発とビルドが可能になります。

Docker Composeを使った簡単な管理

複雑なDockerコマンドを避け、簡単に環境を管理するためには、docker-compose.ymlを使うと便利です。以下はその例です。

version: "3.8"
services:
  tauri:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app
    ports:
      - "3000:3000"
      - "1420:1420"
    command: npm run tauri dev

ここでは、ローカルのプロジェクトフォルダをコンテナ内の/appにマウントし、ホストマシンとコンテナの間でファイルを同期できるようにしています。ポート3000や1420は、アプリケーションやTauriのデバッグ用に開けておきます。

開発環境のセットアップ手順
  1. Dockerイメージのビルド

    まず、以下のコマンドでDockerイメージをビルドします。

    docker-compose build
    
    
  2. コンテナの起動

    開発環境を起動するためには、以下のコマンドを実行します。

    docker-compose up

    これにより、Tauriアプリケーションの開発サーバーが起動し、ローカル環境のブラウザからアクセスできるようになります。

  3. アプリケーションの開発

    ローカルのプロジェクトフォルダで開発を行うと、コンテナ内の環境にも即座に反映されます。npm run tauri devコマンドにより、アプリケーションのホットリロードが有効になっているため、コードを編集するたびにアプリが自動で再ビルドされます。

注意点とトラブルシューティング
  • 権限エラー: Dockerコンテナ内のファイルシステムとホストのユーザー権限の違いで、ファイルの編集ができない場合があります。その場合は、docker-compose.ymlにユーザー情報を追加してみてください。
    user: "${UID}:${GID}"
  • 依存関係の問題: Tauriの依存パッケージは、OSによって異なるため、必要に応じてDockerfileにパッケージを追加してください。例えば、Windowsでの開発には特定のライブラリが追加で必要になることがあります。
まとめ

Dockerを使うことで、Tauriの開発環境を迅速かつ簡単に構築することができます。依存関係の煩わしさから解放され、チーム全体で一貫した環境を提供できる点は、開発効率を向上させる大きなメリットです。Tauriでのデスクトップアプリケーション開発を検討している方は、ぜひDockerを活用して効率的な開発を行ってください。

プログラミング学習でお悩みですか?

現役エンジニアがあなたの学習をマンツーマンでサポートします。

  • 学習の進め方がわからない
  • ポートフォリオの作り方を知りたい
  • 現場で使える技術を学びたい
まずは30分の無料相談

相談は完全無料・オンラインで気軽に

あなたを爆速で成長させるメンタリングプログラムはこちら

メンタープログラムバナー

プログラミングを学ぶならテックアカデミー

テックアカデミー
無料相談はこちら