VS Code Remote Development에서 Docker 개발 환경 활용

11145 단어 DockerVSCode
2019년 5월에는 Visual Studio Code에서 원격 기기, 용기, Windows Subsystem for Linux(WSL)의 작업 공간을 열 수 있는 확장 기능군인'Remote Development Extension Pack'을 소개했다.
블로그 글: https://code.visualstudio.com/blogs/2019/05/02/remote-development
공식 문서는 Visual Studio Code Remote Development입니다. 다음은 VSCode에서 Docker 컨테이너 내의 개발 환경을 열기 전의 오류의 시초입니다.
환경은 다음과 같다.
  • macOS Mojave 10.14.5
  • Docker Desktop for Mac Version 2.0.0.3 (31259)
  • Engine: 18.09.2
  • Compose: 1.23.2
  • 한편 이번 실험에 사용된 자료고는 https://github.com/ykhrito/remote-dev 위에 놓여 있다.

    설치


    Visual Studio Code


    May 2019(버전 1.35) 버전부터 Stable 버전에서 Remote Development 확장을 사용할 수 있습니다.버전이 만료되면 업데이트하십시오.
    릴리즈 노트: https://code.visualstudio.com/updates/v1_35

    Remote - Containers extension


    Visual Studio Code를 시작하여 확장 기능 보기를 표시합니다.먼저 DockerRemote - Containers 설치 확장을 시도합니다.(Japanese Language Pack을 먼저 설치한 일본어 인터페이스로 캡처)

    설치가 완료되면 편집기 창의 왼쪽 아래 모서리에 원격 연결 아이콘 버튼이 표시됩니다.

    프로비저닝


    docker-compose.yml에서 Ruby on Rails 개발을 위한 저장소가 있다고 가정하고 원격 개발용 설정을 추가합니다.디렉토리의 구성은 다음과 같습니다.
    .
    ├── .devcontainer
    │   ├── devcontainer.json
    │   └── docker-compose.extend.yml
    ├── .gitignore
    ├── .ruby-version
    ├── Gemfile
    ├── Gemfile.lock
    ...
    ├── docker-compose.yml
    ...
    

    docker-compose.yml


    circleci/rubymysql 이미지를 사용합니다.circleci/ruby 링크 대상의 설명에도 있지만 기본적으로 루트가 아니라circleci에서 실행됩니다.
    version: "3"
    services:
      web:
        image: circleci/ruby:2.6.3-node-browsers
        working_dir: /home/circleci/remote-dev
        command: sleep infinity
        ports:
          - 3000:3000
        links:
          - mysql
        volumes:
          - ./:/home/circleci/remote-dev
        environment:
          PORT: 3000
          DATABASE_HOST: mysql
      mysql:
        image: mysql:5.7
        environment:
          MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
    
    메모리 라이브러리의 디렉터리는circleci 사용자 홈 디렉터리 아래의remote-dev에 불러옵니다.

    .devcontainer/docker-compose.extend.yml


    기존 docker-compose.yml 설정을 수정하지 않고 원격 개발에 추가하고 싶은 설정을 기술합니다.
    version: "3"
    services:
      web:
        environment:
          - HOME=/home/circleci
        volumes:
          - ~/.gitconfig:/home/circleci/.gitconfig
          - ~/.ssh:/home/circleci/.ssh
    
    "environment"에 환경 변수HOME가 명시되어 있습니다.이 설정이 없으면 원격 개발 서버와 확장 기능 등 환경이/root/이하에 설치되어 일반 사용자에서 실행할 때 접근권이 없기 때문에 실패합니다.루트에서 이동하는 용기라면 설정할 필요가 없습니다."volumes"의 설정은 용기 내의 환경에서 호스트와 같은 설정으로git를 사용하기 위한 것이다.

    .devcontainer/devcontainer.json


    원격 개발 환경 설정의 중심.
    // See https://aka.ms/vscode-remote/devcontainer.json for format details.
    {
      "name": "Remote-dev Project",
      "dockerComposeFile": [
        "../docker-compose.yml",
        "docker-compose.extend.yml"
      ],
      "service": "web",
      "workspaceFolder": "/home/circleci/remote-dev",
      "extensions": [
        "rebornix.ruby",
        "castwide.solargraph",
        "robinbentley.sass-indented"
      ],
      "settings": {
        "editor.tabSize": 2,
        "files.insertFinalNewline": true,
        "files.trimFinalNewlines": true,
        "terminal.integrated.shell.linux": "/bin/bash"
      },
      "shutdownAction": "none" // or "stopCompose"
    }
    
    "name"는 VSCode에 표시되는 작업공간 이름입니다.나는 무엇이든지 좋다고 생각한다."dockerComposeFile"에서 원래의 docker-compose.yml와 추가docker-compose.extend.동시에 yml 실행을 지정합니다."service"는 개발 환경에서 사용하는 서비스의 정의명이다."workspaceFolder"는 VS 코드에서 열린 작업공간 디렉토리입니다."extensions" 원격 개발 환경에 함께 설치할 확장자를 지정합니다.원격으로 설치할 수 없거나 원격으로 설치할 수 없는 확장도 있기 때문에 억지로 지정하지 않고 나중에 수동으로 설치할 수 있습니다."settings"에서 원격 개발 환경의 기본 설정 (settings.json 내용) 을 미리 추가할 수 있습니다.용기에 특정한 설정이 필요하다면, 나는 매우 편리하다고 생각한다."shutdownAction" VS 코드를 닫을 때의 동작입니다.기본적으로 컨테이너는 스토리지 구성 요소에서 자동으로 중지됩니다.없음인 경우 컨테이너가 계속 시작됩니다.

    원격 연결


    Visual Studio Code를 시작하고 방금 왼쪽 아래에 있는 원격 연결 아이콘 을 클릭합니다.
    「Remote-Containers: Open Folder in Container...」저장소 디렉토리를 엽니다.

    컨테이너 자동 구축 및 시작...

    잠시 기다렸다가...

    컨테이너의 개발 환경이 시작되고 VS 코드에서 열립니다.
    통합 단말기와 원본 코드 관리도 정상적으로 사용할 수 있다."settings"에서/bin/bash를 지정했기 때문에 bash가 시작되고 있습니다.

    동작 확인


    Rails 연결을 시작하십시오.터미널gem install bundler:2.0.1, bundle install, bin/rails db:create 이후bin/rails s -b 0.0.0.0 서버 시작

    호스트의 브라우저에서 연결하면

    Yay!

    기타


    ~/.ssh/config


    macOS 호스트의 ~/.ssh를 용기 내의 ~/로 설정합니다.ssh에 설치, ~/.ssh/config를 UseKeychain yes 로 설정하면 용기 측의git에서 ssh를 사용할 때 "Bad configuration option:usekeychain"이라고 욕합니다.이 경우 UseKeychain yes 이전에 IgnoreUnknown UseKeychain 로 기술하는 것이 좋습니다.
    ~/.ssh/config
    Host *
      AddKeysToAgent yes
      IgnoreUnknown UseKeychain
      UseKeychain yes
    

    좋은 웹페이지 즐겨찾기