<p>この記事では、Dockerを使用してRails7 + PostgreSQL + esbuildの環境構築の方法を解説しています。</p>
<h2>環境</h2>
<p>以下のような環境で利用してます。</p>
<ul>
<li>MacBookPro（M1）</li>
<li>docker desktop</li>
</ul>
<h2>手順</h2>
<p>順番としては以下になります。</p>
<ol>
<li>Dockerfile.dev、docker-compose.ymlの作成</li>
<li><code>docker-compose build</code>の実行</li>
<li><code>docker compose run --rm app gem install rails</code>の実行</li>
<li><code>docker compose run --rm app rails new . -d postgresql -j esbuild</code>の実行</li>
<li><code>config/database.yml</code>、<code>package.json</code>、<code>Procfile.dev</code>の編集</li>
<li>DBの作成</li>
</ol>
<h2>Dockerfile.dev、docker-compose.ymlの作成</h2>
<p>まず、今回作成するフォルダの内容としては下記のようになります。</p>
<pre><code>任意のフォルダ名（今回はmy_appとします）
├── // ここにRailsの各ディレクトリが生成されます（appなど）
├── Dockerfile.dev
└── docker-compose.yml

</code></pre>
<p>最初に下記コマンドで大元のフォルダを作成してください。</p>
<pre><code>mkdir my_app
</code></pre>
<p>次に下記コマンドで上記で作成したフォルダに移動します。</p>
<pre><code>cd my_app
</code></pre>
<p>次に下記コマンドでDockerfile.dev、docker-compose.ymlの作成をします。</p>
<pre><code>touch Dockerfile.dev docker-compose.yml
</code></pre>
<p>作成できたらそれぞれのファイルに下記内容を記載してください。</p>
<h3>Dockerfile.dev</h3>
<p>Rails7.1から<code>rails new</code>で新規プロジェクトを立ち上げると、<code>Dockerfile</code>が自動的に作成されるようになりました。
他の方の記事を参考にさせてもらい環境を構築しようとしていたのですが、ファイル名を<code>Dockerfile</code>のまま行っていると<code>rails new</code>したタイミングでファイルが上書きされてしまっていたので、<code>Dockerfile.dev</code>として上書きされないようにしています。</p>
<p><code>Dockerfile.dev</code>には下記を記載してください。</p>
<pre><code class="language-dockerfile">FROM node:20.12.0-alpine as node

RUN apk add --no-cache bash curl &amp;&amp; \
    curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.22.19

FROM ruby:3.3.0-alpine

COPY --from=node /usr/local/bin/node /usr/local/bin/node
COPY --from=node /usr/local/bin/npm /usr/local/bin/npm
COPY --from=node /usr/local/bin/npx /usr/local/bin/npx
COPY --from=node /opt/yarn-* /opt/yarn
RUN ln -fs /opt/yarn/bin/yarn /usr/local/bin/yarn
RUN apk add --no-cache git build-base libxml2-dev libxslt-dev postgresql-dev postgresql-client tzdata bash vim &amp;&amp; \
    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

ENV APP_ROOT /app
RUN mkdir $APP_ROOT
WORKDIR $APP_ROOT

ENV LANG=ja_JP.UTF-8 \
    BUNDLE_JOBS=4 \
    BUNDLE_RETRY=3 \
    EDITOR=vim
RUN gem update --system &amp;&amp; \
    gem install --no-document bundler:2.5.7

RUN bundle config set force_ruby_platform true
</code></pre>
<h4>ポイント1</h4>
<p><code>Dockerfile.dev</code>ではRailsをインストールしていません。</p>
<p>Railsプロジェクト内には<code>Gemfile</code>と<code>Gemfile.lock</code>があるはずで、そちらを参照して正しいバージョンのRailsをインストールするべきだからです。</p>
<h4>ポイント2</h4>
<p><code>esbuild</code>の環境には<code>node</code>と<code>yarn</code>が必要になっており、<code>node</code>のイメージをセットアップした後に、Rubyのイメージへ必要なファイルをコピーしています。</p>
<h3>docker-compose.yml</h3>
<p>docker-compose.ymlには下記を記載してください。</p>
<pre><code class="language-yml">version: &#x27;3&#x27;
services:
  app:
    build:
      context: .
      dockerfile: &quot;Dockerfile.dev&quot;
    stdin_open: true
    tty: true
    ports:
      - 3000:3000
    command: /bin/sh -c &quot;bundle install &amp;&amp; yarn install &amp;&amp; rm -f tmp/pids/server.pid &amp;&amp; bin/dev&quot;
    environment:
      DB_USER: postgres
      DB_PASS: postgres
      DB_HOST: postgres
      DB_PORT: 5432
    depends_on:
      - postgres
    volumes:
      - .:/app:delegated
      - node-modules:/app/node_modules:delegated
      - bundle-data:/usr/local/bundle:delegated

  postgres:
    image: postgres:16.2
    stdin_open: true
    tty: true
    restart: always
    ports:
      - 5432:5432
    environment:
      PGDATA: /var/lib/postgresql/data/pgdata
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      TZ: Asia/Tokyo
    volumes:
      - pgsql-data:/var/lib/postgresql/data:cached

volumes:
  pgsql-data:
  bundle-data:
  node-modules:
</code></pre>
<h4>ポイント1</h4>
<p><code>command</code>の箇所でRailsサーバーを起動する前に<code>bundle install</code>を実行しています。</p>
<p>この記載を行うことで、もしGemfileに変更があったとしても、コンテナを起動する前にgemの変更点が適用されます。</p>
<h4>ポイント2</h4>
<p><code>command</code>の箇所でRailsサーバーを起動する前に<code>yarn install</code>を実行しています。</p>
<p>この記載を行うことで、もしpackage.jsonに変更があったとしても、コンテナを起動する前にpackage.jsonの変更点が適用されます。</p>
<h4>ポイント3</h4>
<p>/usr/local/bundleをvolumeにマウントすることにより、<code>bundle install</code>で作成されたbundleデータが永続化されるようにしています。</p>
<h4>ポイント4</h4>
<p>/app/node_modulesをvolumeにマウントすることにより、<code>yarn install</code>で作成されたnode_modulesのデータが永続化されるようにしています。</p>
<h2>docker-compose buildの実行</h2>
<p>上記で記載した環境を構築するため一度<code>docker-compose build</code>を実行してください。</p>
<h2>docker compose run --rm app gem install railsの実行</h2>
<p>下記コマンドを実行すると、最新のRailsがインストールされます。</p>
<pre><code>docker compose run --rm app gem install rails
</code></pre>
<h2>docker compose run --rm app rails new . -d postgresql -j esbuildの実行</h2>
<p>このまま実行するとアプリの名前が App になるので、変えたい場合は -n アプリの名前 のオプションを追加してください。</p>
<p>また、DBにはPostgreSQLを使用しますよというオプションとビルドはesbuildを使用しますよというオプションをつけています。</p>
<pre><code>docker compose run --rm app rails new . -d postgresql -j esbuild
</code></pre>
<h2>config/database.yml、package.json、Procfile.devの編集</h2>
<p>rails関係のファイルが作り終わったら<code>config/database.yml</code>、<code>package.json</code>、<code>Procfile.dev</code>を下記のように修正します。</p>
<h3>config/database.yml</h3>
<pre><code class="language-yml">default: &amp;default
  # 省略
  username: &lt;%= ENV[&#x27;DB_USER&#x27;] %&gt;
  password: &lt;%= ENV[&#x27;DB_PASS&#x27;] %&gt;
  host: &lt;%= ENV[&#x27;DB_HOST&#x27;] %&gt;
</code></pre>
<h3>package.json</h3>
<pre><code class="language-json">,
  &quot;scripts&quot;: {
    &quot;build:js&quot;: &quot;esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds&quot;,
    &quot;build&quot;: &quot;yarn build:js&quot;
  }
</code></pre>
<h3>Procfile.json</h3>
<pre><code class="language-json">web: bin/rails server -b 0.0.0.0 -p 3000
js: yarn build:js --watch
</code></pre>
<h4>ポイント1</h4>
<p>CSSのコンパイルが必要になった時のために<code>&quot;scripts&quot;</code>で<code>&quot;build:js&quot;</code>と<code>&quot;build&quot;</code>に分けています。</p>
<p>また、Herokuなどにデプロイした時は<code>&quot;build&quot;</code>のscriptが実行されるため<code>&quot;build&quot;</code>も用意しています。</p>
<h4>ポイント2</h4>
<p>CSSのコンパイルが必要になった場合は<code>package.json</code>の<code>&quot;scripts&quot;</code>に追加しましょう。</p>
<p>そして、追加したscriptsを実行できるように<code>Procfile.dev</code>にも追記をするのを忘れずに！</p>
<p>下記が、tailwind cssを使った例になります。</p>
<h3>package.json</h3>
<pre><code class="language-json">&quot;scripts&quot;: {
  &quot;build:js&quot;: &quot;esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds&quot;,
  &quot;build:css&quot;: &quot;tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css&quot;,
  &quot;build&quot;: &quot;yarn build:js &amp;&amp; yarn build:css&quot;
}
</code></pre>
<h3>Procfile.dev</h3>
<pre><code class="language-json">web: bin/rails server -b 0.0.0.0 -p 3000
js: yarn build:js --watch
css: yarn build:css --watch
</code></pre>
<p>ここまで来れたら下記コマンドを実行して、DBを作成するためにpostgresコンテナだけを立ち上げましょう。</p>
<pre><code>docker compose up postgres -d
</code></pre>
<h2>DBの作成</h2>
<p>postgresが立ち上がったら下記コマンドを実行してDBを作成してください。</p>
<pre><code>docker compose run --rm app rails db:create
</code></pre>
<p>これでdevelopment用とtest用のDBが作成されます。</p>
<p>DBが作成されたら、下記コマンドを実行してpostgresコンテナを停止させましょう。</p>
<pre><code>docker compose stop postgres
</code></pre>
<p>postgresコンテナが停止できたら、下記コマンドを実行してRailsサーバーを起動します。</p>
<pre><code>docker compose up
</code></pre>
<p>ここまで来たら<a href="http://localhost:3000">http://localhost:3000</a>にアクセスしてみましょう。</p>
<p>Railsのアイコンが表示されたら完了です！お疲れ様でした。</p>

この記事では、Dockerを使用してRails7 + PostgreSQL + esbuildの環境構築の方法を解説しています。

DockerでRails7 + PostgreSQL + esbuildの環境を構築する方法

この記事では、Dockerを使用してRails7 + PostgreSQL + esbuildの環境構築の方法を解説しています。

## 環境
以下のような環境で利用してます。

- MacBookPro（M1）
- docker desktop

## 手順
順番としては以下になります。

1. Dockerfile.dev、docker-compose.ymlの作成
1. `docker-compose build`の実行
1. `docker compose run --rm app gem install rails`の実行
1. `docker compose run --rm app rails new . -d postgresql -j esbuild`の実行
1. `config/database.yml`、`package.json`、`Procfile.dev`の編集
1. DBの作成

## Dockerfile.dev、docker-compose.ymlの作成
まず、今回作成するフォルダの内容としては下記のようになります。
```
任意のフォルダ名（今回はmy_appとします）
├── // ここにRailsの各ディレクトリが生成されます（appなど）
├── Dockerfile.dev
└── docker-compose.yml

```

最初に下記コマンドで大元のフォルダを作成してください。

```
mkdir my_app
```

次に下記コマンドで上記で作成したフォルダに移動します。

```
cd my_app
```

次に下記コマンドでDockerfile.dev、docker-compose.ymlの作成をします。

```
touch Dockerfile.dev docker-compose.yml
```

作成できたらそれぞれのファイルに下記内容を記載してください。

### Dockerfile.dev
Rails7.1から`rails new`で新規プロジェクトを立ち上げると、`Dockerfile`が自動的に作成されるようになりました。
他の方の記事を参考にさせてもらい環境を構築しようとしていたのですが、ファイル名を`Dockerfile`のまま行っていると`rails new`したタイミングでファイルが上書きされてしまっていたので、`Dockerfile.dev`として上書きされないようにしています。

`Dockerfile.dev`には下記を記載してください。

```dockerfile
FROM node:20.12.0-alpine as node

RUN apk add --no-cache bash curl && \
    curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.22.19

FROM ruby:3.3.0-alpine

COPY --from=node /usr/local/bin/node /usr/local/bin/node
COPY --from=node /usr/local/bin/npm /usr/local/bin/npm
COPY --from=node /usr/local/bin/npx /usr/local/bin/npx
COPY --from=node /opt/yarn-* /opt/yarn
RUN ln -fs /opt/yarn/bin/yarn /usr/local/bin/yarn
RUN apk add --no-cache git build-base libxml2-dev libxslt-dev postgresql-dev postgresql-client tzdata bash vim && \
    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

ENV APP_ROOT /app
RUN mkdir $APP_ROOT
WORKDIR $APP_ROOT

ENV LANG=ja_JP.UTF-8 \
    BUNDLE_JOBS=4 \
    BUNDLE_RETRY=3 \
    EDITOR=vim
RUN gem update --system && \
    gem install --no-document bundler:2.5.7

RUN bundle config set force_ruby_platform true
```

#### ポイント1
`Dockerfile.dev`ではRailsをインストールしていません。

Railsプロジェクト内には`Gemfile`と`Gemfile.lock`があるはずで、そちらを参照して正しいバージョンのRailsをインストールするべきだからです。

#### ポイント2
`esbuild`の環境には`node`と`yarn`が必要になっており、`node`のイメージをセットアップした後に、Rubyのイメージへ必要なファイルをコピーしています。

### docker-compose.yml
docker-compose.ymlには下記を記載してください。

```yml
version: '3'
services:
  app:
    build:
      context: .
      dockerfile: "Dockerfile.dev"
    stdin_open: true
    tty: true
    ports:
      - 3000:3000
    command: /bin/sh -c "bundle install && yarn install && rm -f tmp/pids/server.pid && bin/dev"
    environment:
      DB_USER: postgres
      DB_PASS: postgres
      DB_HOST: postgres
      DB_PORT: 5432
    depends_on:
      - postgres
    volumes:
      - .:/app:delegated
      - node-modules:/app/node_modules:delegated
      - bundle-data:/usr/local/bundle:delegated

  postgres:
    image: postgres:16.2
    stdin_open: true
    tty: true
    restart: always
    ports:
      - 5432:5432
    environment:
      PGDATA: /var/lib/postgresql/data/pgdata
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      TZ: Asia/Tokyo
    volumes:
      - pgsql-data:/var/lib/postgresql/data:cached

volumes:
  pgsql-data:
  bundle-data:
  node-modules:
```

#### ポイント1
`command`の箇所でRailsサーバーを起動する前に`bundle install`を実行しています。

この記載を行うことで、もしGemfileに変更があったとしても、コンテナを起動する前にgemの変更点が適用されます。

#### ポイント2
`command`の箇所でRailsサーバーを起動する前に`yarn install`を実行しています。

この記載を行うことで、もしpackage.jsonに変更があったとしても、コンテナを起動する前にpackage.jsonの変更点が適用されます。

#### ポイント3
/usr/local/bundleをvolumeにマウントすることにより、`bundle install`で作成されたbundleデータが永続化されるようにしています。

#### ポイント4
/app/node_modulesをvolumeにマウントすることにより、`yarn install`で作成されたnode_modulesのデータが永続化されるようにしています。

## docker-compose buildの実行
上記で記載した環境を構築するため一度`docker-compose build`を実行してください。

## docker compose run --rm app gem install railsの実行
下記コマンドを実行すると、最新のRailsがインストールされます。

```
docker compose run --rm app gem install rails
```

## docker compose run --rm app rails new . -d postgresql -j esbuildの実行
このまま実行するとアプリの名前が App になるので、変えたい場合は -n アプリの名前 のオプションを追加してください。

また、DBにはPostgreSQLを使用しますよというオプションとビルドはesbuildを使用しますよというオプションをつけています。

```
docker compose run --rm app rails new . -d postgresql -j esbuild
```


## config/database.yml、package.json、Procfile.devの編集
rails関係のファイルが作り終わったら`config/database.yml`、`package.json`、`Procfile.dev`を下記のように修正します。

### config/database.yml

```yml
default: &default
  # 省略
  username: <%= ENV['DB_USER'] %>
  password: <%= ENV['DB_PASS'] %>
  host: <%= ENV['DB_HOST'] %>
```

### package.json
```json
,
  "scripts": {
    "build:js": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build": "yarn build:js"
  }
```

### Procfile.json
```json
web: bin/rails server -b 0.0.0.0 -p 3000
js: yarn build:js --watch
```

#### ポイント1
CSSのコンパイルが必要になった時のために`"scripts"`で`"build:js"`と`"build"`に分けています。

また、Herokuなどにデプロイした時は`"build"`のscriptが実行されるため`"build"`も用意しています。

#### ポイント2
CSSのコンパイルが必要になった場合は`package.json`の`"scripts"`に追加しましょう。

そして、追加したscriptsを実行できるように`Procfile.dev`にも追記をするのを忘れずに！

下記が、tailwind cssを使った例になります。

### package.json
```json
"scripts": {
  "build:js": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
  "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",
  "build": "yarn build:js && yarn build:css"
}
```

### Procfile.dev
```json
web: bin/rails server -b 0.0.0.0 -p 3000
js: yarn build:js --watch
css: yarn build:css --watch
```

ここまで来れたら下記コマンドを実行して、DBを作成するためにpostgresコンテナだけを立ち上げましょう。

```
docker compose up postgres -d
```

## DBの作成
postgresが立ち上がったら下記コマンドを実行してDBを作成してください。

```
docker compose run --rm app rails db:create
```

これでdevelopment用とtest用のDBが作成されます。

DBが作成されたら、下記コマンドを実行してpostgresコンテナを停止させましょう。

```
docker compose stop postgres
```

postgresコンテナが停止できたら、下記コマンドを実行してRailsサーバーを起動します。

```
docker compose up
```


ここまで来たら[http://localhost:3000](http://localhost:3000)にアクセスしてみましょう。

Railsのアイコンが表示されたら完了です！お疲れ様でした。


railsでgemのchartjs-rorを利用してchart.jsでグラフを表示させるときに、jsではなくrubyでtooltipの単位を定義する方法のお話です。

railsでjsではなくrubyでtooltipの単位を設定するときの話

Railsのクラスメソッドとインスタンスメソッドについて調べた際のまとめです。それぞれの違いから使い方まで幅広くまとめています。

Railsにおけるクラスメソッドとインスタンスメソッドの違いについて

Dockerで建てたRuby on rails v7環境で「undefined method `devise' for 〜」が発生した際の解決方法の備忘録です。

Dockerで建てたrails7環境で「undefined method `devise' for 〜」が発生した話

RailsのルーティングとRESTfulルートについて解説している記事です。ユースケース等詳しくまとめています。

Ruby on RailsのルーティングとRESTfulルート

Ruby on Railsにおけるresourceとresourcesの違いについて解説している記事です。ユースケース等詳しくまとめています。

CATEGORY

DockerでRails7 + PostgreSQL + esbuildの環境を構築する方法

実装やエラーが解決できない場合

OTHER ARTICLES

railsでjsではなくrubyでtooltipの単位を設定するときの話

Railsにおけるクラスメソッドとインスタンスメソッドの違いについて