Complete roadmap for building environment up to Docker + rails6 + MySQL + bootstrap, jquery

Introduction

I had a lot of trouble noticing that the environment construction failed when I needed Jquery while creating a portfolio with Docker + rails6 and added it, so I hope it will help those who are starting from now on. I decided to write. Also, since there was not much information implemented while mentioning bootstrap and jquery in Docker + rails6, I will share it.

environment

• Mac OS Catalina
• Ruby 2.7.2
• Rails 6.0.3.2
• MySQL 8.0
• bootstrap 4.5.3
• jquery 3.5.1

Prerequisites

In this post, I will install Docker desktop and omit the basic knowledge about Docker, so if you have not installed Docker desktop yet

Install docker on Mac Try installing from the link above.

Basic knowledge [I'll explain what Docker is like very carefully]

procedure

Instead of the table of contents, I would like to write the procedure roughly and then write the code in detail, so if you do not need to see all of them, I would like you to pick up a part and fly.

~ App preparation ~

1. Create a new directory (folder) and create the necessary files in it.
2. Create a new app with rails new and build an image
3. Correct the db settings and start the container

~ Supplementary information (docker operation method) ~

~ bootstrap, jquery additional edition ~

1. Add bootstrap, jquery, popper.js with yarn
2. Add and modify files

We will proceed with such contents. It seems to be quite long, but please forgive me. (Now ←) Let's go! !!

~ App preparation ~

1. Create a new directory (folder) and create the necessary files in it.

This time, let's create a new directory (sample_app) on the desktop for easy understanding. (The following command)

$ mkdir sample_app

In this directory Dockerfile docker-compose.yml Gemfile Gemfile.lock entrypoint.sh Create a.

$ touch Dockerfile
$ touch docker-compose.yml 
...(Omitted below)

And I will describe it in that file.

Dockerfile

FROM ruby:2.7
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update -qq \
    && apt-get install -y nodejs yarn \
    && mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

docker-compose.yml

version: '3'
services:
  db:
    image: mysql:8.0
    volumes:
      - ./tmp/db:/var/lib/mysql
    environment:
      - MYSQL_ALLOW_EMPTY_PASSWORD=1
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/app
    ports:
      - "3000:3000"
    depends_on:
      - db

Gemfile

source 'https://rubygems.org'
gem 'rails', '~>6'

Gemfile.lock

#do nothing

entrypoint.sh

#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /app/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

I won't explain it in detail, but the important thing here is the Dockerfile.

Dockerfile

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update -qq \
    && apt-get install -y nodejs yarn \
    && mkdir /app

This will be an important factor when adding bootstrap and jquery later, so please copy and paste without making a mistake. (I had a lot of wasted trouble because I proceeded without individual descriptions at first.)

2. Create a new app with rails new and build an image

App creation

Now that you're ready to build your app, let's get your app framework built in Docker!

First, enter the following command in the terminal and docker will create the necessary files for the application without permission

$ docker-compose run web rails new . --force --no-deps --database=mysql --skip-test --webpacker

This time, it is specified that the test directory is not created because rspec is used instead of minitest. (If you are doing rails-tutorial and want to use minitest, please omit "--skip-test")

Also, don't forget to enter webpacker as it is related to bootstrap and jquery.

And docker will do its best to launch the app for about 5 minutes, so be sure not to touch the terminal during that time. Finally, when this sentence comes back, it's a success! !!

Successfully built ~~~~~~~~
Successfully tagged app name_web:latest

Image build

When the application creation is completed and the user is given terminal input permission again, next

$ docker-compose build

Enter the.

You can see this by looking at the Gemfile, but since the contents have been rewritten from the Gemfile described earlier, you have to rebuild it. In short, every time I make a change to the Gemfile, I have to do a "docker-compose build". There is no problem if you know the position.

And let's wait about 5 minutes again. (This time is often my break time ←)

3. Correct the db settings and start the container

Next, set the db. The operation that I do not understand continues, but at first let's imitate and input without thinking deeply.

$ docker-compose exec db bash

When you enter the above command

root@1234567899#
↑ @I typed the numbers after

Will come back, so follow the "#"

# mysql -u root

You can operate mysql by typing. Then, enter the following command (ALTER ~) to make the necessary settings.

mysql> ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '';
-- Query OK, 0 rows affected (0.02 sec)　　<= #When this command comes back, the answer is correct.

If you can do this

> exit

You can return to the original terminal by typing twice.

Next, edit the description in config/database.yml to complete the setting. Please modify as follows

config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  host: db  #<=Change here(before:localhost)

And finally, create the database.

docker-compose run web rails db:create

Now that everything is ready, let's launch the terminal with the following command:

$ docker-compose up

If the following text comes back, it is a success.

web_1 | => Booting Puma
web_1 | => Rails 6.0.3.4 application starting in development
...
...
web_1 | => Use Ctrl-C to stop

Let's check it with a browser. For google-chrome, use the search bar next to the reload button

http://localhost:3000

When you enter

Since such a screen appears, I was able to confirm that it is working normally on the browser. Thank you for the time being! !!

Supplementary information (docker operation method)

$ docker-compose up

After entering

web_1 | => ...
...

The output of is debugging the processing in the browser all the time while the container is started. You can do other operations (rails console, rails g controller, etc.) by launching another new terminal.

To launch a new terminal

For the app terminal=> ⌘ + T 
For VSCode=>"" In the upper right+"button

You can open it with.

Rails operation

When creating a controller or model while creating an application, for example

rails generate controller User 

I often see articles written to describe as The above expression is the target command for the person who built the environment on the PC.

People must build an environment with Docker

$ docker-compose run web rails generate ...

It is necessary to add a description that it is operating on docker before. For the time being

$ docker-compose run web 

I hope you will remember that you start after putting on.

1st end, 2nd and subsequent work start, end procedure

When you exit the container

web_1 | => ...
...

Return to the terminal where is displayed

ctrl + C

If you enter, the container will stop and you will not be able to see it in your browser. However, the container is not completely gone just because it is stopped.

$ docker-compose ps

When you enter

         Name                        Command               State           Ports         
-----------------------------------------------------------------------------------------
app name_db_1    docker-entrypoint.sh mysqld      Up      3306/tcp, 33060/tcp   
app name_web_1   entrypoint.sh bash -c rm - ...   Up      0.0.0.0:3000->3000/tcp

I think something like this will come back. When you finish the work, it is better to turn it off completely and then turn off the power of the PC so that it will be easier to restart the next time.

And the command to erase it completely

$ docker-compose down

You can do it with. This completes the withdrawal work.

$ docker-compose ps

If you enter again,

         Name                        Command               State           Ports         
-----------------------------------------------------------------------------------------

You can confirm the deletion.

Start work from the second time onwards

Then when you want to resume work again

$ docker-compose up

Just enter, and it will be in the same state as last time. (The db data is not erased either) It's a really great technology ...!

important point

When I try to open the terminal and type the command immediately when launching the container, the Docker desktop side is not ready. For macbook, click the whale mark on the upper right of the taskbar

$ Docker Desktop is starting

But

$ Docker Desktop is runnning

Please start after confirming that.

Finished work after the second time

And the end is the same as the first time, at the terminal where the container was launched

ctrl + C

from

$ docker-compose down

It is completed with.

~ bootstrap, jquery additional edition ~

Prerequisites

Again, I will proceed with the fact that yarn is already installed in mac, so if you do not have it first

How to install an older version of Xcode Install Homebrew Install yarn with homebrew

Please refer to this area and start the installation!

1. Add bootstrap, jquery, popper.js with yarn

Now let's add bootstrap and jquery! It's almost time to come here, so let's do our best!

Install with the following command as the title says!

$ yarn add bootstrap jquery popper.js @fortawesome/fontawesome-free

#In this command, docker mentioned earlier-Please do not write compose run web rails

2. Add and modify files

In the first place, bootstrap has a dependency on jquery, which is part of the language javascript. And from rails6, javascript files are managed by a system called webpacker. Furthermore, in order to use webpacker, yarn is also required in Docker, and it is the command of Dockerfile that prepares it ...!

(This is why I wrote that it is important when launching the Dockerfile and application at the beginning)

So I will fill in the webpacker and javascript files.

Open app/javascript/packs/application.js and copy and paste the following code there.

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
...
//Fill in below
require("bootstrap");
...

According to other articles, this description is at the same time thanks to the dependencies

require("jquery");

It seems that it behaves as described.

Next is the webpacker.

Rewrite config/webpack/environment.js as follows.

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
var webpack = require('webpack');

environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)

module.exports = environment

With the above, we have created the foundation to use bootstrap and jquery on rails!

Scss settings

Finally, let's also set scss

Create a new stylesheets directory in app/javascript and create a newapplicition.scss file in it.

$ mkdir stylesheets
$ cd ~app/javascript/stylesheets
$ touch application.scss

Then put the following code in application.scss.

app/javascript/stylesheets/application.scss

@import 'bootstrap/scss/bootstrap';

Then, next, enter the additional code in app/javascript/packs/application.js again.

app/javascript/packs/application.js

...(Omission)
require("bootstrap");
...
//Add the following
import "../stylesheets/application.scss";

This completes all the settings!

After that, you can manage the scss code collectively in this application.scss. (* I wrote this, but for some reason, even if I write the code in another .scss file, it will be applied to all pages, so I would like to investigate it a little more.)

This really really completes the setup! Thank you for your hard work! !! !! !!

Finally

Thank you for reading until the end!

It seems that there are many people who give up because it is extremely difficult to build an environment even though it cannot be started unless it is done first.

It's been less than two months since I started studying rails and docker, but I'm weak. If you can start from now on, I will not make the same mistakes as I do, so I would be very happy if you could refer to it.

If you do the same and there are any errors, I would like to answer as much as I can!

Also, if you have any suggestions, please let me know.

Let's have a nice Rails life!

reference

[Rails] Building an environment with Rails 6.0 x Docker x MySQL [First environment construction] I tried to create a Rails6 + MySQL8.0 + Docker environment on Windows 10 Building a local development environment for Rails tutorials with Docker-Introducing Bootstrap and Font Awesome with Webpack-