VSCodeをコンテナで立ててみる

# 1. はじめに
皆さんは普段、VS Codeをどのように使っていますか？多くの人は、デスクトップアプリケーションとして起動し、ローカル環境で開発を進めていることでしょう。私も普段はそのようにしています。しかし、次のような問題に直面したことはありませんか？

- プロジェクトごとに異なる環境をセットアップするのが面倒
- 開発環境の違いによるトラブルが発生する
- 異なるマシンで同じ環境を再現するのが難しい

これらの問題を解決する方法として、コンテナ上でVS Codeサーバーを動作させることが考えられます。これにより、次のようなメリットがあります

- **柔軟な環境構築：** プロジェクトごとに異なる依存関係を簡単に管理でき、開発環境のセットアップ時間を大幅に短縮できます。
- **一貫性のある環境：** 同じコンテナをどのマシンでも再現できるため、チーム全体で統一された開発環境を維持できます。
- **システムリソースの効率化：** コンテナ技術を使用することで、システムリソースを効率的に利用し、パフォーマンスを最適化できます。

本記事では、PodmanとPodman Composeを使用して、VS Codeサーバーをコンテナ上でセットアップする手順を紹介します。

# 2. 必要なもの

- Linuxディストリビューション（例：Ubuntu、RHELなど）
- Podman
- Podman Compose
- code-server（VS Codeのサーバーバージョン）

# 3. 環境準備

Podman/Podman ComposeをWSL上のUbuntuに導入する手順は[こちら](https://qiita.com/shupeluter/items/2ff6f79bcf84c30f7265)を利用してください。

# 4. podman-composeファイルを書く

ここからが本番です。今回コンテナビルドを含めてpodman-composeに任せるので、先にcomposeの環境から作成しましょう。

wlsでubuntuを起動し以下のコマンドを実行してください。

```sh
mkdir -p ~/workspace/sample/vscode
touch ~/workspace/sample/podman-compose.yml
touch ~/workspace/sample/vscode/Dockerfile
cd ~/workspace/sample
```

このコマンドはホームディレクトリのworkspace/sampleを作業ディレクトリとしてpodmanの前提環境を作成し、最後に作業ディレクトリに移動しています。

vi でpodman-compose.ymlを開き以下の内容を記載してください。

```yml
version: "3.9"
services:
  vscode-server:
    #Dockerプロジェクトディレクトリ
    build: vscode
    #コンテナ起動時、コンテナ内の8080ポートとOSの8080をバインドする
    ports:
      - "8080:8080"
```

yamlはインデントに意味があるフォーマットなので、インデントは崩さないようにお願いします。なおviは自動でインデントをきれいにしようと頑張ってコピペの際に余計なインデントを入れてしまう癖があります。これを防ぐために、ペースト前に **:set paste** を実行しておくことを推奨します。

この段階で、いったんコンテナビルドしてみましょう。

```sh
podman-compose build
```

すると、このようなエラーが出力されるはずです。

```sh
/home/<your username>/workspace/sample/vscode/Dockerfile
```

まだDockerfileは作成していないのでこれで問題ありません。次の作業に移りましょう

# 5. Dockerファイルを書く

さて、いよいよvscodeをDockerで動作させるためのDockerfileを作成していきましょう。

viでvscode/Dockerfileに以下の内容を記載して下しさい。

一応viでファイルを開くためのコマンドを記載しておきます。

```sh
vi ~/workspace/sample/vscode/Dockerfile
```

Dockerfileの中身は以下の通りです

``` Dockerfile
# ベースイメージとしてUbuntuを使用
FROM ubuntu:20.04

# 必要なパッケージのインストール
RUN apt-get update && \
    apt-get install -y curl sudo gnupg graphviz openjdk-17-jdk-headless

# code-serverのインストール
RUN curl -fsSL https://code-server.dev/install.sh | sh


# 作業ディレクトリの設定
WORKDIR /home/coder/project

# code-serverの設定
RUN mkdir -p /home/coder/.config/code-server && \
    echo 'bind-addr: 0.0.0.0:8080' > /home/coder/.config/code-server/config.yaml

# PlantUMLとMarkdown Preview Enhanced拡張機能のインストール
RUN code-server --install-extension jebbs.plantuml && \
    code-server --install-extension shd101wyy.markdown-preview-enhanced

# ポートの公開
EXPOSE 8080

# コンテナ起動時にcode-serverを起動
CMD ["code-server", "--bind-addr", "0.0.0.0:8080", "."]

```

さて、ビルドしてみましょう。

```sh
podman-compose build
```



## 5.1起動前の設定

さっそく実行。。。。とその前に、iptablesの動作モードをlegacyに変更しておきます。これをやらないでいるとはpodmanがネットワーク設定に用いようとするiptablesのコマンドと、実際のiptablesの設定が異なることにより、期待通りに起動しません。

```
sudo update-alternatives --config iptables


  Selection    Path                       Priority   Status
------------------------------------------------------------
* 0            /usr/sbin/iptables-nft      20        auto mode
  1            /usr/sbin/iptables-legacy   10        manual mode
  2            /usr/sbin/iptables-nft      20        manual mode

Press <enter> to keep the current choice[*], or type selection number:

↑legacyの1を選択します。

```

ついでに、WSLのIPアドレスも取得しましょう。

```sh
ip address show
```

ずらずらと表示されますがeth0のアドレスが、wsl上で起動しているubuntuのipアドレスです。

```
4: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
    link/ether 00:15:5d:ba:b4:1a brd ff:ff:ff:ff:ff:ff
    inet 192.168.160.189/20 brd 192.168.175.255 scope global eth0
       valid_lft forever preferred_lft forever
    inet6 fe80::215:5dff:feba:b41a/64 scope link
       valid_lft forever preferred_lft forever
```
inetのアドレスこの場合は192.168.160.189がubuntuのアドレスです。

## 5.2 コンテナ起動

以下のコマンドでvscodeを起動します

```sh
podman-compose up -d
```

起動したら、Windowsでブラウザを起動し、http://<5.2で取得したアドレス>:8080にアクセスしてください。。

![vscode_login_001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/dd184ca6-33b7-7bc0-0982-e881b7fe5b9a.jpeg)

vscodeに。。。。あれ？？？？パスワードが聞かれちゃいます。vscodeのパスワード？？？うーん。あっ

![vscode_login_002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/5f07e2d7-c026-09db-74a2-b3d17020f97c.jpeg)


**/root/.config/code-server/config.yaml** にパスワードあると書いてありますね。ただ注意してください。このパスは「コンテナの中のパス」なのでOSからは直接みられません。次のコマンドで確認してください。

```
podman-compose exec vscode-server cat /root/.config/code-server/config.yaml
```

catの結果は以下のとおりです。

```
bind-addr: 127.0.0.1:8080
auth: password
password: 0ae0e5013ad1772caf57a97e
cert: false
```
passwordの0ae0e.....a97eがパスワードです。先ほどのダイアログに入力しましょう。

できた！！ブラウザでvscodeが起動しています。

まとめ
podmandでvscodeを起動してブラウザで利用することができたよ。