目的
仕事の中でお客様にワークショップを行うための開発環境を提供する場面があって、検討した結果、
ブラウザで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の設定を変更すればいい。
動作確認
http://localhost:8443
にアクセスしてパスワードを入力すれば、下記画面が表示される
サンプルコード
https://github.com/coolboy0961/code-server
今後記事の内容と合わなくなるくらい変更していく可能性あり
SSL証明書およびリバースプロキシ
前提条件
- SynologyのNASを所有していること
- 外からhttpsでNASのWeb Console画面にアクセスできていること
リバースプロキシの設定
リバースプロキシにWebSocketのサポートを追加しなければ、リバースプロキシ経由でcode-serverに繋げると1006
エラーが発生する。
詳細はこちらをご参考ください。
SSL証明書の発行
動作確認
動作確認時にError code: SSL_ERROR_BAD_CERT_DOMAIN
がブラウザで表示されたら、しばらく待ってからブラウザを開き直したりして再度確認してみてください。
リバースプロキシの設定と証明書を紐づける設定を反映するのに時間がかかる場合がある。
まとめ
以上、Podmanでcode-serverのcontainerを起動しサービスとして公開する方法でした。
同じ記事を赤帽エンジニアブログにも記載してあります。