Rails + docker-compose + AdminLTE 환경 구축

Rails + docker-compose + AdminLTE 환경을 만듭니다.
이번에는 yarn에서 AdminLTE를 설치합니다.

다양한 버전


  • Rails 5.1.4
  • ruby ​​2.5.0p0 (2017-12-25 revision 61468) [x86_64-linux]
  • Docker version 17.12.0-ce, build c97c6d6
  • docker-compose version 1.18.0, build 8dd22a9

  • 절차



    Dockerfile 추가


    FROM ruby:2.5.0
    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
    ADD Gemfile /myapp/Gemfile
    ADD Gemfile.lock /myapp/Gemfile.lock
    RUN bundle install
    ADD . /myapp
    

    Gemfile 만들기


    source 'https://rubygems.org'
    gem 'rails', '5.1.4'
    

    Gemfile.lock 추가


    $ touch Gemfile.lock
    

    docker-compose.yml 만들기


    version: '3'
    services:
      db:
        image: postgres
      web:
        build: .
        command: bundle exec rails s -p 3000 -b '0.0.0.0'
        volumes:
          - .:/myapp
        ports:
          - "3000:3000"
        depends_on:
          - db
    

    Rails 프로젝트 만들기


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

    오류가 없으면 OK입니다.

    haml 설치



    이번에는 view를 haml로 작성하고 싶으므로 설치합니다.
  • Gemfile에 다음을 추가
  • gem 'haml-rails'
    gem 'erb2haml'
    
  • 다음 명령 실행
  • $ docker-compose build
    

    DB 생성


  • config/database.yml을 아래에 수정
  • default: &default
      adapter: postgresql
      encoding: unicode
      host: db
      username: postgres
      password:
      pool: 5
    
    development:
      <<: *default
      database: myapp_development
    
    
    test:
      <<: *default
      database: myapp_test
    
  • 다음 명령 실행
  • $ docker-compose run --rm web rake db:create
    

    AdminLTE 설치


    $ docker-compose run --rm web yarn add admin-lte
    

    이제 node_modules 디렉토리에 AdminLTE가 설치됩니다.

    레이아웃 수정


  • app/assets/javascripts/application.js에 다음을 추가
  • //= require admin-lte/dist/js/adminlte.js
    //= require moment/min/moment.min
    
  • app/assets/stylesheets/application.css에 다음을 추가
  • @import 'bootstrap/dist/css/bootstrap.min';
    @import 'admin-lte/dist/css/AdminLTE.min';
    @import 'admin-lte/dist/css/skins/skin-blue.min';
    @import 'admin-lte/plugins/iCheck/all';
    @import "font-awesome/css/font-awesome.min";
    
  • app/views/layout/application.html.erb를 haml로 변환
  • $ docker-compose run --rm web html2haml app/views/layout/application.html.erb app/views/layout/application.html.haml
    $ rm app/views/layouts/application.html.erb
    
  • 레이아웃 수정

  • 코드는 여기

    톱 페이지 만들기


  • controller 만들기
  • $ docker-compose run --rm web rails g controller home
    $ touch app/views/home/index.html.haml
    
  • 뷰 편집

  • 코드는 여기
  • config/routes.rb에 다음을 추가
  • root to: 'home#index'
    
  • 시작하고 localhost:3000 에 액세스
  • $ docker-compose up
    

    아래 화면이 표시되면 OK입니다!



    참고


  • docker for mac로 rails × yarn × webpacker의 front 환경을 정돈한다
  • Quickstart: Compose and Rails
  • AdminLTE2를 Rails5.1/yarn으로 이동
  • 좋은 웹페이지 즐겨찾기