Rails development environment created with VSCode and devcontainer

This article is the 20th day article of WESEEK Advent Calendar 2020.

Introduction

How do you create a full-stack, full-featured Ruby on Rails development environment? Install ruby ​​or DB directly locally? Set up a VM using VirtualBox etc. and install what you need on it? Or do you use vagrant's box-like technology and various installed VMs? There are many ways to do it. In this article, I'd like to show you how to create a Rails development environment using VSCode and devcontainer. For more information on VScode and devcontainer, please refer to this article (https://qiita.com/haruhikonyan/items/291e1e5413a827fc6d9a). I use a lot of the essence introduced here.

For those who want to start up anyway

https://github.com/haruhikonyan/rails-devcontainer/tree/rails6.1.0-and-mysql If you clone this and launch devcontainer from VSCode and type # rails s -b 0.0.0.0 in devcontainer, Rails6.1 will be launched just by rails new.

Host side procedure

$ git clone https://github.com/haruhikonyan/rails-devcontainer -b rails6.1.0-and-mysql rails6.1.0-and-mysql
$ cd rails6.1.0-and-mysql
$ code .

VSCode launches or manually opens from VSCode

Refer to here to build and open an environment where devcontainer can be launched from VSCode.

When devcontainer starts up successfully, execute the following

In-container procedure

# rails s -b 0.0.0.0

When you access localhost: 3000 from your browser. .. ..

Just clone and open it to start development! !!

You can also see the webpacker log by using the Remote Explorer introduced in here and selecting rails_devcontainer (rails_devcontainer_webpack_1) in Other Containers of CONTAINERS and issuing Show Container Log. I think it will be useful for front-end development in rails.

As a bonus, since I am using mysql, phpmyadmin, whose contents can be easily viewed from the WebUI, can be accessed with localhost: 8000.

id: root password: password

Notes on using this repository

--master.key Note that you are committing --I'm committing to work as a sample right away --Dare to uncomment .gitignore --When using it in production, recreate it together with credentials.yml.enc and do not include it in the commit. --Port conflict

ERROR: for rails  Cannot start service rails: driver failed programming external connectivity on endpoint rails610-and-mysql_devcontainer_rails_1 (3ae06361400910dfa02e66e6f05319a1323da5fe5be0086f62783aa7cd51db81): Bind for 0.0.0.0:3000 failed: port is already allocated

If you get an error like this As you can see, isn't something else already using port 3000? Port 3000 is very vulnerable to conflicts as soon as you launch a lot of things. However, just because the default is so, you can change it immediately, so let's change it. Just change the value of here as follows.

docker-compose.yml

services:
  rails: &app
    build:
      context: .
      dockerfile: Dockerfile
    working_dir: /app
    ports:
      - 8080:3000 #Change the first half to any value

In this example, the setting is to forward port 8080 on the host side to port 3000 on the container. Similarly, if phpmyadmin uses port 8000, you can fix it in the same way.

Commentary

Dockerfile --Base image In devcontainer's commentary article, it is written as [use the dedicated image provided by microsoft](https://qiita.com/haruhikonyan/items/291e1e5413a827fc6d9a # dockerfile), and ruby image is also prepared. However, I couldn't specify the version of ruby ​​in detail, so I haven't adopted it this time. Since you can roughly specify 2.7 series, if you do not need to specify the version in detail, you may adopt that. In that case node is already in the image, so I don't think it is necessary to install anything related to the following node. --node installation In rails6 series, if you just rails new, webpacker will be attached as standard, so node is required in the execution environment. To do this, I've been specifying the node image in FROM and then COPY the node's executable. --npm installation Since npm is also required, this is Install as is. --Specify the version of bundler and yarn Bunder and yarn are installed by default in the ruby ​​image and node image, but the behavior differs depending on the version, so I try to Install by explicitly specifying the version.

docker-compose.yml rails

• environment --For Japan Set the time zone and language in environment. If you do not set the language in particular, you may not be able to type Japanese with rails c or it may be inconvenient. --Environment variables related to DB I'd like you to check it together with database.yml, but I made it possible to set the whole environment with environment variables so that I only need to be aware of the environment. Of course, I think I have a preference, so I may use a different key for the production or use config gem.
  • WEBPACKER_DEV_SERVER_HOST
    This is an environment variable that can control the cooperation when webpack-dev-server is executed on a host other than the host on which rails is running. Start webpack, which will be described later, in another container, and select 1 container 1 process. It has been realized.
• env_file
  You have specified an .env file and can set your own environment variables. Since it is excluded in .gitignore, it will not be committed, so I think it is better to set the access token of the external service here. Note that if this setting is made, an error will occur at startup if the file does not exist. Since it is automatically generated by initializeCommand described later, you should not have to worry about errors when using this repository.
• volumes
  Basically, I use the usage introduced in here. --Repository Directory Omoto --Director of dynamic files created by Rails The volume is a directory that doesn't need to be included in the commit and doesn't need to be kept. Maybe there are other than logs? --Directory where dependent libraries are stored Keep the ruby ​​library downloaded by bundle install and the node library downloaded by yarn install in the named volume of docker.

webpack --webpack-dev-server dedicated container I have all the rails settings in yaml anchor and Divert. --weboack-dev-server start command Unlike rails containers that use bash as a devcontainer, we have defined a command to automatically start webpack-dev-server. --Port setting for auto reload webpack-dev-server monitors the js file and automatically updates your browser when the file is saved. I am doing Port Settings for that.

db --Authentication setting change Since the authentication setting has changed from the mysql8 series and it cannot be accessed from rails as it is, Undo command is set.

• phpmyadmin
  In the official phpmyadmin container default settings are db host name to connect to ) So no explicit setting is required.

devcontainer.json

• postCreateCommand
  As you can see, it does everything needed to start Rails when creating a container.
• initializeCommand
  It's a command that I don't understand at first glance, but what I'm doing is simple, and as you can see in the comments, if you don't have .devcontainer/.env, you're copying .devcontainer/.env.sample. Since env_file is set in docker-compose.yml, it is an error prevention at startup.

How to customize

I want to rails new myself

I commit the commented out state to the master repository so that rails new can be done.

--Repository clone

Host side procedure

$ git clone https://github.com/haruhikonyan/rails-devcontainer -b master
$ cd rails-devcontainer
$ code .

--DB container settings Set the container of the DB you want to use. For mysql or postgrsql, uncomment either here to complete the setting. Don't forget to comment out volume (https://github.com/haruhikonyan/rails-devcontainer/blob/master/.devcontainer/docker-compose.yml#L50)

• rails new Launch devcontainer and run rails new.

Execution example

$ gem install rails
$ rails new .

--Added DB gem I think the default sqlite can be left as it is. With mysql like this

--Modify database.yml By default, it seems that it is set to sqlite, so if you select any other DB, you need to change the setting. If you use environment variables, change docker-compose.yml etc. as well.

--devcontainer Various settings None of them are required, but let's arrange the devcontainer settings so that they will start automatically according to your preference. --Container for webpack setting Don't forget to set the rails container environment (https://github.com/haruhikonyan/rails-devcontainer/blob/f30106d9e7b18bb0048f4bec5e836338b2c149c2/.devcontainer/docker-compose.yml#L17). --Execution command when creating container setting

• devcontainer rebuild Rebuild devcontainer to reflect the items set above. Select Remote --Containers Rebuild container from the button like> < at the bottom left to recreate all the containers.
• Start-up All you have to do is start it! If all Execute command when creating container is set, the download of dependent libraries, DB creation, and migration should be completed automatically. If you haven't set it, run it manually from the console.

Start-up

# rails s -b 0.0.0.0

I want to use it in an existing Rails project

It's basically the same as rails new above, just create a .devcontainer directory and set of files in your existing repository and start devcontainer without doing rails new.

• The content of this article is a reprint of the article posted on the WESEEK Tips wiki. The Tips wiki publishes technical information about IT companies and project information to the extent that it can be published.