VS CodeのRemote-ContainersでPlant UMLのコンテナ環境を作る

やりたいこと

UMLのサーバーをDockerで構築して，VS Codeの拡張機能を使って編集したい！Remote-Containersを使って簡単に環境構築出来たらうれしいな！

環境

• Visual Studio Code
  • 拡張機能Remote-Containersを入れておく
  • 拡張機能Plant UMLはコンテナの中に入るときにコンテナ内に導入される
• Docker

必要なファイルの用意

ディレクトリ構成

(root)
│
├─ test.pu
│
└─.devcontainer
        devcontainer.json
        docker-compose.yml

環境設定のファイルの中身

devcontainer.json

{
    "name": "dev container",
    "dockerComposeFile": "docker-compose.yml",
    "service": "plantuml-server",
    "workspaceFolder": "/workspace/",
    "extensions": [
        "jebbs.plantuml",
    ]
}

docker-compose.yml

version: '3'
services:
  plantuml-server:
    image: plantuml/plantuml-server
    container_name: plantuml-container
    ports:
      - "8080:8080"
    volumes:
      - ..:/workspace:cached

テスト用のUMLファイル

test.pu

@startuml sample
alice -> Bob: Hello, John!
alice <-- Bob: Hello, World!
@enduml

実行する

1. コマンドパレットRemote-Containers: Rebuild and Reopen in containerからコンテナの中に入る
2. エディタでtest.puを開く
3. コマンドパレットPlantUML: Preview Current Diagramを実行
4. プレビューが表示される
   

参考資料

• UMLの爆速プレビュー環境をVisual Studio Code + PlantUML Server on Dockerで簡単に構築する
• DockerでPlantUML Serverの環境構築をやってみた
• PlantUMLサーバをDockerで1分でサクッと構築＋VSCodeでプレビューする