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
    

    실행하다


  • 명령 팔레트 Remote-Containers: Rebuild and Reopen in container 에서 컨테이너 안으로 들어가기
  • 편집기에서 test.pu 열기
  • 명령 팔레트 PlantUML: Preview Current Diagram 실행
  • 미리보기 표시


  • 참고 자료


  • UML의 폭속 미리보기 환경을 Visual Studio Code + PlantUML Server on Docker로 쉽게 구축
  • Docker로 PlantUML Server 환경을 구축해 보았습니다.
  • PlantUML 서버를 Docker로 1분만에 빨리 구축 + VSCode로 미리보기
  • 좋은 웹페이지 즐겨찾기