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


初めまして。

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

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

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

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

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


- [RailsTutorial](https://railstutorial.jp/)を完走し、簡易的なアプリ開発経験があるレベル。
- [React](https://ja.reactjs.org/tutorial/tutorial.html)Tutorial
- [Docker](https://hub.docker.com/?overlay=onboarding)インストール


#追記(注意事項)
記事を書き終わった後に、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](https://www.weblio.jp/content/%E3%83%9B%E3%82%B9%E3%83%88OS)の上でもう一つのOS(ゲストOS)を起動すること。(VirtualBoxとか)**
virtual boxとかを使ったことがある人はわかると思うが、仮想化させたいOSイメージを指定した後、設定で仮想化したOSが使用するハードディスクやメモリの分割を行う。<-結果的にゲストOSとホストOSが同時にメモリを占有するので処理が重たい

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


###Dockerの基本コマンド
とりあえず目を通して、どんな動作を行うコマンドがあるかみてください。
[初心者用Docker基本コマンド一覧(新旧スタイル対応)](https://qiita.com/FukuharaYohei/items/ef5cf790b5269e73cdb3)
[DockerComposeの基本](https://qiita.com/tfrcm/items/970f6b22e11145478ab1)

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

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

Dockerfileはこの記事が非常にわかりやすいです。
[Docker初心者がRails + PostgreSQL or MySQLで仮想環境構築した手順を丁寧にまとめる](https://qiita.com/hogehoge1234/items/28be70b674e24427491e#dockerfile)

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

yarnインストール参考[docker for macでrails × yarn × webpackerのfront環境を整える](https://qiita.com/Dragon-taro/items/9bb3768f265fc627a846)

```dockerfile: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の書き方について解説してみた](https://qiita.com/yuta-ushijima/items/d3d98177e1b28f736f04#docker-composeyml%E3%81%A8%E3%81%AF)

|docker-compose|解説|
|:-:|:-:|
|version|docker-composeの文法はバージョンごとにことなるので指定が必要|
|servise|動かすアプリケーションの指定。ここでは、webとdb。|
|他|[Service設定する際の項目について](https://qiita.com/yuta-ushijima/items/d3d98177e1b28f736f04#docker-composeyml%E3%81%A8%E3%81%AF)|

```dockerfile: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作成
```
[ここ](http://0.0.0.0:3000/)にアクセス
みなさんは成功したでしょうか？？....

#Reactを導入

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

コントローラーを作ろう

```
$ rails g controller StaticPages home about contact
```

ルートの設定

```ruby: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 //コンテナ起動
```
こうなったら成功です！おつかれさまでした！
<img width="456" alt="スクリーンショット 2019-11-30 13.58.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396885/481f1f30-78f9-148c-aab2-d0abe0ed043e.png">





#参考
[Rails で postgresql を使う(インストールからマイグレーションまで)](https://qiita.com/longtime1116/items/9045717ff8607bed07fe)

[Docker初心者がRails + PostgreSQL or MySQLで仮想環境構築した手順を丁寧にまとめる](https://qiita.com/hogehoge1234/items/28be70b674e24427491e)
[既存のRailsアプリにReactを導入する方法](https://qiita.com/anx/items/a6039f9ccf2bd835194d)