Go to Qiita Advent Calendar 2024 Top
LoginSignup
25
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

DMM WEBCAMPAdvent Calendar 2019

Day 8
@izszzz

Docker/Rails/ReactをつかってHelloWorld!

Last updated at Posted at 2019-12-07

初めまして。

プログラミングを始めてからあと四ヶ月で一年が経とうとしている。

本当に時間が立つのは早い...

今回は、RailsとReactを使って、HelloWorldをしてみる。

Railsを主にバックエンド、Reactをフロント、データベースはPostgresSQLを使用する。

1.Dockerで環境構築
2.RailsとReactの導入

  • RailsTutorialを完走し、簡易的なアプリ開発経験があるレベル。
  • ReactTutorial
  • Dockerインストール

#追記(注意事項)
記事を書き終わった後に、RailsへのReact導入の方法がこれがベストではない感じがしてきました。

https://qiita.com/ry_2718/items/9b824a3f9ca750ce403e

rails new . --skip-coffee --skip-turbolinks --skip-sprockets --webpack=vue

rails 5.1からはこれでAssetpiplineの代わりにwebpackを導入することができるみたい。
情報収拾の仕方を改めて考えさせられました。最近になってからは公式リファレンスや、検索機能に1ヶ月以内などを指定して、英語の記事でもGoogle翻訳を駆使しながら頑張って読んでいる...。

#Dockerで環境構築をする
##Dockerとは？なぜDockerか。 (読まなくていい)(間違ってたらすいません)
###そもそもOSとは

http://www.toha-search.com/it/os.htm

OSとはOperation System（オペレーティング・システム）の略で、アプリやデバイスを動作させるための基本となるソフトウェアのことです。 具体的には、キーボードやマウス・タッチパッドなどのデバイスから入力した情報をアプリケーションに伝え、またソフトウェアとハードウェアの連携を司る中枢的な役割を果たします。

つまり、OSはハードウェアや入力デバイス出力デバイス、アプリケーションなどを容易に操作するためのもの。

それで、このOSの上でどんな感じで仮想環境を作るかで違いがでる。

https://udemy.benesse.co.jp/development/web/docker.html

ハードウェアを仮想化し、複数のサーバを構築できる仕組みは変わりません。ただ、コンテナは1つのOSを共有して利用しているのに対し、仮想マシンはサーバごとにOSをインストールし動かしていきます。

つまり、

  • 仮想マシンはホストOSの上でもう一つのOS(ゲストOS)を起動すること。(VirtualBoxとか)
    virtual boxとかを使ったことがある人はわかると思うが、仮想化させたいOSイメージを指定した後、設定で仮想化したOSが使用するハードディスクやメモリの分割を行う。<-結果的にゲストOSとホストOSが同時にメモリを占有するので処理が重たい

  • コンテナは仮想化をホストOSの上で行う(Dockerとか)
    コンテナでは、ホストOSの上で直接仮想化する（ゲストOSを建てない）ので非常に動作が軽い。Docker上であれば基本的に環境の差異による影響を受けない
    また、DockerにはDockerHubというのがあり、そこからすでに環境が構築されたテンプレートや、MySQLやRubyなどのツールや言語をDocker上にイメージとしてインストールしてくれる。

###Dockerの基本コマンド
とりあえず目を通して、どんな動作を行うコマンドがあるかみてください。
初心者用Docker基本コマンド一覧(新旧スタイル対応)
DockerComposeの基本

##Dockefileとdocker-compose.ymlの設定
まずはDockerで環境構築

$ mkdir myblog
$ cd myblog
$ touch {Dockerfile,docker-compose.yml}

Dockerfileはこの記事が非常にわかりやすいです。
Docker初心者がRails + PostgreSQL or MySQLで仮想環境構築した手順を丁寧にまとめる

Dockerfile 解説
FROM dockerhubからイメージをダウンロード
WORKDIR 作業ディレクトリの指定
RUN コマンドの実行
COPY 引数1を引数２にコピー

yarnインストール参考docker for macでrails × yarn × webpackerのfront環境を整える

myblog/Dockerfile
FROM ruby:2.5.5
RUN apt-get update && apt-get install -y build-essential nodejs　libpq-dev 

#yarnインストール webpackで必要になります。
RUN 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 mkdir /rails
WORKDIR /rails
COPY Gemfile /rails/Gemfile
COPY Gemfile.lock /rails/Gemfile.lock
RUN bundle install
COPY . /rails

docker-composeはこの記事が非常にわかりやすいです
docker-compose.ymlの書き方について解説してみた

docker-compose 解説
version docker-composeの文法はバージョンごとにことなるので指定が必要
servise 動かすアプリケーションの指定。ここでは、webとdb。
他 Service設定する際の項目について
docker-compose.yml
version: '3' 
services:　

  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/rails
    ports:
      - "3000:3000" #ポート3000番を開けてコンテナの3000番に転送
    depends_on:
      - db

  db:
    image: postgres
    volumes:
      - datavol:/var/lib/postgresql/data
            
volumes:
  datavol:

#Railsアプリを作る。
以下のコマンドを入力

$ touch {Gemfile,Gemfile.lock}

$ echo "source 'https://rubygems.org' 
gem 'rails','5.1.4'
gem 'pg', '~> 0.20.0'" > Gemfile

$ docker-compose run web bundle exec rails new . --force --database=postgresql

$ docker-compose build

ここまででRailsサーバーを立ち上げる準備が整っているはずなので立ち上げてみる。

$ docker-compose up -d //サーバー起動
$ docker-compose run web rake db:create //db作成

ここにアクセス
みなさんは成功したでしょうか？？....

#Reactを導入

とりあえずRailsの初期画面から変更を行う。

コントローラーを作ろう

$ rails g controller StaticPages home about contact

ルートの設定

routes.rb
Rails.application.routes.draw do
  root 'static_pages#home'
  get '/about', to: 'static_pages#about'
  get '/contact', to: 'static_pages#contact'
end

これでReactでviewに変更を加える準備ができました。

gem追加

$ echo "gem 'webpacker'
gem 'react-rails'">>Gemfile

$ docker-compose run web bundle update

webpack設定

$ docker-compose run web rails webpacker:install 
$ docker-compose run web rails webpacker:install:react

ここまでくると、app/assets/javascriptというファイルが作成される。
この中のファイルがreactファイルになっている。

試しにrailsのviewに呼び出したいころではあるが、railsサーバーを再起動しないと反映されないのでrailsコンテナを再起動。

$ docker ps //稼働中のコンテナの表示
0739cbd77243        170064292a20        "bundle exec rails s…"   12 hours ago        Up 12 hours         0.0.0.0:3000->3000/tcp   myblog_web_1
0d302bae2084        postgres            "docker-entrypoint.s…"   13 hours ago        Up 13 hours         5432/tcp                 myblog_db_1

上の場合だと

0739cbd77243 これがrailsコンテナのIDになるので、このIDを指定してコンテナの再起動をする

$ docker restart 0739cbd77243 //コンテナ起動

こうなったら成功です！おつかれさまでした！
スクリーンショット 2019-11-30 13.58.04.png

#参考
Rails で postgresql を使う(インストールからマイグレーションまで)

Docker初心者がRails + PostgreSQL or MySQLで仮想環境構築した手順を丁寧にまとめる
既存のRailsアプリにReactを導入する方法

25
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
25
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?