既存もDockerで開発環境を作っていたのですが、VS CodeのRemote Containersを使うとディレクトリを開いた時にサジェストしてくれたり、拡張とかもデフォルトでインストールしてくれたりと何かと便利だったのでメモ🗒

VS CodeのRemote Containersとは？

The Visual Studio Code Remote - Containers extension lets you use a Docker container as a full-featured development environment. Create a development container using Visual Studio Code Remote Development

Dockerコンテナを直接開発環境にできる拡張機能です。環境を用意しておくと以下のような感じで開いた時にサジェストしてくれます。

f:id:madogiwa0124:20220130171421p:plain

詳しい使い方とかは以下の公式のチュートリアル等を参照してください。

code.visualstudio.com

既存のRuby on RailsのDocker環境を使ってRemote Containers用の環境を用意する

既存のDocker環境

以下のようなRails用のDocker環境を使ってRemote Containers用の環境を用意します。

FROM ruby:3.1.0

WORKDIR /app

# Using Node.js v16.x(LTS)
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -

# Add packages
RUN apt-get update && apt-get install -y \
    git \
    nodejs \
    vim \
    chromium \
    chromium-driver

# Add yarnpkg for assets:precompile
RUN npm install -g yarn

version: "3"
services:
  db:
    image: postgres:13.5
    ports:
      - "5432:5432"
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
    volumes:
      - db:/var/lib/postgresql/data
  redis:
    image: redis:6.2-alpine
  rails: &rails
    build:
      context: .
    tty: true
    ports:
      - "3000:3000"
    links:
      - db
      - redis
    tmpfs:
      - /tmp
    volumes:
      - ../:/app:cached
      - node_modules:/app/node_modules
      - bundle:/app/vendor/bundle
      - log:/app/log
      - packs:/app/public/packs
      - packs-test:/app/public/packs-test
      - rails-cache:/app/tmp/cache
    working_dir: /app
    user: root
    environment:
      HOST_NAME: rails
      DATABASE_URL: postgres://postgres:password@db:5432
      REDIS_URL: redis://redis:6379/0
      BUNDLE_PATH: /app/vendor/bundle
      RAILS_ENV: development
      NODE_ENV: development
      TZ: "Asia/Tokyo"
  sidekiq:
    <<: *rails
    command: ["bundle", "exec", "sidekiq"]
    ports: []
volumes:
  db:
  node_modules:
  bundle:
  log:
  packs:
  packs-test:
  rails-cache:

Remote Containers用の環境を用意する

と言っても特に大変な作業は必要なく、ルートディレクトに.devcontainerディレクトリを作成し、以下の2つのファイルを作成します。

devcontainer.json : 参照するdocker-compose.ymlやインストールする拡張を設定
boot.sh : 起動時に実行するshell (起動後に自分でbin/setupを実行するなら無くてもいい)

{
  "name": "workspace",
  "dockerComposeFile": "../docker/docker-compose.yml",
  "service": "rails",
  "workspaceFolder": "/app",

  "extensions": [
    "editorconfig.editorconfig",
    "rebornix.ruby",
    "misogi.ruby-rubocop",
    "octref.vetur",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
  ],

  "postCreateCommand": ".devcontainer/boot.sh",

  "remoteUser": "root"
}

# .devcontainer/boot.sh
#!/bin/sh

set -eux

bin/setup

devcontainer.jsonのリファレンスは以下を参照してください。

code.visualstudio.com

Tips

Remote Container上から認証が必要なGitHubのリポジトリにpush/pull等する

ssh-add $HOME/.ssh/github_rsaで追加しとけば自動的にフォワーディングしてくれる。

Using SSH keys# There are some cases when you may be cloning your repository using SSH keys instead of a credential helper. To enable this scenario, the extension will automatically forward your local SSH agent if one is running. You can add your local SSH keys to the agent if it is running by using the ssh-add command. For example, run this from a terminal or PowerShell:
ssh-add $HOME/.ssh/github_rsa

code.visualstudio.com