始めての Docker で Ruby on Rails と Angular を構築するまで（その１）

#プログラミング

created: 2025/07/26, modified: 2025/09/04

Docker の勉強としてWebアプリを試しで作ってみます。Ruby on Rails も初めてですし、 Angular も初めてなのでいろいろ試行錯誤をしてみます。

基礎知識

Docker

Dockerとは仮想化プラットフォームで、アプリケーションを構築・テスト・デプロイできます。
Dockerfile と呼ばれる設計ファイルを書いてしまえば、どんな環境でも同じようにアプリを実行でき、効率よくスケールや移動が可能です。

Dockerfile 作って　→イメージをビルドして　→コンテナを起動する
という流れになります。

• Dockerfile: OS、ミドルウェア、アプリケーションをどう配置するか詳細に記述したテキストファイル
• Dockerイメージ: Dockerfileをビルドすることで生成される実行可能な静的なもの。明示的に削除しない限り、イメージはDockerホスト上に残り続けます
• コンテナ: Dockerイメージから作成された動的に実行される環境。コンテナは作成、起動、停止、削除など、ライフサイクルを持ちます

Ruby on Rails

Ruby on Railsは、Rubyを使ったWebアプリケーション開発用のフレームワークで、MVCアーキテクチャに基づき効率的・高速な開発が可能です。設定より規約を重視し、生産性や保守性が高いのが特徴です

Angular

Angularは、Googleが開発したTypeScriptベースのフロントエンドWebアプリケーションフレームワークで、SPA（シングルページアプリケーション）の構築に適し、コンポーネントベースの設計や二方向データバインディングが特徴です。

前勉強

この動画がすごくわかりやすい、、感激

• グローバルインストール（-g オプション）はやらない方がいい
• –no-save

全体構成

Docker コンテナを以下のように分けて構成します。
コンテナを分けることで、各サービス（Rails、MySQL、Angular）を独立して管理・スケーリングできます。障害の影響範囲を限定し、セキュリティも向上します。また、各コンテナの環境を最適化でき、開発・デプロイが容易になります。

• Rails APIサーバー（MySQLと連携）
• MySQLデータベースサーバー
• Angular開発環境（Node.js・Angular CLIを含む）

/sample-rails-angular  # プロジェクトディレクトリ
  ├─ backend/        # Railsアプリ（APIモード推奨）
  ├─ frontend/       # Angularアプリ
  ├─ docker-compose.yml

Docker をインストール

• Docker アカウントを作る
• 作ったアカウントのメールアドレス認証をする

1. プロジェクトディレクトリ作り設定ファイルを配置

~/Docker/sample-rails-angular

を作成し、docker-compose.yml ファイルを作ります。コンテナが複数あるときに、それらを連携させる設定です。

docker-compose.yml

services:
  db:
    image: mysql:8
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: myapp_development
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    volumes:
      - db-data:/var/lib/mysql
    ports:
      - "3306:3306"

  backend:
    build: ./backend
    command: bundle exec rails s -b 0.0.0.0 -p 3000
    volumes:
      - ./backend:/app
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      DATABASE_HOST: db
      DATABASE_USERNAME: user
      DATABASE_PASSWORD: password

  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
      - /app/node_modules # M1/M2 Mac対策 250801
    ports:
      - "4200:4200"
    depends_on:
      - backend

volumes:
  db-data:

2. backend ディレクトリと設定ファイル3つ（Rails）

backend ディレクトリを作成し、下記ファイルを配置

• Dockerfile
• Gemfile
• Gemfile.lock

Gemfile
Gemfile は、Railsアプリで使いたいgem（ライブラリ）を開発者が指定するファイルで、プロジェクトのルートフォルダ（最上位ディレクトリ）に置きます。
bundle install コマンドを実行した際に生成され、実際にインストールされたgemのバージョンや依存関係が記録されたファイル

Dockerfile

FROM ruby:3.2

RUN apt-get update -qq && apt-get install -y nodejs default-mysql-client

WORKDIR /app

COPY Gemfile Gemfile.lock ./
RUN bundle install

COPY . .

CMD ["bundle", "exec", "rails", "s", "-b", "0.0.0.0"]

Gemfile

source 'https://rubygems.org'

gem 'rails', '~> 7.0.4'
gem 'mysql2', '>= 0.5.3', '< 0.6.0'
gem 'puma', '~> 5.0'
gem 'rack-cors'

group :development, :test do
  gem 'rspec-rails'
  gem 'pry'
end

group :production do
  gem 'unicorn'
end

Gemfile.lock

空のファイル

3. frontend のAngular CLI

frontend ディレはビルドの前にやっておくことがあります。私のMacのCPUはAppleシリコンなので、ちょっと工夫が必要でした

まず frontend ディレクトリを作成し、その中に入ります

% mkdir frontend
% cd frontend

frontend ディレクトリで

npm install @angular/cli --no-save
npx ng new frontend --directory .

この「frontend」はAngularプロジェクトの名前です。これは：

• プロジェクト内の様々な設定ファイル（package.json、angular.jsonなど）に記録されます
• アプリケーションのブラウザタブに表示されるデフォルトのタイトルになります
• 生成されるコンポーネントのセレクタープレフィックスになります（app-*のような）

生成後、以下の場所で確認できます：

• **package.json**: "name" フィールドに「frontend」と表示されます
• **angular.json**: プロジェクト名として記録されています
• **src/index.html**: タイトルタグに表示されます

「--directory .」オプションは、新しいプロジェクトを現在のディレクトリ内に直接作成するよう指示しています（サブディレクトリを作らずに）。そのため、フォルダ名としては見えませんが、プロジェクト設定内で名前として残ります。

プロジェクト作る途中で、聞かれること

Would you like to add Angular routing? (y/N)
? Which stylesheet format would you like to use? (Use arrow keys)
? Do you want to create a 'zoneless' application without zone.js (Developer Preview)? (y/N)
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)
❯ CSS 
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org     

※ローカルインストール
※--no-save

Dockerfileをfrontendディレクトリに配置

Dockerfile

FROM node:18-alpine

WORKDIR /app

RUN npm install -g @angular/cli

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 4200

CMD ["ng", "serve", "--host", "0.0.0.0"]

4. ビルド

プロジェクトディレクトリに移動して、下記コマンドを実行。
Dockerイメージ（コンテナの元となるテンプレート）を作成または再構築するコマンドです。

docker-compose build

エラー1

Error authentication required - email must be verified before using account

原因：Docker Hubへのログインしたアカウントにて、メールアドレスが未認証だった。
プッシュ・プル操作などでメール認証完了が必要になることがあります。つまりDocker CLIがDocker Hub認証を試みる際に「メール確認が完了していない」ことでアクセス拒否されている状況です。

→メール認証すればOK。メールが来てたので認証ボタン押したら解決

5. 起動

docker-compose up

docker-compose up したが backend 起動していない

つづく