はじめに
お疲れさまです！
おおくまです！
今回は、Docker + Ruby 3.2.2 + Rails 7.0.8 + React 18.2.0 + Node.js 21.5.0 + TailwindCSS + daisyUI + PostgreSQLで環境構築してみました！
個人的に苦戦したので、備忘録として残したいと思います！
注意点
内容に誤りがある場合があります！
コメント等で教えていただけると幸甚です！
環境
- 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
次に、Dockerでアプリを立ち上げるためにファイルにコードを書いていきます！
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
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"]
back/Gemfile
source 'https://rubygems.org'
gem 'rails', '7.0.8'
back/Gemfile.lock
何も書かない
back/entrypoint.sh
#!/bin/bash
set -e
rm -f /sample/tmp/pids/server.pid
exec "$@"
それでは、RailsをAPIモードで立ち上げます！
ターミナル
docker-compose run --no-deps back rails new . --force -d postgresql --api --skip-test
次に、データベース周りのコードを修正します！
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'] %>
次に、フロント側のファイルにコードを書いていきます！
front/Dockerfile
FROM node:21.5.0-alpine
WORKDIR /usr/src/app
ENV CI=true
ここで1度、Dockerでアプリを立ち上げ、データベースも作成します！
ターミナル
docker-compose up -d --build
docker compose exec back rails db:prepare
次に、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
TailwindCSSとdaisyUIを使えるようにコードを書いていきます！
front/app/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
+ "./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
+ plugins: [require("daisyui")],
}
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;
}
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;
Dockerでアプリを立ち上げ直します！
ターミナル
docker-compose down
docker-compose up -d --build
動作確認
http://localhost:3000 にアクセスし、下記のように表示されていれば、フロントの設定はOKです！
http://localhost:3001 にアクセスし、下記のように表示されていれば、バックの設定はOKです！
さいごに
本記事が何かのお役に立てれば幸甚です！
最後まで読んでいただきありがとうございました！