DEV-Anywhere

PCとスマートフォンでの表示:

PCブラウザ	スマートフォン

概要

このプロジェクトは、自宅PCをリモート開発環境として活用するための仕組みです。外出先からスマホやタブレットでブラウザを開くだけで、自宅PCに構築したVS Code環境にアクセスできます。

Tailscaleを使ったプライベートネットワークと、Dockerコンテナ化されたCode-serverの組み合わせで、セキュアなリモート開発を実現しています。

より詳しい情報はセットアップガイドをご覧ください。

仕組み

以下の図のように、Tailscaleが外部からの接続を安全に受け付け、Nginxを経由してCode-serverへアクセスします。

flowchart TB
  subgraph Server["自宅PC"]
    subgraph Docker["Docker環境"]
      nginx["Nginxリバースプロキシ"]
      code["VS Code (code-server)"]
    end
    tsserve["Tailscale"]
  end
  
  Phone["スマホ/タブレット"] -->|HTTPS| tsserve
  tsserve --> nginx --> code

Loading

セットアップ方法

# Dockerネットワークを作成
docker network create devmesh

# Code-server環境のセットアップ
cd projects/code-dev
mkdir -p workspace data
sudo chown -R 1000:1000 workspace data
docker compose up -d --build

# Nginxの設定と起動
cd ../infra/nginx-proxy
docker compose up -d

# Tailscaleで外部公開（HTTPSも自動設定されます）
sudo tailscale serve --https=443 --bg http://127.0.0.1:8081

詳しい説明が必要な場合はセットアップガイドを見てください。

できること

• スマホやタブレットから自宅PCのVS Code環境にアクセス
• GitHubとの連携

セキュリティ対策

• Tailscaleによるプライベートネットワーク
• コンテナは一般ユーザー権限で実行
• パスワード認証とGitHub認証の二重保護