AlmaLinuxベースのDockerコンテナーでcode-serverを動かす

普段は製品の開発はEclipseで行っていますが、この開発環境を構築するまでの手順が多すぎて、まともに開発できるようになるまでかなりの時間を要します。そこで Docker のコンテナーで開発環境を提供して、この時間を減らしたいと考えました。

候補となった Web IDE

自前で Web IDE の環境を作るのに候補となったのは以下の3つです。
どれもオープンソースのVisual Studio Code 系統のもので、Dockerコンテナーで動かせるものです。

1. coder/code-server
   GitHub - coder/code-server: VS Code in the browser

2. VS Code Server
   The VS Code Server (visualstudio.com)

3. Eclipse Theia
   GitHub - eclipse-theia/theia: Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript.

ネットでの情報が多いことから、今回は 1 の code-server を採用しています。

なぜ AlmaLinux のベースイメージか

開発している製品は、OS が Linux の場合は RedHat 系ディストリビューションである必要があり、普通であれば CentOS 7 を使うのですが、
上記候補の 2. VS Code Server を試す際に CentOS 7 では動作しない問題があったため CentOS 7 使えませんでした。その後継の OS 8 はサポート終了となっているため AlmaLinux を利用することにしました。別に Rocky Linux でも良かったのですが。

利用方法

環境としては Windows PC で WSL2 を使って Ubuntu をインストールしています。そこに Docker （ライセンスの問題もあるので Docker  Desktop for Windows ではない）をインストールします。

上の図のように Windows のWebブラウザーから Dockerコンテナーで動かしている Web IDE (code-server) に接続して開発できるようにします。
この Dockerコンテナー（上図の青い部分）にあらかじめ開発を開始するための諸々の設定をいれておき、開発開始までの余計な手間は省きたいと考えています。

前準備

WSL2 と Docker のインストールは下記ページの通りです。

WSL のインストール

Install Docker Engine on Ubuntu

各種ファイルの準備

Dockerfile

先頭の FROM 命令で AlmaLinux を指定しています。
次の 3 つの ARG 命令にある DEV_USER、GIT_NAME、GIT_EMAIL については開発者の情報を記述してもらうか docker build コマンドの --build-arg オプションで指定してもらう必要があります。

FROM almalinux:8

ARG DEV_USER=coder
ARG GIT_NAME="ユーザー名"
ARG GIT_EMAIL="xxxxxxxx@hoge.com"

COPY config.yaml MachineSettings.json UserSettings.json /tmp/cdsvr/

RUN dnf update -y && \
    dnf install -y wget glibc-langpack-ja git java-1.8.0-openjdk-devel java-17-openjdk-devel maven && \
    alternatives --set java java-17-openjdk.x86_64 && \
    alternatives --set javac java-17-openjdk.x86_64 && \
    curl -fsSL https://code-server.dev/install.sh | sh && \
    adduser $DEV_USER && \
    chown $DEV_USER:$DEV_USER /tmp/cdsvr

USER $DEV_USER

RUN echo "" >> ~/.bashrc && \
    echo "export TZ=Asia/Tokyo" >> ~/.bashrc && \
    echo "export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk" >> ~/.bashrc && \
    mkdir -p ~/.config/code-server && \
    cp /tmp/cdsvr/config.yaml ~/.config/code-server/ && \
    mkdir -p ~/.local/share/code-server/Machine && \
    cp /tmp/cdsvr/MachineSettings.json ~/.local/share/code-server/Machine/settings.json && \
    mkdir -p ~/.local/share/code-server/User && \
    cp /tmp/cdsvr/UserSettings.json ~/.local/share/code-server/User/settings.json && \
    code-server --install-extension vscjava.vscode-java-pack && \
    code-server --install-extension MS-CEINTL.vscode-language-pack-ja && \
    code-server --install-extension mhutchie.git-graph && \
    code-server --install-extension donjayamanne.githistory && \
    git config --global user.name "$GIT_NAME" && \
    git config --global user.email $GIT_EMAIL && \
    git config --global core.autocrlf input && \
    rm -rf /tmp/cdsvr

CMD ["code-server"]

製品の開発は JDK8 ですが、VS Code の Java 開発用の拡張機能 (Language Support for Java by Red Hat) では Java 11 以上が必要であるため、java-1.8.0-openjdk-devel と java-17-openjdk-devel の2つの Java を入れます。
他にも必要と思われる Git 関連や UI の日本語化の拡張機能もインストールしています。

config.yaml

code-server の設定ファイルです。
コンテナー内で code-server を起動するユーザーの ~/.config/code-server/ ディレクトリに格納します。
デフォルトでは以下のようになっていて自ノードからしかつながらないように制限され、パスワードによる認証が必要となります。

bind-addr: 127.0.0.1:8080
auth: password
password: （パスワード文字列）
cert: false

今回はとりあえず接続をテストするため、アドレスの変更と認証をしないように修正しています。

bind-addr: 0.0.0.0:8080
auth: none
cert: false

MachineSettings.json

VS Code の Java 開発用の拡張機能で利用する Java を指定するための設定をあらかじめ記述しておき、Dockerfile の中で ~/.local/share/code-server/Machine/ ディレクトリに settings.json  という名前で格納されるようにします。
他にもいろいろと設定を追加する必要があれば、このファイルに記述しておきます。

{
    "java.jdt.ls.java.home": "/usr/lib/jvm/java-17-openjdk",
    "java.configuration.runtimes": [
        {
            "name": "JavaSE-1.8",
            "path": "/usr/lib/jvm/java-1.8.0-openjdk",
            "default": true
        },
        {
            "name": "JavaSE-17",
            "path": "/usr/lib/jvm/java-17-openjdk"
        }
    ]
}

UserSettings.json

VS Code の Maven 用の拡張機能 (Maven for Java)で利用設定をあらかじめ記述しておき、Dockerfile の中で ~/.local/share/code-server/User/ ディレクトリに settings.json  という名前で格納されるようにします。
他にもいろいろと設定を追加する必要があれば、このファイルに記述しておきます。

{
    "maven.terminal.favorites": [
        {
            "alias": "full-build without tests",
            "command": "clean package -Dmaven.test.skip=true"
        }
    ],
    "maven.view": "hierarchical"
}

ファイルの配置

WSL2のUbuntu のホームディレクトリに cdsvr というディレクトリを作成して、そこの上記の Dockerfile, config.yaml, MachineSettings.json, UserSettings.json を格納します。

/home/ユーザー名/cdsvr
    |
    +--- Dockerfile
    +--- MachineSettings.json
    +--- UserSettings.json
    +--- config.yaml

ビルド～実行

ホームディレクトリで以下のコマンドを実行します。
ここではイメージのタグは cdsvr-base にしています。
（なお、自社のVPNを使っているとなぜか途中で止まってしまうので、実行前に VPN は使わないようにする必要がありました。）

~$ docker build -t cdsvr-base cdsvr

ビルドが完了したら以下のようにしてコンテナーを起動します。
ビルド時に特に指定をしていないため coder というユーザーが作成されています。また、ホスト側のディレクトリ (~/project と ~/.m2) をコンテナーで利用できるように -v オプションを指定しています。

~$ docker run -itd -u coder -p 8080:8080 -v ~/project:/home/coder/project -v ~/.m2:/home/coder/.m2 --name cdsvr cdsvr-base

これで Windows の Web ブラウザーから http://localhost:8080 にアクセスします

オープニング画面

あらかじめ Dockerfile で指定した拡張機能もインストールされた状態で見慣れた VS Code と同じような画面が表示されます。
画面左側にある拡張機能「Japanese Language Pack for Visual Studio Code」の「Set Display Language」というボタンがあるので、それを選択してしばらくすると再起動するかどうかの選択が求められます。「Restart」を押して再起動すると UI は日本語で表示されます。

この後は WSL2 側の ~/project に開発のソースを Git からクローンして、それを code-server で開いて開発をすすめることができます。
実際にはここに書けない設定やツールの導入などがありますが、とりあえず Web ブラウザーで VS Code と同じような IDE を操作することができるようになりました。

課題とか

使ってみるといろいろと困ったところもあります。

• キーバインドの問題
  普段エディターは Emacs キーバーインドを使っています。
  しかし code-server などの Web IDE の画面でEmacsキーバインドを使えるようにするための拡張機能をインストールしても、エディター画面で下の行へカーソルを移動しようとして Ctrl + N を押すとブラウザーの新しいウィンドウが立ち上がってきて困ります。かなりのキー操作がブラウザー側に取られてしまいます。

• 拡張機能の入手の問題
  Microsoft の Visual Studio Code は「Visual Studio Market Place」から多くの拡張機能を入手することができますが、code-server では Eclipse Foundation が管理する「Open VSX Registry」から入手することになりますが、「Visual Studio Market Place」にしか存在しない拡張機能があります。