既存も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コンテナを直接開発環境にできる拡張機能です。環境を用意しておくと以下のような感じで開いた時にサジェストしてくれます。
詳しい使い方とかは以下の公式のチュートリアル等を参照してください。
既存の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のリファレンスは以下を参照してください。
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
終わりに
VS Code Remote Containers extension、気になってはいたもののあまり触れてなかったのですが用意しとくと開発環境構築とか自動化できて便利ですね。
また.devcontainerを整備しておくとGitHub CodeSpaceでも使えたりするかも(?)なので、そこも夢が広がりますね。
