自分のアウトプット用のメモです。
Docker 上に Rails プロジェクトを作成する(MySQLは5.7)
$ mkdir -p ~/project/myapp
$ cd ~/project/myapp
$ mkdir -p containers/nginx
$ mkdir environments
Gemfile作成
$ cd ~/project/myapp
$ touch Gemfile.lock
$ vim Gemfile
# Gemfile
source "https://rubygems.org"
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
gem "rails"
Dockerfile作成
$ vim Dockerfile
FROM ruby:2.7.2
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
&& apt-get update \
&& echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update -qq && apt-get install -y build-essential \
libpq-dev \
nodejs \
yarn
RUN mkdir /myapp
ENV APP_ROOT /myapp
WORKDIR $APP_ROOT
ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock
RUN bundle install
ADD . $APP_ROOT
docker-composeファイル作成
$ cd ~/project/myapp
$ vim docker-compose.yml
version: "3"
services:
db:
image: mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: demo-db
ports:
- "3306:3306"
volumes:
- demo-db:/var/lib/mysql
web:
build: .
command: rails s -p 3001 -b '0.0.0.0'
volumes:
- .:/myapp
ports:
- "3001:3001"
links:
- db
volumes:
demo-db:
docker-compose run コマンドで Rails プロジェクトの作成。
$ cd ~/project/myapp
$ docker-compose run web rails new . --force --no-deps --database=mysql
Rails プロジェクトを作成できたら、build する。
$ docker-compose build
データベースの作成
config/database.yml を編集する。
$ vim config/database.yml
## 編集した箇所のみ抜粋
default: &default
password: password # docker-compose.yml の MYSQL_ROOT_PASSWORD: で設定したパスワード
host: db # localhost → db に変更
データベースを作成する。
$ docker-compose run web rake db:create
Docker の起動
$ docker-compose up
http://0.0.0.0:3001 にアクセスすると、Rails の初期画面が表示される。
この時 shell に以下のようなエラーが出るときは、
Cannot render console from 172.20.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1
config/environments/development.rb に
Rails.application.configure do
config.web_console.permissions = '0.0.0.0/0'
end
を追加すればエラーログが消える。
React の導入
react-rail を使って react を rails プロジェクトに導入する。
gem 'react-rails'
再度 build を実行する。
$ docker-compose run web rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install
$ docker-compose run web rails webpacker:install:react # OR (on rails version < 5.0) rake webpacker:install:react
$ docker-compose run web rails generate react:install
実際に React が導入されているか確認する。
controller の作成。
$ docker-compose run web rails g controller sample index
以下のファイルが作成されていれば OK。
class SampleController < ApplicationController
def index
end
end
react コンポーネントファイルの作成。
$ docker-compose run web rails g react:component Sample
app/javascript/components/Sample.tsx が作成されるので、以下のように修正する。
import React from "react";
const Sample = () => {
return <>this is react sample.</>;
};
export default Sample;
view の作成。
app/views/sample/index.html.erb を作成し react コンポーネントを読み込む。
<%= react_component 'Sample' %>
ルーティングを追加する。
Rails.application.routes.draw do
get "sample", to: "sample#index"
end
Docker を起動し、http://0.0.0.0:3001/sample にアクセスする。「this is react sample.」の文字が表示されていれば OK。
TypeScript の導入
React が導入できたので、以下コマンドで TypeScript 導入する。
$ docker-compose run web bundle exec rails webpacker:install:typescript
$ docker-compose run web yarn add @types/react @types/react-dom
無事インスールが終えたら sample.jsx の拡張子を sample.tsx に修正する。
import React from "react";
const Sample: React.FC = () => {
return <>this is typescript sample.</>;
};
export default Sample;
ここまで修正したら再度 http://0.0.0.0:3001/sample にアクセスし、「this is typescript sample.」の文字が表示されていることを確認する。
JS の修正時にホットリロードさせる
Docker の場合は $ bin/webpack-dev-server のコマンドを直接叩くとエラーがでるっぽいので docker-compose.yml を修正した。
version: "3"
services:
db:
image: mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: rails-front-demo-db
ports:
- "3306:3306"
volumes:
- rails-db:/var/lib/mysql
web: &web
build: .
command: rails s -p 3001 -b '0.0.0.0'
environment:
WEBPACKER_DEV_SERVER_HOST: webpacker
volumes:
- .:/app_name
ports:
- "3001:3001"
links:
- db
webpacker:
<<: *web
command: bundle exec bin/webpack-dev-server
depends_on: []
environment:
WEBPACKER_DEV_SERVER_HMR: "true"
WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
ports:
- "3035:3035"
volumes:
rails-db:
webpacker の service を追加。それに伴い web の service も修正。
$ docker-compose up で Docker を起動し、http://0.0.0.0:3001/sample にアクセスする。app/javascript/components/Sample.tsx のファイルを適当に書き換えて保存するとホットリロードすることがわかる。
以上です!
こちらの方の記事をほとんどそのまま移させていただきました!
大変わかりやすかったです!!ありがとうございますm(_ _)m