Introduction

Due to various circumstances, I decided to develop a web application, so I built a development environment for Ruby on Rails using Docker and VS Code. I would like to keep that record as a memorandum. By the way, if you build it this way, it's basically completed in VS Code. You don't have to type docker-compose up and docker-compose run web rails db: create in each terminal, you can do rails db: create on the VS Code terminal.

VS Code Remote Container (Development)

This time, we will use Remote Container, which is an extension of VS Code. If you use this Remote Container, you can access the environment of the container launched by Docker with VS Code, edit the program file in the container with VS Code, and execute debugging. By the way, there is a similar extension called Remote Development, but it seems that this will be an extension pack that also includes SSH and WSL functions other than Docker's container. So, Remote Development includes Remote Container, Remote SSH, and Remote WSL, and I think that it is Remote Container that is related to Docker.

procedure

Install VS Code extensions

Installation of Remote Container (Development)

I installed Remote Development anyway. Search for Remote Development (Container) from VS Code Extensions and install it.

Remote Development.png

Ruby debugging extension installation

Similarly, search for ruby and install it.

Preparing the working directory for Ruby on Rails

Creating a working directory

Next, prepare a working directory to put the actual Ruby on Rails code. First, create a working directory in any location.

mkdir path/to/{name}
cd path/to/{name}

Creating a Docker File

Next, create a DockerFile. Enter the name of the working directory in {name}.

vi DockerFile

`DockerFile`


# Pull ruby image
FROM ruby:2.5.3

# Install 
RUN apt-get update -qq && \
    apt-get install -y build-essential \ 
                       libpq-dev \        
                       nodejs           

# Create working directory
ENV APP_ROOT /{name}
RUN mkdir $APP_ROOT

# Set working directory as APP_ROOT
WORKDIR $APP_ROOT

# Add Gemfile
ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

# Install Gemfile's bundle
RUN bundle install
ADD . $APP_ROOT

Creating Gemfile and Gemfile.lock

Gemfile.lock is empty and OK.

touch Gemfile.lock
vi Gemfile

`Gemfile`


source 'https://rubygems.org'
gem 'rails', '5.2.2'

Create docker-compose.yml

{password} is an arbitrary password for accessing the DB, and {name} is the above working directory name. Note that the port forwarding settings are assigned from local port 4306 to DB port 3306. This is to prevent conflicts if the DB default port is 3306, so if you are already using this port on the local side.

vi docker-compose.yml

`docker-compose.yml`


version: '3'
services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: {password}
      MYSQL_DATABASE: root
    ports:
      - "4306:3306"

  web:
    build: .
    command: /bin/sh #-c "rm -f tmp/pids/server.pid"
    stdin_open: true
    tty: true
    depends_on:
      - db
    volumes:
      - .:/{name}
    ports:
      - "3000:3000"

Remote Container settings

Open the working directory created earlier with VS Code (the directory containing DockerFile and docker-compose.yml).

Create / edit configuration file

Click the icon at the bottom left and select ʻAdd Development Container Configuration Files> From docker-compose.yml> web`.

Then, the .devcontainer directory will be created, so edit devcontainer.json. As a caveat --Do not use ** docker-compose.yml created in the .devcontainer directory **. (You can delete it) --{name} specifies the working directory name. --ʻExtensions specifies the ID of the extension function for debugging. --ʻAddPort is used to set port forwarding. (If you want to link with Gmail with Devise, add " 587: 587 " here.)

`json-doc:.devcontainer/devcontainer.json`


// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
{
	"name": "Existing Docker Compose (Extend)",

	// Update the 'dockerComposeFile' list if you have more compose files or use different names.
	// The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
	"dockerComposeFile": [
		"../docker-compose.yml",
		//"docker-compose.yml"
	],

	// The 'service' property is the name of the service for the container that VS Code should
	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
	"service": "web",

	// The optional 'workspaceFolder' property is the path VS Code should open by default when
	// connected. This is typically a file mount in .devcontainer/docker-compose.yml
	"workspaceFolder": "/{name}",

	// Add the IDs of extensions you want installed when the container is created.
	"extensions": ["rebornix.ruby"],

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],
	"addPort": ["3000:3000", "4306:3306"]

}

Rails project preparation

Open container

Click the icon at the bottom left and click Reopen in Container to start building Docker images and containers.

If an error occurs here, deleting the image or container once may work.

docker stop $(docker ps -q)
docker rm $(docker ps -aq)
docker rmi $(docker images -q)

Creating a Rails project

When the build is finished, in the Terminal tab, press the + key to open Bash.

Then, type the following command to create a Rails project.

rails new . --force --database=mysql --skip-bundle

DB settings

Set the DB. For {password}, specify the DB password set in docker-compose.yml.

vi config/database.yml

`config/database.yml`


default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: {password} # MYSQL_ROOT_PASSWORD in docker-compose.yml
  host: db # service name in docker-compose.yml

DB creation

Create a DB with the following command.

bundle update
rails db:create

Start the server

After that, start the server with the following command, access [http: // localhost: 3000 /](http: // localhost: 3000 /), and when the example screen appears, you are done!

If you want to type the rails command while the server is running, type + in the Terminal tab of VS Code to open a new terminal.

rails s -b 0.0.0.0 -p 3000

bonus

Sequel Pro Sequel Pro, a DB visualization GUI, is also port forwarding, so you can use it. You can access it by specifying the user name, password, and port specified in [Create docker-compose.yml](Create # docker-compose.yml). Note that Host should be 127.0.0.1 instead of localhost.

After that, select {name} _development from Choose Database to open the DB for the development environment.

debug

Editing `launch.json`

If you want to debug with VSCode, click Run> Add Configuration> Docker ~ (probably for Container) and launch.json will open. Then fill in as follows.

`launch.json`


{
  "version": "0.2.0",
  "configurations": [
    {
    "name": "Rails App",
    "type": "Ruby",
    "request": "launch",
    "cwd": "${workspaceRoot}", 
    "program": "bin/rails",
    "args": ["s", "-b", "0.0.0.0", "-p", "3000"], 
    }
  ]
}

Run debug

You can reboot, rebuild Image and debug with F5!

error

ʻA server is already running. Check /app/tmp/pids/server.pid.` appears

rm -f tmp/pids/server.pid

reference

-Open the development environment launched with Docker with VS Code! -Too polite Docker-compose rails5 + MySQL on Docker environment construction (Docker for Mac) -I tried using Visual Studio Code Remote Container in a Rails project

Ruby on Rails development environment construction with Docker + VSCode (Remote Container)