Docker로 Rails5 + npm 환경 구축에서 React + MaterialUi 샘플 코드를 작성하는 곳까지

(2017.01.18 추가) Dockerfile.development가 수정되었습니다. 로컬 모드로 설치한 npm 패키지를 shell에서 실행할 수 있도록 경로를 추가했습니다.

소개

요 전날 아래에서 docker에 Rails5 개발 환경을 구축했습니다.
10단계로 Mac OS X에 Rails5 Docker 개발 환경 구축

이번에는 위 개발 환경에 npm(nodejs)을 설치하여 rails에서 browserify-rails 경유로 npm을 이용할 수 있도록 합니다.

그런 다음 npm을 통해 설치한 Reactjs와 Reactjs 기반의 머티리얼 디자인 프레임워크 material-ui를 Rails에서 이용하는 곳까지 해보려고 합니다.

머티리얼 디자인이란~ 기본 개념과 실무로 사용할 수 있는 무료 프레임워크 6선
material-ui

npm 환경 구축

여기에서는 먼저 다음 기사에서 소개한 절차를 완료했다고 가정합니다.
10단계로 Mac OS X에 Rails5 Docker 개발 환경 구축

1.Dockerfile

웹 컨테이너의 Dockerfile을 다음과 같이 수정하고 nodejs, npm을 설치합니다.

수정점 1(9행부터 17행째): nvm 경유로 nodejs를 인스톨 합니다. apt-get을 사용하면 지정된 버전의 nodejs를 설치할 수 없으므로 이렇게합니다. npm은 nodejs를 설치할 때 자동으로 설치됩니다.

수정 2(31행에서 32행): npm install을 실행합니다. 26행에 ADD 하고 있는 이유는,pakcage.json 의 변경이 없는 경우에는 실행 생략할 수 있도록(듯이) 하기 (위해)때문에입니다.

수정점 3 (2017.01.18추가)(23-24행째) 로컬 모드로 인스톨 한 npm 패키지를 shell로부터 실행할 수 있도록(듯이), 패스를 추가했습니다.

Dockerfile.development

FROM ruby:2.3.1
# Replace shell with bash so we can source files
#RUN rm /bin/sh && ln -sf /bin/bash /bin/sh

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

ENV NVM_DIR /usr/local/nvm
ENV NODE_VERSION 7.2.0

# Install nvm with node and npm
RUN curl https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash \
    && . $NVM_DIR/nvm.sh \
    && nvm install $NODE_VERSION \
    && nvm alias default $NODE_VERSION \
    && nvm use default

ENV NODE_PATH $NVM_DIR/v$NODE_VERSION/lib/node_modules
ENV PATH      $NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH
# ARG命令でdocker-compose.ymlから渡されたAPP_HOMEという引数を参照できるようにします
ARG APP_HOME

ENV PATH      $APP_HOME/node_modules:$PATH
ENV PATH      $APP_HOME/node_modules/.bin:$PATH

RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

ADD Gemfile $APP_HOME/
ADD Gemfile.lock $APP_HOME/
RUN bundle install -j4
ADD package.json $APP_HOME/
RUN npm install
ADD . $APP_HOME

2.package.json 추가

package.json을 project 루트에 추가하고 필요한 패키지를 설치합니다.
reactjs 용 material-ui 패키지도 설치합니다.

$ docker-compose run --rm web init npm
$ docker-compose run --rm web  npm install --save-dev browserify
$ docker-compose run --rm web  npm install --save-dev babelify
$ docker-compose run --rm web  npm install --save-dev browserify-incremental
$ docker-compose run --rm web  npm install --save-dev react
$ docker-compose run --rm web  npm install --save-dev react-dom
$ docker-compose run --rm web  npm install --save-dev react-tap-event-plugin
$ docker-compose run --rm web  npm install --save-dev material-ui

3.Gemfile에 browserify-rails 추가

Gemfile

gem "browserify-rails"

bundle install 실행

$ docker-compose run --rm web  bundle install

browserify_rails 설정을 추가합니다.

config/application.rb

    config.browserify_rails.commandline_options = "-t babelify"
    config.less.paths << "#{Rails.root}/node_modules/material-ui/src/less/"
    config.browserify_rails.use_browserifyinc = true

4. 우선 여기서 일단 빌드

여기서 먼저 빌드하고 이미지 작성 후 컨테이너를 실행해 보겠습니다.
localhost : 3000에 연결하여 지금까지 표시되면 OK

$ docker-compose build
$ docker-compose up

Reactjs + material-ui 샘플 코드

react 부분에 대해서는 gem의 react-rails 를 사용하는 기사가 많습니다만, material-ui와 잘 연결할 수 없었던 것과 프런트의 패키지는 npm로 관리하려고 하는 것으로, 이번은 사용하지 않습니다.
샘플 코드로서는, 이하와 같이 RaisedButton 를 표시하는 것을 만듭니다! ! ! !

컴포넌트 생성

assets/javascripts/components/feelings.js

import React from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import RaisedButton from 'material-ui/RaisedButton';
import {pinkA100} from 'material-ui/styles/colors';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const style = {
  margin: 12,
};
class Feeling extends React.Component {
  constructor(props) {
    super(props)
  }
  render () {
    return (
        <RaisedButton key={this.props.id} style={style} secondary={true} label={this.props.name} />
    )
  }
}
export default class Feelings extends React.Component {
  constructor(props) {
    super(props)
    this.state = {feelings: [{id: 1, name: '喜'}, {id: 2, name: '怒'}, {id: 3, name: '哀'}, {id: 4, name: '楽'}]}
  }
  render () {
    return (
      <MuiThemeProvider muiTheme={getMuiTheme()}>
      <div className='messages'>
        {this.state.feelings.map(function (feeling, i) {
           return <Feeling key={i} id={feeling.id} name={feeling.name}/>
        })}
      </div>
      </MuiThemeProvider>
    )
  }
}

assets/javascripts/components.js

import React from 'react';
import ReactDOM from 'react-dom';
import Feelings from './components/feelings';
import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for React Developer Tools
window.React = React;

injectTapEventPlugin();
ReactDOM.render(<Feelings />, document.getElementById('feelings'));

다음과 같이 컴포넌트 생성은 HTML이 모두 로드된 후에 수행되어야 합니다.
(gem의 react_rails를 이용하면 이 근처는 좋게 할 수 있습니다만....)

assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
$(function(){
  // DOM がロードされてから
  require('./components');
});

top_controller 만들기

$ docker-compose run --rm web bundle exec rails g controller top

라우팅을 설정합니다.

config/routes.rb

Rails.application.routes.draw do
  root to: 'top#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

$ docker-compose build
$ docker-compose up

할 수 있었습니다! !


material-ui의 사용법은 수시로 정리해 갑니다.