##railsの環境構築
Docker3
Rails6.0.3
Ruby2.7.0
DB:PostgeSQL
こちらの環境で作成していきます。
##1.dockerを立ち上げる
@shungo_m様の「DockerでRails6の環境構築を行う方法」を参考にしました。
docker立ち上げに必要なファイルの作成
$ mkdir myapp
$ cd myapp
$ touch Dockerfile
$ touch docker-compose.yml
$ touch entrypoint.sh
$ touch Gemfile
$ touch Gemfile.lock
FROM ruby:2.7.0
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
apt-get update && apt-get install -y yarn
RUN curl -sL https://deb.nodesource.com/setup_7.x | bash - && \
apt-get install nodejs
RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp
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"]
version: '3'
services:
db:
image: postgres
volumes:
- ./tmp/db:/var/lib/postgresql/data
environment:
POSTGRES_HOST_AUTH_METHOD: 'trust'
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
#!/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 "$@"
source 'https://rubygems.org'
gem 'rails', '~>6'
必要なファイルの作成が出来たので、rails new
でプロジェクトの作成。
$ docker-compose run web rails new . --force --no-deps --database=postgresql --skip-bundle
そのままdocker build、upと進めるとwebpackerをインストールしてねと言われるので、インストールをする。
$ docker-compose run web bundle exec rails webpacker:install
その後はDBの設定をして、docker環境が完成。
##2.Materiarizeの導入
こちらのサイトを参考にしました。https://monaga.site/use-materialize-in-rails6/
$ docker-compose run web yarn add materialize-css
app/javascript/packs
にapplication_style.js
というファイルを作成・記述します。
import "../stylesheets/application.scss";;
app/javascript/stylesheets
ディレクトリの中に application.scss
ファイルを作成・記述します。。
@import "materialize-css/dist/css/materialize.min.css";
最後にjavascriptの読み込みに必要なコードを app/javascript/packs/application.js
に追記します。
import "materialize-css/dist/js/materialize.min.js";
M.AutoInit();
これで環境構築完了です。
materializeの公式ページにはサンプルが多くあるので、参考にしてください。
https://materializecss.com/
####参考
https://materializecss.com/
https://monaga.site/use-materialize-in-rails6/
https://qiita.com/shungo_m/items/fd1ab99fbe76d39e456c