テキストエディタcode-server（VS Code）を導入

2026-03-25

開発環境としてテキストエディタもWebブラウザから使えると便利です。
これにはVS Code（Visual Studio Code）をWebブラウザ上で動作させるオープンソースのツール「code-server」がベストでしょう。

Dockerでインストールする

以下を実行し、セットアップスクリプトを貼り付けてインストールします。

mkdir -p /opt/docker/codeserver
cd /opt/docker/codeserver
nano setup-codeserver-docker.sh
sudo bash setup-codeserver-docker.sh
#!/bin/bash
# ============================================================
#  Code-Server Docker版 セットアップ
#  対象OS: Ubuntu 25.10
#  実行方法: sudo bash setup-codeserver-docker.sh
#
#  起動後にブラウザで Japanese Language Pack をインストール後、
#  Ctrl+Shift+R でリロードすれば日本語UIになります。
# ============================================================

set -euo pipefail

INSTALL_DIR="/opt/docker/codeserver"

GREEN='\033[0;32m'; CYAN='\033[0;36m'; YELLOW='\033[1;33m'; RED='\033[0;31m'; NC='\033[0m'
info()    { echo -e "${CYAN}[INFO]${NC} $*"; }
success() { echo -e "${GREEN}[OK]${NC}   $*"; }
error()   { echo -e "${RED}[ERR]${NC}  $*"; exit 1; }

[[ $EUID -ne 0 ]] && error "root権限で実行してください: sudo bash $0"
docker compose version &>/dev/null || error "docker compose が見つかりません。"

REAL_USER="${SUDO_USER:-$(logname 2>/dev/null || echo $USER)}"
PUID=$(id -u "$REAL_USER" 2>/dev/null || echo 1000)
PGID=$(id -g "$REAL_USER" 2>/dev/null || echo 1000)

# --- パスワード自動生成 ---
info "パスワードを自動生成中..."
PASSWORD=$(openssl rand -base64 24 | tr -dc 'a-zA-Z0-9' | head -c 32)
HASHED_PASSWORD=$(echo -n "$PASSWORD" | sha256sum | cut -d' ' -f1)

# --- ディレクトリ作成 ---
info "ディレクトリを作成中: $INSTALL_DIR"
mkdir -p "$INSTALL_DIR"/{config,workspace}

# コンテナ内ユーザー (PUID/PGID=1000) が書き込めるよう権限を設定
chown -R 1000:1000 "$INSTALL_DIR/config" "$INSTALL_DIR/workspace"
success "ディレクトリ権限設定完了"

# --- argv.json: 日本語化のキモ ---
info "argv.json を配置中..."
mkdir -p "$INSTALL_DIR/config/data/User"
cat > "$INSTALL_DIR/config/data/User/argv.json" <<'EOF'
{
  "locale": "ja"
}
EOF
chown -R 1000:1000 "$INSTALL_DIR/config"
success "argv.json 配置完了"

# --- .env 生成 ---
info ".env を生成中..."
cat > "$INSTALL_DIR/.env" <<EOF
# 自動生成: $(date '+%Y-%m-%d %H:%M:%S')
HASHED_PASSWORD=${HASHED_PASSWORD}
HOST_PORT=8080
TZ=Asia/Tokyo
PUID=${PUID}
PGID=${PGID}
EOF
chmod 600 "$INSTALL_DIR/.env"
success ".env 生成完了"

# --- docker-compose.yml 生成 ---
info "docker-compose.yml を生成中..."
cat > "$INSTALL_DIR/docker-compose.yml" <<'COMPOSE'
services:
  code-server:
    image: lscr.io/linuxserver/code-server:latest
    container_name: code-server
    restart: unless-stopped
    environment:
      - PUID=${PUID}
      - PGID=${PGID}
      - TZ=${TZ}
      - HASHED_PASSWORD=${HASHED_PASSWORD}
      - DEFAULT_WORKSPACE=/workspace
      - LANG=ja_JP.UTF-8
      - LC_ALL=ja_JP.UTF-8
    ports:
      - "${HOST_PORT}:8443"
    volumes:
      - ./config:/config
      - ./workspace:/workspace
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:8443"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 20s
COMPOSE
success "docker-compose.yml 生成完了"

# --- ファイアウォール ---
if ufw status 2>/dev/null | grep -q "Status: active"; then
  info "ufw でポート 8080 を開放中..."
  ufw allow 8080/tcp
  success "ポート開放済み"
fi

# --- 起動 ---
info "コンテナを起動中..."
cd "$INSTALL_DIR"
docker compose pull
docker compose up -d

# --- 起動確認 ---
info "起動確認中 (最大40秒)..."
for i in $(seq 1 13); do
  curl -sf http://localhost:8080 &>/dev/null && { success "起動確認完了"; break; }
  echo -n "."; sleep 3
done
echo ""

# --- 完了メッセージ ---
HOST_IP=$(hostname -I | awk '{print $1}')
echo ""
echo -e "${GREEN}========================================${NC}"
echo -e "${GREEN}  Code-Server セットアップ完了！${NC}"
echo -e "${GREEN}========================================${NC}"
echo ""
echo -e "  🌐 アクセスURL : ${CYAN}http://${HOST_IP}:8080${NC}"
echo -e "  🔑 パスワード  : ${YELLOW}${PASSWORD}${NC}"
echo ""
echo -e "  日本語化手順:"
echo -e "    1. Extensions で 'Japanese Language Pack' をインストール"
echo -e "    2. Ctrl+Shift+R でリロード → 日本語UIになります"
echo ""
echo -e "  停止    : ${CYAN}cd $INSTALL_DIR && docker compose down${NC}"
echo -e "  ログ確認: ${CYAN}cd $INSTALL_DIR && docker compose logs -f${NC}"
echo ""

http://ホスト名:8080にアクセスしてパスワードを入力したら使えます。
左のメニューからブロックみたいなマークをクリックして日本語パッケージをインストールすれば日本語化されます。

Japanese Language Pack

テーマの変更は、左上のメニューから「ファイル」-「ユーザー設定」-「テーマ」-「配色テーマ」から行えます。もしくは左下の「設定」-「テーマ」-「配色テーマ」から。

既存のフォルダ内のファイルを編集したいならボリュームに追加したあと

sudo nano /opt/docker/codeserver/docker-compose.yml
    volumes:
      - ./config:/config
      - ./workspace:/workspace
      - /opt/docker/test/:opt/docker/test/

権限を変更して編集できるようにしておきましょう（必要に応じて-Rオプションなども）

sudo chown 1000:1000 /opt/docker/test/

設定したらコンテナを再起動します。

cd /opt/docker/codeserver
sudo docker compose restart

パスワード変更手順

1. .env を編集

HASHED_PASSWORD はSHA256ハッシュなので、新しいパスワードのハッシュを生成して書き換えます。

# 新しいパスワードのハッシュを生成
echo -n '新しいパスワード' | sha256sum | cut -d' ' -f1

出力されたハッシュを .env の HASHED_PASSWORD= に貼り付けます。

sudo nano /opt/docker/codeserver/.env

2. コンテナを再起動して反映

cd /opt/docker/codeserver
sudo docker compose up -d

ハッシュ生成が面倒な場合

ハッシュパスワードの代わりに平文のパスワードを使う方法もあります。.env を下記のように変更すれば、ハッシュ不要です。

PASSWORD=新しいパスワード

docker-compose.ymlのenvironmentも変更します。

sudo nano /opt/docker/codeserver/docker-compose.yml
- PASSWORD=${PASSWORD}

（HASHED_PASSWORD の行を PASSWORD に変更）

ただしハッシュ方式の方がセキュリティ的には無難です。

Dockerを使わず直接インストールする

ローカルファイルを扱ったりするなら、直接インストールしておいたほうが良いですね。

nano install-codeserver.sh
sudo bash install-codeserver.sh
#!/bin/bash
# ============================================================
#  Code-Server ネイティブインストール
#  対象OS: Ubuntu 25.10 (Docker不使用)
#  実行方法: sudo bash install-codeserver.sh
#
#  起動後にブラウザで Japanese Language Pack をインストール後、
#  Ctrl+Shift+R でリロードすれば日本語UIになります。
# ============================================================

set -euo pipefail

GREEN='\033[0;32m'; CYAN='\033[0;36m'; YELLOW='\033[1;33m'; RED='\033[0;31m'; NC='\033[0m'
info()    { echo -e "${CYAN}[INFO]${NC} $*"; }
success() { echo -e "${GREEN}[OK]${NC}   $*"; }
error()   { echo -e "${RED}[ERR]${NC}  $*"; exit 1; }

[[ $EUID -ne 0 ]] && error "root権限で実行してください: sudo bash $0"

REAL_USER="${SUDO_USER:-$(logname 2>/dev/null || echo $USER)}"
REAL_HOME=$(getent passwd "$REAL_USER" | cut -d: -f6)
info "インストール対象ユーザー: $REAL_USER ($REAL_HOME)"

# --- パスワード自動生成 ---
info "パスワードを自動生成中..."
PASSWORD=$(openssl rand -base64 24 | tr -dc 'a-zA-Z0-9' | head -c 32)

# --- 依存パッケージ ---
info "依存パッケージをインストール中..."
apt-get update -qq
apt-get install -y -qq curl wget locales

# --- 日本語ロケール ---
info "日本語ロケールを設定中..."
locale-gen ja_JP.UTF-8
update-locale LANG=ja_JP.UTF-8 LC_ALL=ja_JP.UTF-8
success "日本語ロケール設定完了"

# --- 最新バージョン取得 ---
info "最新バージョンを確認中..."
LATEST=$(curl -fsSL https://api.github.com/repos/coder/code-server/releases/latest \
  | grep '"tag_name"' | sed 's/.*"v\([^"]*\)".*/\1/')
info "最新バージョン: v${LATEST}"

# --- ダウンロード & インストール ---
DEB_URL="https://github.com/coder/code-server/releases/download/v${LATEST}/code-server_${LATEST}_amd64.deb"
info "ダウンロード中..."
wget -q --show-progress -O /tmp/code-server.deb "$DEB_URL"
dpkg -i /tmp/code-server.deb
rm /tmp/code-server.deb
success "code-server v${LATEST} インストール完了"

# --- config.yaml 生成 ---
CONFIG_DIR="$REAL_HOME/.config/code-server"
mkdir -p "$CONFIG_DIR"
cat > "$CONFIG_DIR/config.yaml" <<EOF
bind-addr: 0.0.0.0:8080
auth: password
password: ${PASSWORD}
cert: false
EOF
chown -R "$REAL_USER:$REAL_USER" "$CONFIG_DIR"
chmod 600 "$CONFIG_DIR/config.yaml"
success "config.yaml 生成完了"

# --- argv.json: 日本語化のキモ ---
info "argv.json を配置中..."
VSCODE_DIR="$REAL_HOME/.local/share/code-server/User"
mkdir -p "$VSCODE_DIR"
cat > "$VSCODE_DIR/argv.json" <<'EOF'
{
  "locale": "ja"
}
EOF
chown -R "$REAL_USER:$REAL_USER" "$REAL_HOME/.local/share/code-server"
success "argv.json 配置完了"

# --- systemd サービス登録 ---
info "systemd サービスを登録中..."
cat > /etc/systemd/system/code-server.service <<EOF
[Unit]
Description=code-server (VS Code in Browser)
After=network.target

[Service]
Type=exec
User=${REAL_USER}
WorkingDirectory=${REAL_HOME}
ExecStart=/usr/bin/code-server
Restart=always
RestartSec=5
Environment=LANG=ja_JP.UTF-8
Environment=LC_ALL=ja_JP.UTF-8
Environment=HOME=${REAL_HOME}

[Install]
WantedBy=multi-user.target
EOF
systemctl daemon-reload
systemctl enable code-server
systemctl restart code-server
success "systemd サービス登録・起動完了"

# --- ファイアウォール ---
if ufw status 2>/dev/null | grep -q "Status: active"; then
  info "ufw でポート 8080 を開放中..."
  ufw allow 8080/tcp
  success "ポート開放済み"
fi

# --- 起動確認 ---
info "起動確認中..."
sleep 4
systemctl is-active --quiet code-server && success "code-server 正常起動" \
  || { echo ""; journalctl -u code-server -n 20 --no-pager; }

# --- 完了メッセージ ---
HOST_IP=$(hostname -I | awk '{print $1}')
echo ""
echo -e "${GREEN}========================================${NC}"
echo -e "${GREEN}  Code-Server インストール完了！${NC}"
echo -e "${GREEN}========================================${NC}"
echo ""
echo -e "  🌐 アクセスURL : ${CYAN}http://${HOST_IP}:8080${NC}"
echo -e "  🔑 パスワード  : ${YELLOW}${PASSWORD}${NC}"
echo ""
echo -e "  日本語化手順:"
echo -e "    1. Extensions で 'Japanese Language Pack' をインストール"
echo -e "    2. Ctrl+Shift+R でリロード → 日本語UIになります"
echo ""
echo -e "  起動    : ${CYAN}sudo systemctl start code-server${NC}"
echo -e "  停止    : ${CYAN}sudo systemctl stop code-server${NC}"
echo -e "  ログ確認: ${CYAN}journalctl -u code-server -f${NC}"
echo ""
echo -e "${YELLOW}  ⚠ 本番公開時はリバースプロキシ + HTTPS を推奨します${NC}"
echo ""

こちらも起動後に日本語化しましょう。
パスワードを変更したい場合は下記ファイルを編集してリスタートします。

nano ~/.config/code-server/config.yaml
sudo systemctl restart code-server
スポンサーリンク
タイトルとURLをコピーしました