🖥

devcontainer で GUI アプリを開発する

2022/11/21に公開約3,100字

概要

devcontainer で GUI アプリを開発します。

GUI アプリは TAURI を使用します。

手順

  1. devcontainer を作成します。

    .devcontainer/devcontainer.json
    {
        "name": "gui-app-in-devcontainer",
        "build": {
            "dockerfile": "./Dockerfile"
        },
        // Features to add to the dev container. More info: https://containers.dev/features.
        "features": {
            "ghcr.io/devcontainers/features/node:1": {
                "version": "18"
            },
            "ghcr.io/devcontainers/features/rust:1": {
                "version": "1.63"
            }
        }
    
        // Use 'forwardPorts' to make a list of ports inside the container available locally.
        // "forwardPorts": [],
    
        // Use 'postCreateCommand' to run commands after the container is created.
        // "postCreateCommand": "uname -a",
    
        // Configure tool-specific properties.
        // "customizations": {},
    
        // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
        // "remoteUser": "root"
    }
    
    .devcontainer/Dockerfile
    FROM mcr.microsoft.com/devcontainers/base:jammy
    
    ENV DISPLAY=:1
    
    RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
        && apt-get -y install --no-install-recommends \
        # https://tauri.app/v1/guides/getting-started/prerequisites#1-system-dependencies
        libwebkit2gtk-4.0-dev \
        build-essential \
        curl \
        wget \
        libssl-dev \
        libgtk-3-dev \
        libayatana-appindicator3-dev \
        librsvg2-dev \
        # GUI
        lxde \
        # TigerVNC
        tigervnc-standalone-server \
        tigervnc-common \
        tigervnc-tools \
        # noVNC
        novnc \
        websockify
    
  2. devcontainer を起動してバージョンを確認します。

    vscode ➜ /workspaces/gui-app-in-devcontainer $ node -v
    v18.12.1
    vscode ➜ /workspaces/gui-app-in-devcontainer $ rustc --version
    rustc 1.63.0 (4b91a6ea7 2022-08-08)
    
  3. tauri のアプリを作成します。

    npm create tauri-app
    
  4. TigerVNC を起動します。

    USER=root vncserver :1 -geometry 800x600 -depth 24
    
    • TigerVNC の停止は次を実行します。

      vncserver -kill :1
      
  5. TigerVNC の起動を確認します。

    vncserver -list
    
    vscode ➜ /workspaces/gui-app-in-devcontainer $ vncserver -list
    
    TigerVNC server sessions:
    
    X DISPLAY #     RFB PORT #      RFB UNIX PATH   PROCESS ID #    SERVER
    1               5901                            2946            Xtigervnc
    vscode ➜ /workspaces/gui-app-in-devcontainer $ 
    
  6. noVNC を起動します。

    websockify -D --web=/usr/share/novnc/ 6080 localhost:5901
    
  7. ブラウザで noVNC を開き、パスワードを入力します。

  8. アプリを起動します。

    npm run tauri dev
    

Discussion

ログインするとコメントできます