Ruby on Rails : Carrierwave와 AWS 연동을 통한 이미지 업로드 [Gem : fog-aws, carrierwave]

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

 

 주의 

이번 작업은 AWS와 연동되는 작업입니다.

Git 저장소 프로젝트가 Public이신 분은 모두 'Private'으로 전환을 권유 드립니다.

다른 사람이 마음먹고 당신 서버 앞으로 악의적인 자료 업로드를 하게되면 엄청난 서버 요금이 부과될 수 있습니다.

---

본격적인 Carrierwave(이미지 업로드) 기능 도입에 앞서, 잠시 AWS 기능을 사전에 설정하는 과정을 거치겠습니다.

 

•  사전 준비  AWS : 보안자격 증명

어떤 보안시설 건물에 입장할려면 카드키를 센서에 대고 들어가듯, AWS 보안자격은 "출입증 카드"를 만든다라고 보면 되겠습니다.

AWS S3 연동전에 앞서 저희는 보안키를 만들어 보는 과정을 거쳐보겠습니다.

 

1. aws.amazon.com 회원가입을 합니다.

 참고 

대학 및 단체에 소속되어있으면서, 웹 메일을 가지셨다면 AWS 100달러 프로모션 쿠폰을 가지실 수 있습니다!

- 100달러 지원 단체 보기 : 클릭

 

2. AWS 회원가입 후

2-1 설명사진

[사진 2-1] 상단 메뉴바에서 'AWS 소개 - 내 보안 자격 증명' 선택

 

2-2 설명사진

[사진 2-2] 그리고 좌측의 '사용자' 메뉴로 이동 후, '사용자 추가'을 클릭해서 새로운 유저 계정 생성을 합니다.

 

2-3 설명사진

[사진 2-3] 사용자 이름에 아무거나 쳐주시고, 액세스 유형은 '프로그래밍 방식 엑세스' 선택

 

2-4 설명사진

[사진 2-4] 권한 설정에서 '기존 정책 직접 연결'를 선택 후, 아래 필터 정책 검색창에 간단히 'S3'를 검색한 후, 

'AmazonS3FullAccess'를 체크해 주고  다음:검토 이동.

 참고  이 과정은 AWS 보안 등록에 있어 AWS S3에 대해서만 AWS 연동을 허용하겠다는 겁니다.

(키가 털리더라도 최소한의 피해만 입는게 낫겠죠?..)

 

2-5 설명사진

[사진 2-5] 자신이 설정한게 맞는지 확인한 후,

 

2-6 설명사진

[사진 2-6] Access key ID와 Secret access key를 다른곳에 적어둡시다. (메모장 등에 복붙)

※ 참고로 엑세스 정보를 까먹거나 잊어버리더라도 다음에 다른 ID와 key를 부여받을 수 있습니다.

(비밀 엑세스 키는 현 시점 때에만 열람 가능)

 

좌측 메뉴에 보이는 사용자에서 자신의 보안 계정으로 들어간 후,  '보안 자격 증명' 탭에서 새로운 ID와 Key 발급 가능 (이전에 쓰던 KEY는 찾지 못함)

 

 

•  사전 준비  AWS : S3 저장소(Bucket) 설정

1. AWS Credentials user 추가를 마치고, 상위 메뉴에서 'Services'에서 좌측의 S3 탭을 클릭하면 보이는 Storage-S3 로 이동합니다.

 

2. 새로운 Bucket을 생성합니다.

 

 

•  Chapter 1  Rails프로젝트와 AWS 연동 작업

1. Gemfile에 가서 다음을 입력합니다.

## AWS 연동 및 이미지 업로드를 도와주는 Gem
gem 'fog', '~> 1.41.0'
gem 'carrierwave' 

## 환경변수 설정
gem 'figaro'

 참고  fog Gem은 위와같이 특정 버전을 가리켜서 설치해주세요. 최신 버전으로 설치 시 dependency 에러가 발생합니다.

 

그리고 터미널 명령어창에 

bundle install

을 입력해줘서 Gem을 설치해줍니다.

 

2. 환경변수 설정을 위해 config 폴더에  application.yml  파일을 생성 후, 다음 내용을 입력해주세요.

## config/application.yml

AWS_ACCESS_ID: "xxxxxxxxxx"
AWS_ACCESS_SECRET_KEY: "yyyyyyyyyyy"
AWS_REGION: "ap-northeast-2"
AWS_S3_END_POINT: "https://s3-ap-northeast-2.amazonaws.com"

 참고 

• AWS_ACCESS_ID 및 AWS_ACESS_SECRET_KEY는  Chapter 1  때 발급받은 본인의 정보를 입력해주세요.
• AWS_REGION 및 AWS_SE_END_POINT는 한국서버 기준으로 작성되었습니다. 

 

3. Github에 해당 프로젝트를 올리게 될 경우,  .gitignore  파일 내에 Push를 방지하는 코드를 추가해주세요.

## .gitignore

/config/application.yml

 

4.  config/initializers  폴더 내에 새로운 파일을 생성해 주고,  fog.rb  라는 명칭을 붙입니다.

CarrierWave.configure do |config|
    config.fog_provider = 'fog/aws'                        # required
    config.fog_credentials = {
    provider:              'AWS',                        # required
        aws_access_key_id:     "#{ENV["AWS_ACCESS_ID"]}",                        # required
        aws_secret_access_key: "#{ENV["AWS_ACCESS_SECRET_KEY"]}",                        # required
        region:                "#{ENV["AWS_REGION"]}",             # 아시아-한국서버 명칭
        endpoint:              "#{ENV["AWS_S3_END_POINT"]}" # 아시아-한국서버
    }
    config.fog_directory  = '아까 자신이 S3에서 만든 bucket 명칭'                          # required
    config.fog_public     = true                                        # optional, defaults to true
    config.fog_attributes = { } # optional, defaults to {}
    
    # 이미지를 가진 게시글 삭제 시 AWS S3서버에도 자동 삭제처리
    config.remove_previously_stored_files_after_update = true
end

 

5. 터미널에 다음 명령을 입력합니다.

rails g uploader image

그럼 app 폴더 내에 uploaders라는 폴더가 생성된게 보일겁니다.

uploaders 폴더 내에 있는 image_uploader.rb 파일을 열람합니다.

 

6.  app/uploaders/image_uploader.rb  에서 일부 내용을 수정합니다.

## app/uploaders/image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base 
    # 자료 저장방식 (AWS 연동은 'fog'로, 로컬 저장방식은 'file'로)
    storage :fog
 
    # AWS S3 Bucket 저장 경로
    # 이미지가 동일한 경로에 저장되면 똑같은 이름의 이미지가 업로드 할 시 덮어씌어질 수 있어서 이미지가 새로 추가될 때 서로 다른 경로에 이미지가 생성되게 함.
    def store_dir
        "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
    end
 
    # 업로드 시 허용 확장자
    def extension_whitelist
        %w(jpg jpeg gif png)
    end
 
    # 파일 업로드 허용 용량
    # 해당 부분은 주석처리 되어있음, 아래 예시에선 2MB까지만 허용
    # def size_range
    #    1..2.megabytes  
    # end
end

수정에 있어 최소한 storage :file 을 storage :fog 라고 수정해주세요.

 

 

•  Chapter 2  CarrierWave 셋팅

1. Scaffold를 만듭니다.

rails g scaffold posts title content:text image

 참고  이미 만들어진 Scaffold가 있다면..

1) 터미널에 다음 명령어를 입력해서 에트리뷰트를 추가합니다.

# rails g migration add_FieldName_to_ModelName FieldName
rails g migration add_image_to_post image:string

 

2)  app/controllers/(Scaffold 이름)_controllers.rb  파일로 이동 후,

class PostsController < ApplicationController
    ... (내용 중략) ...
    
    def post_params
        params[:post][:user_id] = current_user.id
        params.require(:post).permit(:title, :content)
    end
 
    ... (내용 중략) ...
end

위 코드의 post_params 안에 보이는 화이트리스트 부분에서

params.require(:post).permit(:title, :content, :image)

image를 추가해줍니다.

 

3) 이제 다음 2번 과정으로 따라주세요.

 

2.  app/models/post.rb  파일로 이동 후, 다음 내용을 추가합니다.

class Post < ApplicationRecord
    mount_uploader :image, ImageUploader
 
    # 이미지를 가진 게시글 삭제 시 AWS S3서버에도 자동 삭제처리
    before_destroy :destroy_assets
 
    def destroy_assets
        self.image.remove! if self.image
        self.save!
    end
end

 

3.  app/views/posts/_form.html.erb  파일로 이동 후, 내용을 수정합니다.

## app/views/posts/_form.html.erb

... (내용 중략) ...

<div class="field">
    <%= form.label :image %>
    <%= form.text_field :image, id: :post_image %>
</div>

... (내용 중략) ...

위 내용을

## app/views/posts/_form.html.erb

... (내용 중략) ...

<div class="field">
    <%= form.file_field :image, accept: 'image/png,image/gif,image/jpeg' %>
</div>

... (내용 중략) ...

위와같이 수정해줍니다.

 

4.  app/views/posts/show.html.erb  파일로 이동 후, 내용을 수정합니다.

## app/views/posts/show.html.erb

... (내용 중략) ...

<p>
  <strong>Image:</strong>
  <%= @post.image %>
</p>

... (내용 중략) ...

위 내용을

## app/views/posts/show.html.erb

... (내용 중략) ...

<p>
  <img src="<%= @post.image %>">
</p>

... (내용 중략) ...

위와같이 수정해줍니다.

 

5. 4번 과정까지 다했다면 모든 준비는 끝났습니다!

글을 한번 써볼까요??

 

 

6. 다음과 같이 글이 보여지면 성공입니다!

 

이미지를 분석해보면 이미지 URL이 AWS 서버에 있는걸 확인할 수 있고,

 

실제로 AWS S3 서버에 가면 아까 업로드한 이미지가 저장되어 있는게 확인됩니다.

 

 

 

• 자료 참고

1. Merge 이미지가 있는 게시글 삭제 시 AWS에도 자동 삭제 [클릭]

 

루비온 레일즈 Ruby on Rails ROR