【初学者】環境構築備忘録【Docker + Ruby 3.2.2 + Rails 7.0.8 + TypeScript 5.3.3 + React 18.2.0 + Node.js 21.5.0 + TailwindCSS + daisyUI + PostgreSQL】

# はじめに

お疲れさまです！
おおくまです！

今回は、**Docker + Ruby 3.2.2 + Rails 7.0.8 + React 18.2.0 + Node.js 21.5.0 + TailwindCSS + daisyUI + PostgreSQL**で環境構築してみました！

個人的に苦戦したので、備忘録として残したいと思います！

# 注意点

:::note warn
内容に誤りがある場合があります！
コメント等で教えていただけると幸甚です！
:::

# 環境

:::note
- Docker
- Ruby3.2.2
- Rails7.0.8
- React18.2.0
- Node.js21.5.0
- TailwindCSS
- daisyUI
- PostgreSQL
:::

# 手順

まずは作業フォルダやファイルを作っていきます！

```:ターミナル
mkdir test_app

cd test_app

mkdir back front

touch back/Dockerfile back/Gemfile back/Gemfile.lock back/entrypoint.sh

touch front/Dockerfile

touch compose.yaml
```

<br>

次に、Dockerでアプリを立ち上げるためにファイルにコードを書いていきます！

```yaml:compose.yaml
services:
  db:
    image: postgres
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    volumes:
      - db:/var/lib/postgresql/data
    ports:
      - '3306:3306'
  back:
    build:
      context: ./back/
      dockerfile: Dockerfile
    stdin_open: true
    tty: true
    volumes:
      - ./back:/test_app
      - bundle:/usr/local/bundle
    command: bash -c "rm -rf tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    depends_on:
      - db
    ports:
      - "3001:3000"
    environment:
      TZ: Asia/Tokyo
  front:
    build:
      context: ./front/
      dockerfile: Dockerfile
    volumes:
      - ./front:/usr/src/app
    command: sh -c "cd app && npm install && npm start"
    ports:
      - "3000:3000"
volumes:
  db:
    driver: local
  bundle:
    driver: local
```

<br>

```dockerfile:back/Dockerfile
FROM ruby:3.2.2

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs

WORKDIR /test_app

COPY Gemfile /test_app/Gemfile

COPY Gemfile.lock /test_app/Gemfile.lock

RUN bundle install

COPY . /test_app

COPY entrypoint.sh /usr/bin/

RUN chmod +x /usr/bin/entrypoint.sh

ENTRYPOINT ["entrypoint.sh"]

EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]
```

<br>

```:back/Gemfile
source 'https://rubygems.org'
gem 'rails', '7.0.8'
```

<br>

```:back/Gemfile.lock
何も書かない
```

<br>

```sh:back/entrypoint.sh
#!/bin/bash

set -e

rm -f /sample/tmp/pids/server.pid

exec "$@"
```

<br>

それでは、RailsをAPIモードで立ち上げます！

```:ターミナル
docker-compose run --no-deps back rails new . --force -d postgresql --api --skip-test
```

<br>

次に、データベース周りのコードを修正します！

```yml:back/config/database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: user
  password: password
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: test_app_development

test:
  <<: *default
  database: test_app_test

production:
  <<: *default
  url: <%= ENV['DATABASE_URL'] %>
```

<br>

次に、フロント側のファイルにコードを書いていきます！

```dockerfile:front/Dockerfile
FROM node:21.5.0-alpine

WORKDIR /usr/src/app

ENV CI=true
```

<br>

ここで1度、Dockerでアプリを立ち上げ、データベースも作成します！

```:ターミナル
docker-compose up -d --build

docker compose exec back rails db:prepare
```

<br>

次に、Reactアプリを立ち上げます！
そして、TailwindCSSとdaisyUIをインストールします！

```:ターミナル
docker-compose run --rm front sh -c "npx create-react-app app --template typescript"

docker-compose up -d --build

docker compose exec front sh

/usr/src/app # cd app

/usr/src/app/app # npm install -D tailwindcss postcss autoprefixer

/usr/src/app/app # npx tailwindcss init -p

/usr/src/app/app # npm i -D daisyui@latest

/usr/src/app/app # exit
```

<br>

TailwindCSSとdaisyUIを使えるようにコードを書いていきます！

```diff_javascript:front/app/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
+   "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
+ plugins: [require("daisyui")],
}
```

<br>

```diff_css:front/app/src/index.css
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
```

<br>

```diff_tsx:front/app/src/App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
+       <p className='btn text-5xl underline'>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

<br>

Dockerでアプリを立ち上げ直します！

```:ターミナル
docker-compose down

docker-compose up -d --build
```

# 動作確認

http://localhost:3000 にアクセスし、下記のように表示されていれば、フロントの設定はOKです！

<img width=800 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348444/5e6443fb-f6d5-502e-92b1-276d95e5ecf5.jpeg">

<br>

<br>

http://localhost:3001 にアクセスし、下記のように表示されていれば、バックの設定はOKです！

<img width=800 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348444/d4dccc35-a830-39d6-6afc-fc43cb58a07c.jpeg">

# さいごに

本記事が何かのお役に立てれば幸甚です！
最後まで読んでいただきありがとうございました！