はじめに
勉強用にちいさなアプリを作成することがありますが、環境構築がめんどくさくて止めちゃうことありますよね？
環境構築で詰まらないように記録しておきます。
Rails の環境構築の記事はたくさんありますが、できるだけ最新のバージョンでやってみました。
Rails 7.0.4
Ruby 3.1
Mysql 8.0
参考
プロジェクトの作成
mkdir test-app
cd test-app
設定ファイルの作成
FROM ruby:3.1
RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp
# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000
# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]
Rails7 では yarn や node.js のインストールは不要です。
source 'https://rubygems.org'
gem 'rails', '~>7.0.4'
touch Gemfile.lock
#!/bin/bash
set -e
# Remove a potentially pre-existing server.pid for Rails.
rm -f /myapp/tmp/pids/server.pid
# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"
version: '3'
services:
db:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: root
ports:
- "3306:3306"
volumes:
- ./tmp/db:/var/lib/mysql
web:
build: .
command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
volumes:
- .:/myapp
ports:
- "3000:3000"
depends_on:
- db
rails new する
docker-compose run web rails new . --force --no-deps --database=mysql --css=tailwind --skip-jbuilder --skip-action-mailbox --skip-action-mailer --skip-test
rails new のオプションは以下となっています。（後からでも変更して導入できます）
--css=tailwind CSSフレームワークにTailwindを利用
--skip-jbuilder jbuilderを導入しないオプション
--skip-action-mailbox action-mailboxを導入しないオプション
--skip-action-mailer action-mailerを導入しないオプション
--skip-test testを導入しないオプション
--database=mysql DB設定をMySQLにするオプション
docker-compose build --no-cache
DB設定
development:
<<: *default
database: myapp_development
host: db
username: root
password: password
# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
<<: *default
database: myapp_test
host: db
username: root
password: password
developmentとtestを編集します。
DB作成
docker-compose run --rm web rails db:create
イメージの起動
docker-compose up -d
http://localhost:3000 で動作確認
Tailwind の導入
config 配下に tailwind.config.js があるか確認
なかったら↓のコマンドでインストール
docker-compose run --rm web bin/rails tailwindcss:install
ビルドし直す
docker-compose build --no-cache
TailwindCSSのUIフレームワークを導入
TailwindCSSのUIフレームワークを導入
# daisyuiをインストールする
$ yarn add daisyui
OR
$ npm i daisyui
daisyUIを使用するよう設定
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
:
:
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('daisyui'), // ← 追加
],
}
↑からテーマを選ぶ
<html data-theme="pastel" > # data-theme="pastel" でテーマを選ぶ
<head>
:
</head>
<body>
:
</body>
</html>
投稿機能を作成して確認
$ rails g scaffold Post title:text
$ rails db:migrate
http://localhost:3000/posts/
にアクセス
↓tailwind が有効化されている
下記を追加してみる
<button class="btn btn-primary">Button</button>
daisyUI が適用されていれば以下のようになる
もしデザインが適用されないようなら、以下を追記
<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/daisyui@2.14.1/dist/full.css" %>
dokcker-compose build --no-cache
それでもダメなら↑をしてコンテナを立て直すこともやってみる