概要

Red Hat でコンサルタントをしている陳といいます。

仕事の中でお客様にワークショップを行うための開発環境を提供する場面があって、検討した結果、ブラウザでhttpsでvscodeが使えるようにした。メリットは以下です。

お客様のセキュリティ対策で遮断される可能性が低い
開発環境としての利便性が高い
- extensionをインストールして使い勝手を良くすることができる
開発環境の構築内容が自由
- nodejs、python、事前にインストールするextensionなどContainerfileで自由に変更可能

構築方法

全体概要図

前提条件

下記ツールがインストールされていること

podman
podman-compose
podman-desktop(option)

コンテナ

カスタマイズしたcode-serverのイメージをビルド

Containerfile

FROM lscr.io/linuxserver/code-server:latest
LABEL description="node-16.16.0の実行環境を構築した code-server container image"
LABEL maintainer="author <abc@example.com>"
SHELL ["/bin/bash", "-c"]
RUN git clone https://github.com/anyenv/anyenv ~/.anyenv && \
    echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bashrc && \
    echo 'eval "$(anyenv init -)"' >> ~/.bashrc && \
    source ~/.bashrc && \
    anyenv --version && \
    anyenv install --force-init && \
    anyenv install nodenv && \
    source ~/.bashrc && \
    echo 'eval "$(nodenv init -)"' >> ~/.bashrc && \
    nodenv install 16.16.0 && \
    nodenv global 16.16.0 && \
    /app/code-server/bin/code-server --extensions-dir /config/extensions --install-extension firsttris.vscode-jest-runner && \
    /app/code-server/bin/code-server --extensions-dir /config/extensions --install-extension dracula-theme.theme-dracula

SHELL ["/bin/bash", "-c"]でbashに切り替えて、anyenvとnodenvを使ってnodeの実行環境を構築する。

最後の2行はvscodeのextensionをインストールしている。 code-serverだけだと、command not foundエラーが出るため、フルパス指定した。また、--extensions-dirでextersionのインストール先を指定しないと、webブラウザでログインした後extensionが見つからない事象が生じた。

Containerfileと同じディレクトリでpodman build --format docker --layers=false -t code-server-nodejs16:latest .を実行すると、カスタムイメージがビルドされる。 --format dockerを入れた理由はSHELL ["/bin/bash", "-c"]を有効にしたいから。このオプションを追加しなければpodmanはSHELLを識別しない。

カスタムイメージのコンテナを起動

code-server.yml(post-composeのファイル)

---
version: "2.1"
services:
  code-server:
    image: localhost/code-server-nodejs16:latest
    container_name: code-server1
    environment:
      - PUID=0
      - PGID=0
      - TZ=Asia/Tokyo
      - PASSWORD=password #optional
      # - SUDO_PASSWORD=password #optional
      # - SUDO_PASSWORD_HASH= #optional
      # - PROXY_DOMAIN=code-server.my.domain #optional
      - DEFAULT_WORKSPACE=/config/workspace #optional
    # volumes:
    #   - ./config:/config
    ports:
      - 8443:8443
    restart: unless-stopped

environmentの各環境変数の意味はこちらをご参考ください。

podman-compose -f code-server.yml up -dを実行すると、コンテナが起動される。複数起動したい場合はcode-server.ymlをコピーして、container_nameとportsの設定を変更すればいい。