[초보자 필수] Heroku와 AWS S3를 연합하여 투고 이미지를 저장하는 방법

Rails가 첫 번째 학자라면 디자인에 Heroku를 꼭 사용한다고 할 수 있습니다.
🚨 실제로 제작된 앱에서 히로쿠로 올라온 이미지는 저장되지 않아 일정 시간이 지나면 사라진다🚨
이번에는 Rails 애플리케이션(Carrier Wave)에서 투고한 이미지를 S3에 저장해 이미지가 사라지지 않도록 하는 방법을 상세히 설명하겠습니다!
하고 싶은 일
히로쿠를 디자인한 이미지 투고 기능이 있는 포럼 앱에서는 사용자가 투고한 이미지를 AWS3에 저장해 일정 시간이 지나도 이미지가 사라지지 않는다.
개발 환경 & 전제조건
Ruby 3.0.1
Rails 6.1.4.1
CarrierWave에 이미지 투고 기능이 설치되었습니다.
Heroku가 등록됨
샘플 응용: [투표제] 만화·애니메이션 차트
대략적인 절차

AWS 관계의 설정

CarrierWave의 설정

Heroku의 설정

이 부분을 8 단계로 나눠서 해설을 하도록 하겠습니다.🌿
1단계 AWS 관계 등록
우선 여기.의 아마존 공식 절차에 따라 AWS 계정을 작성한다.
AWS란?
→ Amazon 웹 서비스의 생략클라우드 어메이슨이 제공하는 데이터베이스 및 머신 러닝 서비스
계정을 만들면 여기. 의 글에 따라 IAM 계정과 S3 구간을 만들 것입니다.
IAM이란?
→ Identity 및 d Access Management 의 생략AWS의 ID 및 액세스를 관리하는 서비스
S3란 무엇입니까?
→ Amazon Simple Storage Service의 생략AWS에서 제공하는 온라인 스토리지 서비스
2단계: AWS용gem 설치
Gemfile의 글로벌 gem 보완, bundle install
Gemfile

gem 'fog-aws'
gem "aws-sdk-s3", require: false 

단계 3: uploader 파일 편집
캐리어웨이브를 가져올 때 만드는 응용 프로그램/uploaders/○uploader.rb 파일에서 지정한 그림의 저장 위치를 수정합니다.
○○○_uploader.rb

# storage :file から以下に変更
storage :fog

개발 환경에 따라 보존 장소를 변경하려면 정식 환경에서만 S3에 보존할 수 있습니다!
○○○_uploader.rb

if Rails.env.development?
  storage :file
elsif Rails.env.test?
  storage :file
else
  storage :fog
end

4단계: carrierwave 파일 만들기 및 편집
app/config/initializers 바로 아래carrierwave.rb 파일을 제작하여 다음과 같이 편집합니다.
"S3의 통 이름"을 자신의 것으로 만드는 것을 잊지 마세요!
ENV['AWS ACCESS KEY ID'와 같은 환경 변수의 사용은 5단계에서 설명합니다.
carrierwave.rb

require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  config.storage :fog
  config.fog_provider = 'fog/aws'
  config.fog_directory  = 'S3のバケット名'
  config.fog_credentials = {
    provider: 'AWS',
    aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],
    aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
    region: ENV['AWS_DEFAULT_REGION'],
    path_style: true
  }

end

단계 5: storage 관련 파일 편집
다음 두 파일에 aws에 대한 설명을 추가합니다!
config/storage.yml

# コメントアウトを外す。
amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: ap-northeast-1 #東京に修正
  bucket: S3のバケット名 #作成したS3のバケットの名前

config/environments/production.rb

# localからamazonに修正
config.active_storage.service = :amazon

단계 6: 환경 변수 설정
환경 변수란?
→ 쉽게 말하면 인터넷에 공개하고 싶지 않은 정보를 넣는 상자를 말한다.
carrierwave.rb에 AWS 액세스 키를 직접 삽입하는 등 안전성이 좋지 않기 때문에 환경 변수를 설정하기 위해gem를 가져옵니다.
Gemfile의 전 세계에서 환경 변수를 관리할 수 있는gem의dotenv-rails,bundle install.
Gemfile

gem 'dotenv-rails'

다음은 환경 변수를 기록하는 파일이다.app 바로 아래에 env를 만들고 거기에 필요한 환경 변수를 설정합니다.
.env

AWS_ACCESS_KEY_ID='AWSで作成したアクセスキーのID'
AWS_SECRET_ACCESS_KEY='AWSで作成したシークレットアクセスキー'
AWS_DEFAULT_REGION='ap-northeast-1'

마지막.env 파일을 인터넷에 올리지 않기 위해서는 앱 바로 아래에 있습니다.gitignore에 설정을 추가합니다.
.gitignore

# 最終行辺りに.envを追記
/.env

STEP7: Heroku의 설정
Heroku에서 AWS 정보를 설정합니다.
terminal

# Herokuへログイン
% heroku login

# Herokuに環境変数を設定
% heroku config:set AWS_ACCESS_KEY_ID="AWSで作成したアクセスキーのID"
% heroku config:set AWS_SECRET_ACCESS_KEY="AWSで作成したシークレットアクセスキー"
% heroku config:set AWS_DEFAULT_REGION="ap-northeast-1"

단계 8: 최종 확인
여기까지 하면 Heroku한테 청혼해!
앱을 통해 이미지가 담긴 투고를 발표하면 이미지는 S3 물통에 업로드됩니다!(이미지의 빨간 상자 부분)

최후
끝까지 읽어주셔서 감사합니다!!!!
이번 기사가 초보자들에게 도움이 됐으면 좋겠어요.🌿
참고 문장
Rails에서 carrierwave를 사용하여 AWS 3에 이미지를 업로드하는 절차는 이미지로 설명됩니다.
[Rails] 환경 변수를 관리하기 위해 Dotenv-rails 사용