Ubuntu 24.04 LTS に code-server を導入してみた

はじめに

Web IDE 環境が急遽必要になったり、一時的に使いたいとき、code-server は素早く構築できる良い選択肢です。本記事では Ubuntu 24.04 LTS に code-server 導入手順を紹介します。

Amazon Linux 2023 に code-server を導入したい場合は、以下の記事を参考にしてください。

https://dev.classmethod.jp/articles/use-code-server-as-temporary-cloud9-alternative/

検証環境

code-serverとは

code-server は Coder が開発するオープンソースツールで、VS Code ライクな IDE 環境をブラウザ上で利用できます。以前の技術調査記事もご参照ください。

https://dev.classmethod.jp/articles/code-server-multi-user-ec2-review/

インストール手順の詳細

公式ドキュメントをベースに、インストール方法を紹介します。最新バージョンの自動取得と HTTPS 設定に変更しています。

1. パッケージの更新とツールのインストール

まず、パッケージリストを更新しパスワード生成ツール「pwgen」をインストールします。ログイン用のパスワード生成用に使いました。

sudo apt update
sudo apt install -y pwgen

2. 最新バージョンの取得とインストール

GitHub から code-server の最新バージョンを取得しインストールします。公式手順と異なり、常に最新版を利用する手順としています。

# 最新バージョンを取得
CODER_VERSION=$(curl -s https://api.github.com/repos/coder/code-server/releases/latest | jq -r .tag_name | sed 's/v//')

# ダウンロードURLを組み立て
DOWNLOAD_URL="https://github.com/coder/code-server/releases/download/v${CODER_VERSION}/code-server_${CODER_VERSION}_amd64.deb"

# ダウンロード&インストール
curl -fOL ${DOWNLOAD_URL}
sudo apt install -y ./code-server_${CODER_VERSION}_amd64.deb
rm -f code-server_${CODER_VERSION}_amd64.deb

処理内容

1. GitHub API から最新バージョンを取得
2. ダウンロード URL を作成
3. deb パッケージをダウンロードしてインストール
4. 不要な deb ファイルを削除

3. 設定ファイルの作成

code-server の設定ファイルを作成します。公式手順とは異なり、HTTPS 接続を有効化しています。

# 設定ディレクトリの作成
mkdir -p /home/ubuntu/.config/code-server/

# 設定ファイルの作成
sudo bash -c 'cat > /home/ubuntu/.config/code-server/config.yaml << EOF
bind-addr: 0.0.0.0:50443
auth: password
password: $(pwgen -s -n -c 32 1)
cert: true
EOF'

# 所有者の変更
sudo chown -R ubuntu:ubuntu /home/ubuntu/.config

設定内容

• bind-addr: 0.0.0.0:50443: 任意のポート（50443）でリッスン
• auth: password: パスワード認証の有効化
• password: $(pwgen -s -n -c 32 1): 32 文字のランダムパスワード生成
• cert: true: HTTPS 接続の有効化

設定ファイルは 4 行のみのシンプルなファイルです。ただし、マルチユーザー環境では各ユーザー毎に設定ファイルが必要です。

4. サービスの有効化と起動

code-server をシステムサービスとして登録し、自動起動を設定します。

sudo systemctl enable --now code-server@ubuntu

5. セキュリティグループの設定

EC2 インスタンスのセキュリティグループに以下のインバウンドルールを追加します。

• タイプ: カスタム TCP
• ポート範囲: 50443
• ソース: アクセス元の IP（推奨）または 0.0.0.0/0（全 IP からのアクセス許可）

パスワードの確認

EC2 に SSH やセッションマネージャーでログインし、ユーザーのホームディレクトリ配下に作成した設定ファイルから、自動生成されたパスワードを確認します。

sudo cat /home/ubuntu/.config/code-server/config.yaml | grep password:

アクセス方法

ブラウザで以下の URL にアクセスします。

https://[EC2インスタンスのパブリックIPアドレス]:50443

初回アクセス時は証明書の警告が表示されますが、「詳細設定」から「安全でないサイトにアクセスする」を選択して進みます。ログイン画面で確認したパスワードを入力すると、VS Code 環境にアクセスできます。

code-serverのログイン画面

ログイン後の Web IDE 画面

まとめ

Ubuntu 24.04 LTS に code-server を導入する手順を紹介しました。以下のコマンドを流し込むだけで code-server の実行環境を簡単に導入できます。

sudo apt update
sudo apt install -y pwgen

# code-sererの最新バージョンを取得
CODER_VERSION=$(curl -s https://api.github.com/repos/coder/code-server/releases/latest | jq -r .tag_name | sed 's/v//')

# ダウンロードURLを組み立て
DOWNLOAD_URL="https://github.com/coder/code-server/releases/download/v${CODER_VERSION}/code-server_${CODER_VERSION}_amd64.deb"

# ダウンロードしてインストール
curl -fOL ${DOWNLOAD_URL}
sudo apt install -y ./code-server_${CODER_VERSION}_amd64.deb
rm -f code-server_${CODER_VERSION}_amd64.deb

# セットアップ
mkdir -p /home/ubuntu/.config/code-server/
sudo bash -c 'cat > /home/ubuntu/.config/code-server/config.yaml << EOF
bind-addr: 0.0.0.0:50443
auth: password
password: $(pwgen -s -n -c 32 1)
cert: true
EOF'
sudo chown -R ubuntu:ubuntu /home/ubuntu/.config

# サービス開始
sudo systemctl enable --now code-server@ubuntu

おわりに

今回は Ubuntu で code-server の動作確認が急ぎ必要になりました。手順をまとめてましたので急ぎ使いたい方の参考になれば幸いです。

全面的に先人のブログを参考にしています。VPC や IAM ロール毎まとめて作成したければ、CloudFormation のテンプレートを用意してある以下の本記事の参考元を確認してください。

https://dev.classmethod.jp/articles/use-code-server-as-temporary-cloud9-alternative/