Visual Studio Code Remote-Contaainess를 사용하여 컨테이너 내에서 Rails 어플리케이션 개발

최근 많은 항목이 Docker를 사용하는데 Docker의 사용 방법도 여러 파벌이 있다.

Docker 컨테이너를 사용하여 실제 환경에서만 이동

Docker 컨테이너를 이용하여 개발 환경의 중간부품만 이동(MySQL 또는 Redis 등)

개발 환경의 rails도 Docker 용기를 통해 이동(rails generate 등 명령 포함)

평소에 저는 2번'중간부품'Docker의'파벌'만 사용하고 이번 3번'rails도 Docker로 시작한다'는 프로젝트와 관련된 기회를 갖기 때문에 평소 환경과 차이가 없도록 개발 환경을 최대한 조정했습니다.

Visual Studio Code Remote-Contaainess란

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
이 확장을 사용하면 컨테이너 안에 있다는 것을 거의 깨닫지 못하고 평소처럼 VS코드로 개발할 수 있다.
용기에 다른 확장자를 설치할 수 있기 때문에 용기 안에서 일부 프로그램을 시작해야 하는 확장자도 문제없이 사용할 수 있습니다.(예를 들어 린트계 녀석)

설정

구성 파일 생성

docker-compose가 이미 존재합니다.VScode에서 생성된 항목을 열고 구성 파일을 추가합니다.
명령 트레이에서 실행Remote-Containers: Add Development Container Configuration Files....

그 다음은 "From'docker-compose"입니다."yml"을 선택하고 VScode를 통해 연결할 서비스 이름을 선택하면 기본 프로필이 생성됩니다.

사용자 정의 프로파일

다음에 나는 그 생성된 파일을 만질 것이다.
제가 만든 서류를 참고로 싣겠습니다. 환경에 따라 맞춤형으로 만들어 주세요.
.devcontainer/devcontainer.json

{
  "name": "Existing Docker Compose (Extend)",
  // 後述のdocker-compose.ymlで、プロジェクトで使っているdocker-compose.ymlの設定を上書きすることができる
  "dockerComposeFile": ["../docker-compose.yml", "docker-compose.yml"],
  // VSCodeで接続したいコンテナのサービス名に合わせる
  "service": "app",
  // Dockerfileでソースをコピーしているパスに合わせるのがおすすめ
  "workspaceFolder": "/app",
  // コンテナ接続時の設定を上書きできる
  "settings": {
    // デフォルトで書いてあったのでそのままにしているだけ
    "terminal.integrated.shell.linux": null,
    // solargraph (Ruby用のLanguage Server) 用の設定
    "solargraph.useBundler": true,
    "solargraph.bundlerPath": "/usr/local/bin/bundle"
  },
  // ここに書いておいた拡張は自動的にコンテナ作成時にインストールされる
  "extensions": [
    "karunamurti.haml",
    "dbaeumer.vscode-eslint",
    "github.vscode-pull-request-github",
    "oderwat.indent-rainbow",
    "esbenp.prettier-vscode",
    "mechatroner.rainbow-csv",
    "rebornix.ruby",
    "octref.vetur",
    "visualstudioexptteam.vscodeintellicode",
    "redhat.vscode-yaml",
    "castwide.solargraph"
  ],
  // ホストOS側からみられるようにしたいポート
  "forwardPorts": [3000],
  // 起動するサービス (空にしておくとdocker-compose.ymlにあるサービスが全て起動する)
  "runServices": ["app", "db", "redis", "webpack"],
  // コンテナ生成後に実行されるコマンド
  // lessを入れないとbinding.pryで止めたときのページャーの挙動が使いにくい
  // vimを入れないとpryでeditが使えない
  // yard gemsを実行しておくとgemの中身までsolargraphが補完したりしてくれるようになる
  // ちなみにyardはsolargraphの依存で入っている。
  "postCreateCommand": "apt install -y less vim && bin/bundle exec yard gems"
}

.devcontainer/docker-compose.yml

version: '3.4'
services:
  app:
    volumes:
      # 基本的にはgitの設定は自動的に引き継がれるが、 `.config/git/` での設定には対応していないようなのでマウント
      - ~/.config/git:/root/.config/git
    # デフォルトのまま
    command: /bin/sh -c "while sleep 1000; do :; done"

그리고 VScode에서 프로젝트 폴더를 열 때 VScode가 컨테이너 안에서 열리나요?이렇게 하면 돼.
이렇게 하면 VScode의 단말기는 rails 명령을 사용할 수도 있고 rspec, rails s -b 0.0.0.0binding을 돌릴 수도 있다.pry로 막을 수 있는 일반적인 환경을 설정했습니다.
또 컨테이너와 관련이 없지만 VScode의 디버깅 기능도 정상적으로 사용할 수 있다solargraph의 도움으로 보완이 가능하고gem 내 정의로 도약할 수 있다.뭐든지 편할 거예요.

덤

디버거 사용

컨테이너 안이라고는 하지만 평소와 다르지 않았고, 조금 빠져서 필기를 했다.
Gemfile

group :development do
  # 略
  gem 'debase'
  gem 'ruby-debug-ide'
end

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Rails server",
      "type": "Ruby",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "program": "bin/rails",
      "args": ["server", "-p", "3000", "-b", "0.0.0.0"],
      "showDebuggerOutput": true,
      "useBundler": true,
      "env": {"WEB_CONCURRENCY": 0} // workerを使う設定にするとブレイクポイントで止まらない
    }
  ]
}

브라우저에서gem 문서 보기

터미널에서 아래를 입력하고yard 서버를 시작합니다.

bundle exec yard server -G