Ruby on Rails : 어드민 관리자 페이지 [Gem : rails_admin]

해당 글은 https://blog.naver.com/kbs4674/221187526054 로 부터 게시글이 이전되었습니다.

 

홈페이지를 원만하게 운영하기 위해서는 관리자 메뉴얼 창이 따로 또 필요하곤 합니다.

하지만 혼자 스스로 관리자 페이지를 만들기란 쉽지 않습니다.

데이터가 무수히 많을 때를 대비해 SQL 최적화 작업을 해야하고, 그 외 레일즈의 모든 이론이 관리자 페이지 기술에 담겨져야할 수도 있기 때문입니다.

 

해당 Gem이 정말 좋은게 자기가 알아서 모든 model을 탐색해 내고, 부트스트랩/그리드가 적용되어 있어서 UI도 전체적으로 괜찮습니다.

---

 참고 

Devise Gem이 사전에 설치되어 있어야 합니다. [Devise Gem 설치법 클릭]

---

 

• 어드민 관리자 페이지 : rails_admin

1.  Gemfile  을 열고, 다음 내용을 입력해줍니다.

gem 'rails_admin'

이어서 Gem을 설치해줍니다.

bundle install

 

2. 터미널에 다음 명령어를 입력해줍니다.

rails g rails_admin:install

이 명령어를 입력하면 '어느 URI 위치에 어드민 페이지가 생기게 할레?' 하고 물어보는데 그냥 엔터를 누르면 기본적인 위치에 어드민 페이지가 생성하게 됩니다.

 

 참고  만약 특정 URI 위치에 어드민 페이지를 생성하고 싶다면 다음처럼 입력하시면 됩니다.

 

더불어 위 작업이 끝난 후,  config/routes.rb  파일을 열람해서 보면 새로운 내용이 다음과 같이 추가된게 확인할 수 있습니다.

Rails.application.routes.draw do
  mount RailsAdmin::Engine => '/admin', as: 'rails_admin'
  ...
end

 

4. 서버를 껏다 켜주세요.

 

5. 일단 여기까지의 과정이 무사히 끝나면 어드민 페이지에 접속을 하실 수는 있습니다만,

문제는 너도나도 누구든지, 심지어 비회원도 들어갈 수 있다는 점입니다.

 

해당 문제를 방지하고자 Devise의 계정에 admin 권한을 주는 과정을 거쳐보겠습니다.

 참고  이번 실습은 Rolify+cancancan 과는 관련이 없습니다.

 

6. Devise의 User 모델에 새로운 Attribute를 추가합니다.

rails generate migration add_admin_to_users admin:boolean

 

7. 새로운 Migration DB파일이 생성되는데,  db/migrate/add_admin_to_users  파일로 들어간 후,

add_column 행에 "default: false" 라는 문구를 수동적으로 넣어줍니다.

class AddAdminToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :admin, :boolean, default: false
  end
end

 

8. 테이블의 Attribute 최신화 및 스키마 업데이트를 위해

rake db:migrate

를 입력해줍니다.

이후 DB 테이블을 보면 새로 'admin'이라는 컬럼(Attribute)이 생성된게 확인됩니다. (아직은 권한이 주어지지 않은 상태임.)

 

9. 콘솔을 통해 특정 유저에게 admin 권한에 대해 true를 지정해줍니다.

t = User.find(1)
#=> #<User id: 1, email: "kbs4674@naver.com", nickname: "관리자", manage_agree: false, do_say: "", created_at: "2018-01-17 19:01:03", updated_at: "2018-01-17 19:15:47", admin: false

t.update_attribute :admin, true
#=> UPDATE "users" SET "updated_at" = ?, "admin" = ? WHERE "users"."id" = ?  [["updated_at", "2018-01-17 19:21:47.638906"], ["admin", "t"], ["id", 1]]
#=> true

 

10.  config/routes.rb  에 URI 정의를 다음과 같이 수정합니다.

## config/routes.rb

authenticate :user, lambda { |u| u.admin? } do
    begin
      mount RailsAdmin::Engine => '/admin', as: 'rails_admin'
    rescue
      redirect_to new_user_session_path
    end
end

 참고  코드 리뷰

• 비회원이 접근 시도 시, 로그인 페이지로 이동

• 로그인을 한 회원이 접근 시, admin=true 유무 검사, 만약 false일 경우 없는페이지(404)라고 함.

11. 이제 모두 끝났습니다!

Admin 권한을 최종적으로 획득을 하셨고, 이제 관리자 페이지에는 어드민만 들어갈 수 있습니다!

 

 

• 어드민 페이지 번역

처음에 관리자 페이지에 들어가면 몽땅 영어입니다(...)

 

하지만 저희는 순수한 한국인이죠..!!

한국어로 번역하는법은 2가지가 있습니다.

• 첫 번째는 Rails_admin-i18n[클릭] 이라는 Gem이 있는데, 이 Gem에서는 아쉽게도 한국어가 2% 밖에 번역이 안됐습니다(...)
• 그래서 저희는 수동으로 번역본을 넣을겁니다.

# config/locals/rails_admin.ko.yml
 
ko:
  admin:
    js:
      true: 참
      false: 거짓
      is_present: 있는
      is_blank: 없는
      date: 날짜 ...
      between_and_: ... 에서 ... 사이
      today: 오늘
      yesterday: 어제
      this_week: 이번주
      last_week: 지난주
      number: 숫자 ...
      contains: 포함하는
      is_exactly: 정확히
      starts_with: 시작하는 문자
      ends_with: 끝나는 문자
    loading: "로딩..."
    home:
      name: "홈"
    pagination:
      previous: "« 이전"
      next: "다음 »"
      truncate: "…"
    misc:
      filter_date_format: "yy/mm/dd" # a combination of 'dd', 'mm' and 'yy' with any delimiter. No other interpolation will be done!
      search: "검색"
      filter: "필터"
      refresh: "새로고침"
      show_all: "모두 보기"
      add_filter: "필터 추가"
      bulk_menu_title: "선택된 항목"
      remove: "제거"
      add_new: "새로 추가"
      chosen: "선택된 %{name}"
      chose_all: "모두 선택"
      clear_all: "모두 지우기"
      up: "위"
      down: "아래"
      navigation: "네비게이션"
      navigation_static_label: "링크"
      log_out: "로그아웃"
      ago: "전"
    flash:
      successful: "%{name}, %{action} 성공"
      error: "%{name}, %{action} 실패"
      noaction: "아무 액션도 선택되지 않았습니다"
      model_not_found: "'%{model}'모델을 찾을 수 없습니다"
      object_not_found: "ID가 '%{id}'인 %{model}을 찾을 수 없습니다"
    table_headers:
      model_name: "모델 이름"
      last_used: "최근 사용"
      records: "레코드"
      username: "사용자"
      changes: "수정"
      created_at: "Date/Time"
      item: "항목"
      message: "메시지"
    actions:
      dashboard:
        title: "사이트 관리자"
        menu: "대시보드"
        breadcrumb: "대시보드"
      index:
        title: "%{model_label_plural} 목록"
        menu: "목록"
        breadcrumb: "%{model_label_plural}"
      show:
        title: "%{model_label} '%{object_label}' 세부정보"
        menu: "세부정보"
        breadcrumb: "%{object_label}"
      show_in_app:
        menu: "앱에서 보기"
      new:
        title: "새로운 %{model_label}"
        menu: "새로 추가"
        breadcrumb: "새 항목"
        link: "%{model_label} 추가하기"
        done: "생성되었습니다"
      edit:
        title: "%{model_label} '%{object_label}' 수정"
        menu: "수정"
        breadcrumb: "수정"
        link: "%{model_label} 수정하기"
        done: "변경되었습니다"
      delete:
        title: "%{model_label} '%{object_label}' 삭제"
        menu: "삭제"
        breadcrumb: "삭제"
        link: "'%{object_label}' 삭제하기"
        done: "삭제되었습니다"
      bulk_delete:
        title: "%{model_label_plural} 삭제"
        menu: "여러 항목 삭제"
        breadcrumb: "여러 항목 삭제"
        bulk_link: "선택된 %{model_label_plural} 삭제하기"
      export:
        title: "%{model_label_plural} 내보내기"
        menu: "내보내기"
        breadcrumb: "내보내기"
        link: "%{model_label_plural} 내보내기"
        bulk_link: "선택된 %{model_label_plural} 내보내기"
        done: "내보내졌습니다"
      history_index:
        title: "%{model_label_plural} 히스토리"
        menu: "히스토리"
        breadcrumb: "히스토리"
      history_show:
        title: "%{model_label} '%{object_label}' 히스토리"
        menu: "히스토리"
        breadcrumb: "히스토리"
    form:
      cancel: "취소"
      basic_info: "기본 정보"
      required: "필수"
      optional: "선택"
      one_char: "문자"
      char_length_up_to: "최대 문자"
      char_length_of: "길이"
      save: "저장"
      save_and_add_another: "저장하고 새로 추가"
      save_and_edit: "저장하고 수정"
      all_of_the_following_related_items_will_be_deleted: "? 다음 연관된 항목들은 삭제되거나 고아가 될 수 있습니다:"
      are_you_sure_you_want_to_delete_the_object: "이 %{model_name}를 삭제하겠습니까?"
      confirmation: "네, 확실합니다"
      bulk_delete: "다음 항목들을 삭제하시겠습니까? (연관된 의존성이 삭제되거나 고아가 될 수도 있습니다):"
      new_model: "%{name} (새로 추가됨)"
    export:
      confirmation: "%{name}로 내보내기"
      select: "내보낼 항목을 선택하세요"
      select_all_fields: "모든 필드 선택"
      fields_from: "%{name}의 필드"
      fields_from_associated: "%{name}와 관련된 필드"
      display: "%{name} 표시: %{type}"
      options_for: "%{name} 옵션"
      empty_value_for_associated_objects: "<비어있음>"
      click_to_reverse_selection: '선택을 반대로 하려면 클릭하세요'
      csv:
        header_for_root_methods: "%{name}" # 'model' is available
        header_for_association_methods: "%{name} [%{association}]"
        encoding_to: "인코딩 "
        encoding_to_help: "출력 인코딩을 선택하세요. 선택하지 않으면 현재 인코딩(%{name})으로 출력됩니다"
        skip_header: "헤더 없음"
        skip_header_help: "헤더를 출력하지 않습니다 (필드 설명이 없음)"
        default_col_sep: ","
        col_sep: "행 구분자"
        col_sep_help: "빈칸으로 두면 기본값('%{value}')으로 설정됩니다" # value is default_col_sep

위 텍스트 내용을  config/locals  디렉토리에  rails_admin.ko.yml  파일을 만들어 내고, 복사 및 붙여넣기를 해주세요.

 

그럼, 짜잔! 한국어가 잘 보일겁니다!

 

 

 

•  이슈  Devise에서 :lockable 설정했을 시, admin 메뉴에서 계정 (연속)생성 에러, cancancan 권한설정 먹통에러 등

 

 

이상하게 rails_admin에서는 Devise에서 :lockable 옵션을 설정을 한 상태로 Rails Admin에서 계정 추가생성, 권한설정 등을 하면 위 사진과 같은 에러가 발생합니다.

일단 원인은 unlock_token, confirmation_token 이 문제였습니다.

 

이를 해결하는 방법은 간단하게  config/initializers/rails_admin.rb  에 가서 다음 내용을 추가 입력하시면 됩니다.

## config/initializers/rails_admin.rb

config.model 'User' do |t|
  t.exclude_fields :unlock_token
  t.exclude_fields :confirmation_token
end

 

 

•  이슈  css 파일이 안불러와서 style이 깨지는 경우

간혹 public Environment에서 위와같이 css 파일이 깨진 체로 페이지가 열리는 경우가 있습니다.

 

rails_admin과 관련된 css 호출 불가 (404 에러, 아예 파일이 없다고 뜸.)

해당 이슈의 원인은  rake assets:precompile  미실행 및 public 폴더 내 파일을 제대로 못찾아내오는걸로 지목이 됩니다.

해당 문제의 해결 방법은 다음과 같습니다.

 

1. Production 환경에서 서버 실행 전, Assets 폴더 내에있는 javascript 및 css를 컴파일을 해줘야 합니다.

터미널에 다음 명령어를 입력해줘서 javascript 및 css를 컴파일을 해주세요.

RAILS_ENV=production rake assets:precompile

 

2. production 환경을 설정할 수 있는 파일로 이동합니다.

위치 : app/config/environments/production.rb

 

3.  production.rb  파일을 열람 후, 다음 코드를 찾아내주세요.

config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

 

4. 찾아낸 코드를 다음 코드로 수정 해주세요.

config.public_file_server.enabled = (ENV['RAILS_SERVE_STATIC_FILES'].present? || true)

 

5. 이제 서버를 껏다 키신 후, 결과를 확인해보세요.

 

 

•  참고  Production 모드에서 실행할 시 유의사항

Production 모드에서 실행을 하려니 처음에 접속이 안되는 에러가 있었습니다.

에러메세지가 뭔고 하니..

The asset not present in the asset pipeline

asset pipeline 오류가 뜨길레 혹시나 CSS asset 누락에러인 듯으로 의심되고, asset precompile을 안해서 그런가 해서

rake assets:precompile RAILS_ENV=production

위 명령어를 치니까 말끔히 해결되었습니다.

혹시 저와같은 사례로 안되신다면, 위 명령어를 한번 쳐보세요!

 

 

•  참고  Rails_admin 사이드 메뉴란에 특정 링크 추가하기
  

Rails Admin 사이드 메뉴란이 자신이 지정해놓은 사이트로 이동할 수 있는 특정 사이트 링크를 추가할 수도 있습니다.

방법은 간단하게  config/initializers/rails_admin.rb  에 가서 다음 내용을 추가 입력하시면 됩니다.

config.navigation_static_links = {
    '카테고리 설정' => '/bulletins',
    '네이버' => 'www.naver.com',
    '다음' => 'www.daum.net',
    '조랑이의 바람일기' => 'jorang.com'
}

 

 

•  참고  rails_admin.rb 내용 수정 반영

 config/initializers  위치에 있는  rails_admin.rb  파일에서 수정된 내용은 파일 저장 후, 레일즈 서버를 껏다 켜야 내용이 반영됩니다.

 

 

• 자료 참고

1. Github [클릭]

2. 설치 작업 참고(한국어 설명) [클릭]

3. i18n 한국어 번역본(1) [클릭]

4. i18n 한국어 번역본(2) [클릭]

5. Devise - Admin 설정 [클릭]

6. Rails_admin과 Devise :lockable 과의 에러관계 해결 [클릭]

 

루비온 레일즈 Ruby on Rails ROR