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. .. ..

image.png

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

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.

devcontainer.json

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)

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

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.


Recommended Posts

Rails development environment created with VSCode and devcontainer
Building Rails 6 and PostgreSQL environment with Docker
Prepare the format environment with "Rails" (VScode)
Lightweight PHP 7.4 development environment created with Docker
Ruby on Rails development environment construction with Docker + VSCode (Remote Container)
Build a Laravel / Docker environment with VSCode devcontainer
[Rails] Development with MySQL
[First team development ③] Share the development environment created with Docker
Comfortable Docker environment created with WSL2 CentOS7 and Docker Desktop
Debug the VSCode + Docker + PHP development environment with XDebug.
Create Chisel development environment with Windows10 + WSL2 + VScode + Docker
Rails6 development environment construction [Mac]
WSL2 + VSCode + Docker development environment
[Docker] Rails 5.2 environment construction with docker
[Rails] [Docker] Copy and paste is OK! How to build a Rails development environment with Docker
[Rough explanation] How to separate the operation of the production environment and the development environment with Rails
I made a development environment with rails6 + docker + postgreSQL + Materialize.
Rails application development environment construction with Docker [Docker, Rails, Puma, Nginx, MySQL]
How to build Rails, Postgres, ElasticSearch development environment with Docker
Create Rails5 and postgresql environment with Docker and make pgadmin available
Building an environment for creating apps with Rails and Vue
Build a local development environment for Rails tutorials with Docker-Introduce Bootstrap and Font Awesome with Webpack-
Prepare Java development environment with Atom
Build PlantUML environment with VSCode + Docker
Build environment with vue.js + rails + docker
Build jooby development environment with Eclipse
[Environment construction with Docker] Rails 6 & MySQL 8
Comparison of WEB application development with Rails and Java Servlet + JSP
Build Go development environment with WSL2 + Docker Desktop + VSCode (Remote --Containers)
Procedure for building a Rails application development environment with Docker [Rails, MySQL, Docker]
Exciting personal development with Rails Part 1: Try designing specifications and DB
How to install Pry after building Rails development environment with Docker
Install Rails in the development environment and create a new application
Create a development environment for Ruby 3.0.0 and Rails 6.1.0 on Ubuntu 20.04.1 LTS
Steps to build a Ruby on Rails development environment with Vagrant
Build debug environment on container --Build local development environment for Rails tutorial with Docker-
I built a rails environment with docker and mysql, but I got stuck
Rails environment construction with Docker (personal apocalypse)
Laravel development environment construction with Docker (Mac)
Build a PureScript development environment with Docker
Create Rails 6 + MySQL environment with Docker compose
Create Spring Boot-gradle-mysql development environment with Docker
[Docker] Development environment construction Rails6 / Ruby2.7 / MySQL8
What is Java and Development Environment (MAC)
[Copy and paste] Build a Laravel development environment with Docker Compose Part 2
How to build a Ruby on Rails development environment with Docker (Rails 6.x)
Build a local development environment for Rails tutorials with Docker (Rails 6 + PostgreSQL + Webpack)
Build a Wordpress development environment with Docker
Launching the production environment with docker + rails (ver5.2) and errors that occurred
[Copy and paste] Build a Laravel development environment with Docker Compose Participation
Build a bulletin board API with authentication and authorization with Rails 6 # 1 Environment construction
How to build a Ruby on Rails development environment with Docker (Rails 5.x)
Template: Build a Ruby / Rails development environment with a Docker container (Ubuntu version)
Template: Build a Ruby / Rails development environment with a Docker container (Mac version)
Java application development environment created in VM environment
Environment construction summary with rvm and postgresql
How to build Rails 6 environment with Docker
Introduction to Java development environment & Spring Boot application created with VS Code
Introduce Docker to the development environment and test environment of existing Rails and MySQL applications
Build a development environment for Docker + Rails6 + Postgresql
Let's get started with Java-Create a development environment ②