iPadで開発環境を構築: code-serverとDockerで実現するモバイル開発ワークフロー

2025-03-07
IT系

背景: モバイルで開発作業を行う課題

VPSとVS Code、Remote SSHという最強の組み合わせで開発環境を構築したものの、iPadでこの環境を活用したいという課題に直面していました。iPadにはVS Code公式アプリが存在せず、「Visual Studio Code for the Web」を使うことになりますが、これではVPSのパワーを十分に活用できません。

そこで発見したのが「code-server」—リモートサーバー上で動作するVS Codeエディターです。さらに喜ばしいことに、Dockerイメージも公式に提供されています。これを活用すれば、iPadからでもフル機能のVS Code環境にアクセスできるようになります。

code-serverとは？

code-serverはVS Codeをブラウザで利用できるようにするオープンソースプロジェクトです。VS Codeとほぼ同じ機能と拡張機能のサポートを提供しながら、サーバー上で動作し、任意のデバイスからブラウザ経由でアクセスできます。

Docker Hubのcodercom/code-serverイメージを使えば、簡単にセットアップできます。

Dockerでcode-serverを構築する手順

docker-compose.yml設定

以下のdocker-compose.yml設定で、既存のnginx-proxyと連携するcode-server環境を構築できます:

services:
  code-server:
    image: codercom/code-server:latest
    container_name: code-server
    restart: unless-stopped
    volumes:
      - ~/.config:/home/coder/.config
      - <<VPSサーバー側のcode-serverにマウントさせたいディレクトリパス>>:/home/coder/<<corder-server側のマウント先>>
      # 必要に応じて他のディレクトリを追加
    environment:
      - PASSWORD=${SECURE_PASSWORD}
      - TZ=Asia/Tokyo
      # nginx-proxy用の環境変数
      - VIRTUAL_HOST=${HOST_NAME}
      - VIRTUAL_PORT=8080
      - LETSENCRYPT_HOST=${HOST_NAME}
      - LETSENCRYPT_EMAIL=${LETSENCRYPT_EMAIL}
    user: "${UID:-1000}:${GID:-1000}"
    # nginx-proxyが作成した既存のネットワーク
    networks:
      - nginx-proxy-ga-tsukutta-network

# nginx-proxyが作成した既存のネットワーク
networks:
  nginx-proxy-ga-tsukutta-network:
    external: true

.env ファイルの設定

セキュリティや接続情報を.envファイルで管理します:

# 強力なパスワードを設定
SECURE_PASSWORD="your_strong_password_here"

# ホスト名とメールアドレス
HOST_NAME=code.yourdomain.com
LETSENCRYPT_EMAIL=your-email@example.com

# ユーザーIDとグループID (id -u と id -g コマンドで確認)
UID=1000
GID=1000

マウント設定のポイント

VPSのファイルシステムをcode-serverから操作できるように適切なマウント設定が必要です。実用的な例としては:

volumes:
  - ~/.config:/home/coder/.config
  - /home/username/projects:/home/coder/projects
  - /var/www:/home/coder/www
  - /etc/nginx:/home/coder/nginx-config

適切なマウント設定により、開発に必要なファイルにだけアクセスできるようになります。

セキュリティ対策

code-serverはインターネットに公開するため、セキュリティには特に注意が必要です。以下の3つの対策を組み合わせることで、安全性を高めることができます:

1. 二重の認証設定

Nginx Proxyを使って、IPフィルタリングとBasic認証を両方設定します:

# Basic認証の設定
auth_basic "Restricted Area";
auth_basic_user_file /etc/nginx/htpasswd;

# 両方の条件を満たす必要がある
satisfy all;

# 許可するIPアドレスのリスト
allow 123.456.789.10;  # あなたの接続元IP
deny all;              # その他すべて拒否

この設定により、許可したIPアドレスからのアクセスであっても、Basic認証を通過しなければアクセスできなくなります。

2. オンデマンド運用

常時起動ではなく、必要なときだけコンテナを起動する運用方法も有効です:

iPadにSSHクライアントアプリを導入
開発が必要なときだけSSHでVPSに接続
code-serverを起動: docker compose up -d
作業が終わったら停止: docker compose down

この運用方法により、攻撃対象となる時間を最小限に抑えられます。

3. 最小権限の原則

code-serverからアクセスできるディレクトリを必要最小限に制限します。すべてのVPSファイルシステムへのアクセスを許可せず、プロジェクトディレクトリや設定ファイルなど、実際に作業が必要なディレクトリだけをマウントしましょう。

実運用のヒント

Dockerコマンドの実行: code-server内からはdockerコマンドを実行できません。Docker操作はSSH経由で直接行いましょう。
便利な拡張機能: Remote Development拡張機能は使えませんが、多くのVS Code拡張機能は利用可能です。
パフォーマンス: VPSのスペックによって快適さが変わります。最低でも2GB RAM、2CPUコアを推奨します。

まとめ

code-serverとDockerを組み合わせることで、iPadからでも本格的な開発環境にアクセスできるようになります。適切なセキュリティ対策を施し、必要なディレクトリだけをマウントすることで、安全かつ効率的なモバイル開発環境を構築できます。

場所を選ばない開発環境は、リモートワークの自由度をさらに高めてくれます。ぜひ試してみてください！