Zenn
Open10

学習用のRailsコンテナ作成

まきのすけまきのすけ

やりたいこと

  • Ralis/Ruby 学習のため、ローカル環境に影響を与えず最新バージョンの Rails アプリケーションを新規作成、実行できるコンテナを作成する
  • コンテナ内で複数のRailsアプリケーションを作成し、実行できるようにする
まきのすけまきのすけ
.devcontainer/Dockerfile
FROM ruby

# 環境変数の取得
ARG ENV_USERNAME
ARG ENV_WORKDIR

# 環境の設定
ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

# 必要なパッケージのインストール
RUN apt-get update -qq \
  && apt-get install -y nodejs postgresql-client

# ユーザの作成
RUN adduser --disabled-password --gecos "" ${ENV_USERNAME}

# ファイルのコピー
COPY . ${ENV_WORKDIR}
RUN chown -R ${ENV_USERNAME}:${ENV_USERNAME} ${ENV_WORKDIR}

# 作業ディレクトリ、ユーザを設定
WORKDIR ${ENV_WORKDIR}
USER ${ENV_USERNAME}

# Gem のアップデートとインストール
RUN gem update --system \
  && bundle install
まきのすけまきのすけ
.devcontainer/docker-compose.yml
services:
  db:
    image: postgres
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=pstgrsdb
      - TZ=Asia/Tokyo
    volumes:
      - db:/var/lib/postgresql/data:rw

  apps:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
      args:
        ENV_USERNAME: dev
        ENV_WORKDIR: /workspace
    volumes:
      - ..:/workspace:rw
    depends_on:
      - db
    command: /bin/sh -c "while :; do sleep 10; done"
    tty: true
    stdin_open: true

volumes:
  db:
まきのすけまきのすけ

一旦、開発コンテナはこんな感じに。
拡張機能、設定はおいおい調整。

.devcontainer/devcontainer.json
{
  "name": "Rails Tutorials",
  "dockerComposeFile": "docker-compose.yml",
  "service": "apps",
  "workspaceFolder": "/workspace"
}
  • コンテナ作成時に RubyLSP のGemをインストールする。
まきのすけまきのすけ

Railsアプリケーションの作成

rails new sample-app --database=postgresql --skip-test
  • PostgreSQL を使用する
  • テストファイルをスキップする
まきのすけまきのすけ

作成した Rails アプリケーションで bundle exec rails db:create をする際は以下の修正が必要

sample-app/config/database.yml
 default: &default
   adapter: postgresql
   encoding: unicode
   # For details on connection pooling, see Rails configuration guide
   # https://guides.rubyonrails.org/configuring.html#database-pooling
   pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
+  username: postgres
+  password: pstgrsdb
+  host: db
+  port: 5432
まきのすけまきのすけ

Gemfile, rubocop の設定

# frozen_string_literal: true

source 'http://rubygems.org'

ruby '3.3.6'

gem 'rails'
gem 'rubocop'
.rubocop.yml
AllCops:
  Exclude:
    - 'cherry-book/sample-codes/**/*'
まきのすけまきのすけ

拡張機能

汎用的な拡張機能

  1. Japanese Language Pack for Visual Studio Code

    • VSCode を日本語化してくれる。

  2. Trailing Spaces

    • 末尾の不要なスペースをハイライトしてくれる。

  3. Zenkaku

    • 全角スペースをハイライトしてくれる。

  4. indent-rainbow

    • インデントを階層ごとにハイライトしてくれる。

  5. REST Client

    • API のテストをするための拡張機能。

Ruby開発用の拡張機能

  1. RubyLSP

    • Ruby 開発のもろもろが詰まった拡張機能。（詳細はこちら）

  2. Rails

    • Rails 開発用のもろもろが詰まった拡張機能。

  3. Ruby Solargraph

    • Ruby のコードスニペットをサポートする拡張機能。

  4. Ruby and Rails Snippets

    • ERB のコードスニペットもサポートしてくれる。

  5. Rails DB Schema

    • DB Schema に沿って、モデルのカラム名を補完してくれる。

  6. Rails i18n

    • 入力補完、マウスホバーで翻訳表示が可能。

  7. vscode-gemfile

    • Gem ライブラリの docs にジャンプできる。
まきのすけまきのすけ

Ruby-LSP, solargraph の導入に伴う修正

.devcontainer/devcontainer.json
  {
    "name": "Rails Tutorials",
    "dockerComposeFile": "docker-compose.yml",
    "service": "apps",
-   "workspaceFolder": "/workspace"
+   "workspaceFolder": "/workspace",
+   "customizations": {
+     "vscode": {
+       "extensions": [
+         // 汎用拡張機能
+         "MS-CEINTL.vscode-language-pack-ja",
+         "shardulm94.trailing-spaces",
+         "mosapride.zenkaku",
+         "oderwat.indent-rainbow",
+         "humao.rest-client",
+         // Ruby 開発用拡張機能
+         "Shopify.ruby-lsp",
+         "bung87.rails",
+         "castwide.solargraph",
+         "cjay.ruby-and-rails-snippets",
+         "aki77.rails-db-schema",
+         "shanehofstetter.rails-i18n",
+         "bung87.vscode-gemfile"
+       ]
+     }
+   },
+   "postCreateCommand": "cd .ruby-lsp && bundle install"
  }
Gemfile
  ruby '3.3.6'

  gem 'rails'
+ gem 'rubocop'
+ gem 'ruby-lsp'
+ gem 'solargraph'

ワークスペース用VSCode設定の追加

.vscode/settings.json
{
  "html.autoClosingTags": true, // 自動閉じタグ補完
  "editor.linkedEditing": true, // 自動タグ名変更
  "emmet.includeLanguages": {
    "erb": "html" // erb でも HTML の Emmet を使用可能にする
  },
  "files.associations": {
    "*.erb": "erb"
  },
  "[ruby]": { // Ruby用設定
    "editor.defaultFormatter": "Shopify.ruby-lsp",
  }
}