QNAP上のUbuntuコンテナでVS Code Remote Tunnelを動かし，iPad・PC・スマホから同じワークスペースにアクセスする

概要
やりたいこと
構成
ディレクトリ構成
docker-compose.yml
Container Stationでコンテナを起動
composeフォルダに移動
Dockerfile
コンテナ起動
初回認証
1. 認証情報が保存されているか確認する
codeを手動起動からCompose 管理に戻す
動作確認できたこと
まとめ
補足

概要

QNAP の Container Station 上に Ubuntu コンテナを作成し、VS Code Remote Tunnel を動かすことで、iPad・PC・スマホから同じ VS Code ワークスペースにアクセスできる環境を構築した。

この記事では、動作確認できた最小構成と、セットアップ時に詰まったポイントをまとめる。

やりたいこと

QNAP を母艦にして執筆用ワークスペースを集約する
iPad・PC・スマホから同じワークスペースを開けるようにする
code-server ではなく、VS Code 公式の Remote Tunnel を使う
できるだけシンプルな構成で動かす

構成

QNAP の Container Station で Ubuntu コンテナを起動
コンテナ内に VS Code CLI をインストール
code tunnel を常駐させる
各デバイスのブラウザから vscode.dev/tunnel/... で接続

ポイントは、QNAP 上で GUI の VS Code を動かすのではなく、Remote Tunnel の入口だけを動かすこと。

ディレクトリ構成

composeのホームフォルダは以下は、以下の構成になる。

./workspace
./config

フォルダ	用途
`workspace`	作業ファイル
`config`	VS Code CLI の認証情報や設定

docker-compose.yml

services:
  vscode-tunnel:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: vscode-tunnel
    restart: unless-stopped
    environment:
      TZ: Asia/Tokyo
      HOME: /config
      TUNNEL_NAME: writing
    volumes:
      - ./workspace:/workspace
      - ./config:/config
    working_dir: /workspace
    command: sleep infinity

設定のポイントは以下の通り。

/workspace に作業用フォルダをマウント
/config に認証情報を保存
HOME=/config を設定して保存先を固定
TUNNEL_NAME: writing でトンネル名を指定

TUNNEL_NAMEは、管理しやすい名前を付けること。

Container Stationでコンテナを起動

一度Container Stationでコンテナを起動させて、実フォルダや定義ファイルを生成します。

QNAPのContainer Stationで、アプリケーションの作成からコンテナサービスを作成する画面のスクリーンショット

composeフォルダに移動

QNAPにsshでアクセスし、Docker Composeのフォルダに移動します。

vscode-tunnelというサービス名にしていた場合、以下のような場所にあります。

/share/CACHEDEV1_DATA/Container/container-station-data/application/vscode-tunnel

Dockerfile

vscode-tunnel配下に、Dockerfileを配置します。

FROM ubuntu:24.04
ENV DEBIAN_FRONTEND=noninteractive
RUN apt-get update && apt-get install -y \
    curl \
    ca-certificates \
    git \
    openssh-client \
    bash \
    procps \
    tar \
    xz-utils \
    unzip \
    jq \
    nano \
    vim \
    ripgrep \
    && rm -rf /var/lib/apt/lists/*
WORKDIR /tmp
RUN curl -Lk "https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64" \
    --output vscode_cli.tar.gz \
    && tar -xf vscode_cli.tar.gz \
    && mv code /usr/local/bin/code \
    && chmod +x /usr/local/bin/code \
    && rm -f vscode_cli.tar.gz
WORKDIR /workspace

コンテナ起動

sudo docker compose up -d --build

ログを確認する。

sudo docker compose logs -f

初回は認証待ちになっている。

初回認証

初回はコンテナ内に入り、手動で認証する。

echo $TUNNEL_NAME  # tunnel名が入っていることを確認
sudo docker compose exec -it vscode-tunnel sh
/usr/local/bin/code tunnel --name $TUNNEL_NAME --accept-server-license-terms --verbose

認証画面で GitHub Account または Microsoft Account を選ぶ。

認証が通ると、次のような URL が表示される。

Open this link in your browser https://vscode.dev/tunnel/writing/workspace

この URL をブラウザで開くと、VS Code が起動する。

認証情報が保存されているか確認する

echo $HOME
ls -la /config
find /config -maxdepth 3 -type f | sort

正常に保存されていれば、次のようなファイルが作成される。

/config/.vscode/cli/code_tunnel.json
/config/.vscode/cli/token.json

codeを手動起動からCompose 管理に戻す

動作確認が終わったら、Compose の command を本番用に戻す。

command: >
  sh -lc "/usr/local/bin/code tunnel --name $$TUNNEL_NAME --accept-server-license-terms"

再起動する。

sudo docker compose down
sudo docker compose up -d --build

ログを確認する。

sudo docker compose logs -f

正常に起動すると、次のようなログが出る。

Open this link in your browser https://vscode.dev/tunnel/writing/workspace

接続時には、以下のようなログも出る。

Opened new client on channel ...
session is running

動作確認できたこと

QNAP 上の Ubuntu コンテナで code tunnel を実行できる
vscode.dev/tunnel/... の URL が発行される
ブラウザから VS Code を開ける
iPad・PC・スマホから同じワークスペースにアクセスできる

まとめ

QNAP の Container Station 上に Ubuntu コンテナを立て、VS Code Remote Tunnel を動かすことで、複数デバイスから同じワークスペースにアクセスできる環境を構築できた。

ブログ執筆やメモ用途で QNAP を母艦にしてワークスペースを集約したい場合に、有力な選択肢となる。

補足

今回はブラウザから VS Code を開けるところまでを確認した
GitHub Copilot や拡張機能の使い勝手は今後検証予定
PC ではローカルの VS Code を使い、iPad・スマホでは Remote Tunnel 経由で同じワークスペースに入る運用が現実的

iPad・PC・スマホからVSCodeの同じワークスペースにアクセスする

概要