学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails7.1 | 動画学習アプリ作成 | 15 | Amazon S3

↓↓クリックして頂けると励みになります。



14 | Active Storageの利用】 << 【ホーム】 >> 【16 | カラムの追加


Amazon S3の利用
Amazon S3の利用


Amazon S3(Simple Storage Service)は、Amazon Web Services(AWS)のクラウドストレージサービスの1つです。
S3は、データの保存、バックアップ、アーカイブ、データの配信など、さまざまなデータストレージ関連の用途に使用されます。


herokuにアプリケーションをデプロイすると画像をローカルに保存することができません。
それに対応するため、アップロードした画像を全てアマゾンS3に保存するよう設定します。


アマゾンS3のキーの取得方法は以下の手順でお願いします。
mrradiology.hatenablog.jp


GemFileに以下の記述を追加して下さい。


記述追加 GemFile(82行目)

gem 'aws-sdk', '~> 3.1'



GemFile

source "https://rubygems.org"

ruby "3.1.2"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.1.2"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", ">= 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
gem "redis", ">= 4.0.1"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mswin mswin64 mingw x64_mingw jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mswin mswin64 mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"

  gem "error_highlight", ">= 0.4.0", platforms: [:ruby]
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
end

# bootstrap5
gem 'bootstrap', '~> 5.3', '>= 5.3.2'
gem 'sassc-rails', '~> 2.1', '>= 2.1.2'

# device
gem 'devise', '~> 4.9', '>= 4.9.3'

# 日本語化
gem 'rails-i18n', '~> 7.0', '>= 7.0.8'

# Amazon S3
gem 'aws-sdk', '~> 3.1'



コマンド
bundle


「config\environments\development.rb」ファイルの記述を更新します。


記述更新 config\environments\development.rb
37行目の「config.active_storage.service = :local」の記述を「:amazon」に変更します。

  # config.active_storage.service = :local
  config.active_storage.service = :amazon



「config\storage.yml」ファイルに以下の記述を追加します。


記述追加 config\storage.yml(9行目)
アクセスキー、シークレットキー、バケット名はご自分のものを入れて下さい。

amazon:
  service: S3
  access_key_id: 'ご自分のアクセスキーを入れてください。'
  secret_access_key: 'ご自分のシークレットアクセスキーを入れてください。'
  region: "ap-northeast-1"
  bucket: "ご自分のバケット名を入れてください。"



config\storage.yml

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

amazon:
  service: S3
  access_key_id: 'ご自分のアクセスキーを入れてください。'
  secret_access_key: 'ご自分のシークレットアクセスキーを入れてください。'
  region: "ap-northeast-1"
  bucket: "ご自分のバケット名を入れてください。"

# Use rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
# 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: us-east-1
#   bucket: your_own_bucket

# Remember not to checkin your GCS keyfile to a repository
# google:
#   service: GCS
#   project: your_project
#   credentials: <%= Rails.root.join("path/to/gcs.keyfile") %>
#   bucket: your_own_bucket

# Use rails credentials:edit to set the Azure Storage secret (as azure_storage:storage_access_key)
# microsoft:
#   service: AzureStorage
#   storage_account_name: your_account_name
#   storage_access_key: <%= Rails.application.credentials.dig(:azure_storage, :storage_access_key) %>
#   container: your_container_name

# mirror:
#   service: Mirror
#   primary: local
#   mirrors: [ amazon, google, microsoft ]



ブラウザ確認
http://localhost:3000/dashboard


画像をアップロードすると画像が表示されます。

PCレイアウト
PCレイアウト



アマゾンS3のバケットを見て画像がアップロードされているか確認して下さい。

画像アップロード成功
画像アップロード成功


14 | Active Storageの利用】 << 【ホーム】 >> 【16 | カラムの追加




↓↓クリックして頂けると励みになります。

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)