[RUBY] Créez un environnement de développement local pour les didacticiels Rails avec Docker (Rails 6 + PostgreSQL + Webpack)

introduction

Le dernier didacticiel Rails (au 8 août 2020) utilise Rails 6 et Je voudrais créer un environnement de développement qui prend en charge cela avec Docker.

Lors de la création d'un environnement de développement pour des applications développées personnellement J'ai introduit Rails 6 parce que j'aime les nouveautés ...

Cependant ... avec l'introduction de Webpack dans le bundler de modules JavaScript de Rails 6 Non seulement l'introduction et la gestion d'outils tels que Bootstrap et Fontawesome changeront, mais En premier lieu, lors de la construction de l'environnement, des étapes qui ne sont pas nécessaires dans Rails 5 sont nécessaires, Nous avons frappé les murs de Rails 6 et de Webpack de manière considérable ...

Comme c'est beaucoup, j'aimerais organiser et établir mes connaissances et mon expérience à travers ce procès.

De plus, j'aimerais réexécuter tout en faisant dérailler le didacticiel Rails et approfondir mon apprentissage.

Application développée personnellement mdClip <éditeur de démarques en ligne>

Auparavant, un article sur la création d'un environnement Rails 5 avec Docker Créer un environnement de développement Rails avec Docker pour la première fois [NGINX + Rails 5 (puma) + PostgreSQL] --Qiita

environnement

• Mac OS (Mojave)
• Docker for Mac
• Ruby 2.6.3-alpine
• Rails 6.0.3
• PostgreSQL 11.0-alpine

Fichier de configuration

Préparez les 5 fichiers suivants dans l'espace de travail Dockerfile, docker-compose.yml, Gemfile, Gemfile.lock, entrypoint.sh

https://github.com/naokit1030/sample_app_on_docker.git

git clone -b create-docker-files https://github.com/dev-naokit/sample_app_on_docker.git

Dockerfile

--Utilisez "alpin" pour réduire le poids de l'image

--nodejs et yarn sont nécessaires pour installer Webpack

• Vous ne pouvez pas simplement utiliser postgresql, vous avez également besoin de postgresql-dev

L'option -j4 de --bundle install accélère l'installation du bundle

• Après l'installation du bundle, la suppression des fichiers inutiles contribue à réduire la taille de l'image

FROM ruby:2.6.3-alpine

ENV LANG=ja_JP.UTF-8
ENV TZ=Asia/Tokyo
ENV ROOT=/myapp \
    GEM_HOME=/bundle \
    BUNDLE_PATH=$GEM_HOME
ENV BUNDLE_BIN=$BUNDLE_PATH/bin
ENV PATH /app/bin:$BUNDLE_BIN:$PATH


WORKDIR $ROOT

RUN apk update && \
    apk upgrade && \
    apk add --no-cache \
        gcc \
        g++ \
        libc-dev \
        libxml2-dev \
        linux-headers \
        make \
        nodejs \
        postgresql \
        postgresql-dev \
        tzdata \
        yarn && \
    apk add --virtual build-packs --no-cache \
        build-base \
        curl-dev

COPY Gemfile $ROOT
COPY Gemfile.lock $ROOT

RUN bundle install -j4
#Supprimer les fichiers inutiles
RUN rm -rf /usr/local/bundle/cache/* /usr/local/share/.cache/* /var/cache/* /tmp/* && \
apk del build-packs

COPY . $ROOT

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

docker-compose.yml

• Ajout de l'option : cahed au volume pour résoudre le problème d'accès lent au stockage sur Mac --Webpack-dev-server est démarré dans un autre conteneur pour prendre en charge le rechargement à chaud. (S'il y a un changement dans la structure du fichier, il rechargera le navigateur et compilera autour de javascript si nécessaire) --db host, user, password sera réutilisé plus tard

version: '3'

services:
  db:
    image: postgres:11.0-alpine
    volumes:
      - postgres:/var/lib/postgresql/data:cached
    environment:
      - TZ=Asia/Tokyo
    ports:
      - '5432:5432'
    environment:
      PGDATA: /var/lib/postgresql/data/pgdata
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
      POSTGRES_INITDB_ARGS: '--encoding=UTF-8 --locale=ja_JP.UTF-8'
      TZ: Asia/Tokyo
  app:
    build: .
    command: ash -c "rm -f tmp/pids/server.pid && ./bin/rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp:cached
      - rails_cache:/myapp/tmp/cache
      - bundle:/bundle:cached
    tmpfs:
      - /tmp
    tty: true
    stdin_open: true
    ports:
      - "3000:3000"
    environment:
      RAILS_ENV: development
      NODE_ENV: development
      DATABASE_HOST: db
      DATABASE_PORT: 5432
      DATABASE_USER: postgres
      DATABASE_PASSWORD: password
      WEBPACKER_DEV_SERVER_HOST: webpacker
    depends_on:
      - db
      - webpacker
    links:
      - db
      - webpacker
  webpacker:
    build: .
    command: ./bin/webpack-dev-server
    volumes:
      - .:/myapp:cached
    environment:
      RAILS_ENV: development
      NODE_ENV: development
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
    tty: false
    stdin_open: false
    ports:
      - '3035:3035'

volumes:
  rails_cache:
  postgres:
  bundle:

Gemfile

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

Gemfile.lock Seule la commande touch convient en tant que fichier vide

touch Gemfile.lock

entrypoint.sh

#!/bin/bash
set -e

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

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

procédure

Installez Rails 6.0.3.

docker-compose run app rails new . --force --no-deps --database=postgresql --skip-bundle

Gemfile Modifié comme suit selon le tutoriel Rails (Il a été modifié pour utiliser PostgreSQL même dans les environnements de développement et de test.)

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'rails',      '6.0.3'
gem 'puma',       '4.3.4'
gem 'pg',         '1.1.4'
gem 'sass-rails', '5.1.0'
gem 'webpacker',  '4.0.7'
gem 'turbolinks', '5.2.0'
gem 'jbuilder',   '2.9.1'
gem 'bootsnap',   '1.4.5', require: false

group :development, :test do
  gem 'byebug',  '11.0.1', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console',           '4.0.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.1.0'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'capybara',                 '3.28.0'
  gem 'selenium-webdriver',       '3.142.4'
  gem 'webdrivers',               '4.1.2'
  gem 'rails-controller-testing', '1.0.4'
  gem 'minitest',                 '5.11.3'
  gem 'minitest-reporters',       '1.3.8'
  gem 'guard',                    '2.16.2'
  gem 'guard-minitest',           '2.4.6'
end

group :production do
end

#Tzinfo pour obtenir des informations sur le fuseau horaire sous Windows-doit inclure une gemme de données
#gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Gemfile.lock mis à jour (peut ne pas être nécessaire)

docker-compose run app bundle update

Installation de Webpacker

Rails 6 nécessite un webpacker, Il n'est pas installé tel quel, alors installez-le

docker-compose run app rails webpacker:install

Paramètres de la base de données

config/database.yml Faites correspondre l'hôte, le nom d'utilisateur et le mot de passe avec docker-compose.yml

default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password: password
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  
#réduction...

docker-compose build 'Build' est requis chaque fois que vous modifiez un Dockerfile ou un Gemfile Cela prendra un certain temps car l'installation du bundle est également effectuée.

docker-compose build

Enfin démarrer le conteneur

docker-compose up

Création de base de données

On dit qu'il n'y a pas de base de données telle quelle, alors créez une base de données pour l'environnement de développement

docker-compose run app rake db:create

Contrôle de fonctionnement

Vérifiez le conteneur fonctionnant avec docker ps Trois conteneurs sont en cours d'exécution: DB, Rails et webpack-dev-server.

$ docker ps
CONTAINER ID        IMAGE                            COMMAND                  ...              PORTS                              NAMES
1fb4f53d5652        sample_app_on_docker_app         "sh /usr/bin/entrypo…"   ...    0.0.0.0:3000->3000/tcp             sample_app_on_docker_app_1
ccd40c018d53        sample_app_on_docker_webpacker   "sh /usr/bin/entrypo…"   ...    3000/tcp, 0.0.0.0:3035->3035/tcp   sample_app_on_docker_webpacker_1
74392532098a        postgres:11.0-alpine             "docker-entrypoint.s…"   ...    0.0.0.0:5432->5432/tcp             sample_app_on_docker_db_1

Lorsque vous accédez à localhost: 3000 avec un navigateur

Merci pour votre travail acharné "Yay! You are on Rails!"

Trouble shoot

lié à check_yarn_integrity

Erreur lors du démarrage d'un conteneur avec docker-compose up

app_1        | ========================================
app_1        |   Your Yarn packages are out of date!
app_1        |   Please run `yarn install --check-files` to update.
app_1        | ========================================
app_1        | 
app_1        | 
app_1        | To disable this check, please change `check_yarn_integrity`
app_1        | to `false` in your webpacker config file (config/webpacker.yml).
app_1        | 
app_1        | 
app_1        | yarn check v1.16.0
app_1        | info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.
app_1        | 
app_1        | 
app_1        | Exiting
sample_app_on_docker_app_1 exited with code 1

config/webpacker.yml Changer comme suit

#...réduction

development:
  <<: *default
  compile: false # true ->Changer en faux

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true
  
#réduction...

"webpack-dev-server" not found

De même, une erreur qui se produit lors du démarrage d'un conteneur avec docker-compose up

webpacker_1  | yarn run v1.16.0
webpacker_1  | error Command "webpack-dev-server" not found.
webpacker_1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
sample_app_on_docker_webpacker_1 exited with code 1

Parce que webpack-dev-server ne doit pas être décrit dans package.json Installez webpack-dev-server

docker-compose run app yarn add webpack-dev-server

prime

Taille de l'image 477MB J'ai l'intention d'emprunter beaucoup de la sagesse de mes ancêtres pour réduire le poids. Quand j'ai commencé à apprendre Docker, l'image que j'ai créée faisait environ 1,5 Go ...

$docker images
REPOSITORY                       TAG                 IMAGE ID            CREATED             SIZE
sample_app_on_docker_app         latest              84aed607a3d2        31 minutes ago      477MB
sample_app_on_docker_webpacker   latest              84aed607a3d2        31 minutes ago      477MB