1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Podmanでcode-serverのcontainerを起動しサービスとして公開する方法

Last updated at Posted at 2022-09-13

目的

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

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

構築方法

全体概要図

drawio.png

前提条件

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

  • 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を識別しない。
image.png

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

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の設定を変更すればいい。

image.png

動作確認

http://localhost:8443にアクセスしてパスワードを入力すれば、下記画面が表示される
image.png

サンプルコード

https://github.com/coolboy0961/code-server
今後記事の内容と合わなくなるくらい変更していく可能性あり

SSL証明書およびリバースプロキシ

前提条件

  • SynologyのNASを所有していること
  • 外からhttpsでNASのWeb Console画面にアクセスできていること

リバースプロキシの設定

image.png
image.png
image.png
image.png
image.png
image.png

リバースプロキシにWebSocketのサポートを追加しなければ、リバースプロキシ経由でcode-serverに繋げると1006エラーが発生する。
詳細はこちらをご参考ください。
image.png

SSL証明書の発行

image.png
image.png
image.png
image.png
image.png
image.png
リバースプロキシの設定と証明書を紐づける設定
image.png

動作確認

動作確認時にError code: SSL_ERROR_BAD_CERT_DOMAINがブラウザで表示されたら、しばらく待ってからブラウザを開き直したりして再度確認してみてください。
リバースプロキシの設定と証明書を紐づける設定を反映するのに時間がかかる場合がある。
image.png
image.png

まとめ

以上、Podmanでcode-serverのcontainerを起動しサービスとして公開する方法でした。
同じ記事を赤帽エンジニアブログにも記載してあります。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?