Cloudflare R2を利用した画像アップロード機能

Gemfile

@@ -16,8 +16,11 @@ gem 'sqlite3', '>= 1.4'
 gem 'solid_cache'
 gem 'solid_queue'
 
+gem 'aws-sdk-core', '3.211'
+gem 'aws-sdk-s3', '1.170', require: false
 gem 'devise'
 gem 'kaminari'
+gem 'mini_magick'
 gem 'ransack'
 
 # Use the Puma web server [https://github.com/puma/puma]
@@ -51,7 +54,7 @@ gem 'tzinfo-data', platforms: %i[windows jruby]
 gem 'bootsnap', require: false
 
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
-# gem "image_processing", "~> 1.2"
+gem 'image_processing', '~> 1.2'
 
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem

Gemfile.lock

@@ -74,6 +74,22 @@ GEM
       uri (>= 0.13.1)
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
+    aws-eventstream (1.3.1)
+    aws-partitions (1.1054.0)
+    aws-sdk-core (3.211.0)
+      aws-eventstream (~> 1, >= 1.3.0)
+      aws-partitions (~> 1, >= 1.992.0)
+      aws-sigv4 (~> 1.9)
+      jmespath (~> 1, >= 1.6.1)
+    aws-sdk-kms (1.96.0)
+      aws-sdk-core (~> 3, >= 3.210.0)
+      aws-sigv4 (~> 1.5)
+    aws-sdk-s3 (1.170.0)
+      aws-sdk-core (~> 3, >= 3.210.0)
+      aws-sdk-kms (~> 1)
+      aws-sigv4 (~> 1.5)
+    aws-sigv4 (1.11.0)
+      aws-eventstream (~> 1, >= 1.0.2)
     base64 (0.2.0)
     bcrypt (3.1.20)
     benchmark (0.4.0)
@@ -108,6 +124,14 @@ GEM
     erubi (1.13.1)
     et-orbi (1.2.11)
       tzinfo
+    ffi (1.17.1-aarch64-linux-gnu)
+    ffi (1.17.1-aarch64-linux-musl)
+    ffi (1.17.1-arm-linux-gnu)
+    ffi (1.17.1-arm-linux-musl)
+    ffi (1.17.1-arm64-darwin)
+    ffi (1.17.1-x86_64-darwin)
+    ffi (1.17.1-x86_64-linux-gnu)
+    ffi (1.17.1-x86_64-linux-musl)
     fugit (1.11.1)
       et-orbi (~> 1, >= 1.2.11)
       raabro (~> 1.4)
@@ -115,6 +139,9 @@ GEM
       activesupport (>= 6.1)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
+    image_processing (1.14.0)
+      mini_magick (>= 4.9.5, < 6)
+      ruby-vips (>= 2.0.17, < 3)
     importmap-rails (2.1.0)
       actionpack (>= 6.0.0)
       activesupport (>= 6.0.0)
@@ -127,6 +154,7 @@ GEM
     jbuilder (2.13.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jmespath (1.6.2)
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.2.2)
@@ -150,6 +178,9 @@ GEM
       net-smtp
     marcel (1.0.4)
     matrix (0.4.2)
+    mini_magick (5.2.0)
+      benchmark
+      logger
     mini_mime (1.1.5)
     minitest (5.25.4)
     msgpack (1.8.0)
@@ -245,6 +276,9 @@ GEM
       actionpack (>= 5.2)
       railties (>= 5.2)
     rexml (3.4.1)
+    ruby-vips (2.2.3)
+      ffi (~> 1.12)
+      logger
     rubyzip (2.4.1)
     securerandom (0.4.1)
     selenium-webdriver (4.28.0)
@@ -329,13 +363,17 @@ PLATFORMS
   x86_64-linux-musl
 
 DEPENDENCIES
+  aws-sdk-core (= 3.211)
+  aws-sdk-s3 (= 1.170)
   bootsnap
   capybara
   debug
   devise
+  image_processing (~> 1.2)
   importmap-rails
   jbuilder
   kaminari
+  mini_magick
   puma (>= 5.0)
   rails (= 8.0.1)
   rails-i18n

README.md

@@ -6,3 +6,5 @@ simple memo application composed of Rails 8, SQLite, and Hotwire Turbo. for tech
 ![](/img/2.png)
 
 ![](/img/3.png)
+
+![](/img/4.png)

app/controllers/memos_controller.rb

@@ -60,6 +60,6 @@ class MemosController < ApplicationController
   end
 
   def memo_params
-    params.require(:memo).permit(:content)
+    params.require(:memo).permit(:content, :image)
   end
 end

app/models/memo.rb

@@ -1,4 +1,5 @@
 class Memo < ApplicationRecord
+  has_one_attached :image
   validates :content, presence: true
 
   def self.ransackable_attributes(_auth_object = nil)

app/views/memos/_form.html.erb

@@ -19,9 +19,16 @@
       <%= f.text_area :content,
           class: "w-full h-64 p-4 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
           placeholder: "毎時毎行" %>
-  </div>
+    </div>
+    <div class="mt-4">
+      <%= f.file_field :image,
+          class: "block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" %>
+      <% if memo.image.attached? %>
+        <p class="mt-2 text-sm text-gray-500">現在の画像: <%= memo.image.filename %></p>
+      <% end %>
+    </div>
 
-  <div class="flex gap-4 items-center">
+    <div class="flex gap-4 items-center">
       <%= f.submit memo.new_record? ? "出力" : "修正",
           class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>
       <%= link_to "終了", memos_path,

app/views/memos/_memo.html.erb

@@ -8,6 +8,11 @@
       <p class="text-gray-600 text-sm mb-4 line-clamp-3">
         <%= memo.content.lines[1..3].join.strip %>
       </p>
+      <% if memo.image.attached? %>
+        <div class="mb-4">
+          <%= image_tag memo.image, class: "w-full h-32 object-cover rounded-lg" %>
+        </div>
+      <% end %>
       <div class="mt-auto pt-4">
         <span class="text-gray-500 text-sm">
           <%= l memo.created_at, format: :long %>

config/credentials.yml.enc

@@ -1 +1 @@
-lVVV1a429aFGtn7Mv01xEg6aRiriT047d26RchFwpZJx64Kg8Zz5bkAXY/O3q2Yyya7YJfVQhd+iA+5u82zEsFVf/suUgd/Gxwn7gGPLKJr4rPPrBIVBOxAV4RVNctre1CwBTCba0Y6Ep9Rrm83lGmeskoLBjYy4YTZQHTpIp7v49/AC9Ann+OxabNpnac5Ut+4vKVpMX1dyaE6kIbZR4NEnNzVSqj5VcYcGpqfPdwahe+v3S+gTlgT8v+CNbhD/LLIA/7FVzhPNuESeqNLQVjsbEI1Qvfnr6gg4uP9yTXdsg1Ce/0rnF0mn46kpSq1sbP4ATUDk4vGH2UdgKh5BUsggfz25bsQJ1SkyKTXXBoauDarFKDcJHVfONGXz/4DZALBqPqCexjIqiOwcy5ZAV/RW/V/d--1JErCHw+XYs1IliM--h2ZFjml/cQLUMgibd39Djw==
+Yfe3DN9cA+l4w3fcO7Hh2EMS9lC6CjE5/aXH/HgdHOEC1sZ+6yvsQsTJ+q1GCWQyWmZKIW0blEvyGAzsVEcjNTtH2mjKb66JkIx9DjzOJ+Vdavloib3P3YwAMWLjsJiviNxEMYKP818XQqjOXKyiZz69iD72nWDOIkGkM+XQE7nQ3WqacOFY8Z344cgvYFpWDsi72I2BYUUQV0CPnkaYD7eMC2c9HEIQx91NBx9faqjWFiOwqoAUSCTonT3WtsYxFIQm14wGPAXr+CWgwCZl5AbggCgLy3YsVbsTe90XueexhEP/2JnbNgeKr5KAlI8bPIfRgl0o1DLDq6I6oXha5GK5qpPpo8mv2JSQS/795roAK0LZXw+d/E+KAOZ+bLULNdR79LWqPnzw04742rM7D/QL8nILLQvOub7n23sEJ2Waa0dxyo5s1NWxoMiZQqwTN1v9c+AlSrADqln7xDkXAxvBH5zxivMQsbJhS/uFUFfFRBPOLCB3C/EoHE9tHraBt7RJ3B3NRRRjj28BZ2UBjUz2tdGJhGCMn1aXbjXLgLdjK1ZV30YipuqVTbQuNwKfob3gebk0YO1knZYNr2+s5cJ9ehP/um+Ex9Unvkm9VdgC2riGt20C7YncsGnQtGZoIY15JvZ35Z4lzn+ZaCj2YgAstNl7CZmZ6yVmNXXNKq+5WumyfJ0I4IECMbGAygi45HBd--rwE2L9tnHazUwYKq--Nnj1MjKSwXHm3h5VO1pVIg==

config/environments/development.rb

@@ -34,7 +34,9 @@ Rails.application.configure do
   end
 
   # Store uploaded files on the local file system (see config/storage.yml for options).
-  config.active_storage.service = :local
+  config.active_storage.service = :cloudflare
+  config.active_storage.variant_processor = :mini_magick
+  config.active_storage.resolve_model_to_route = :rails_storage_proxy
 
   # Don't care if the mailer can't send.
   config.action_mailer.raise_delivery_errors = false

config/storage.yml

@@ -6,6 +6,14 @@ local:
   service: Disk
   root: <%= Rails.root.join("storage") %>
 
+cloudflare:
+  service: S3
+  endpoint: https://ef685eac7325e178f5a723151a78ed82.r2.cloudflarestorage.com
+  access_key_id: <%= Rails.application.credentials.dig(:cloudflare, :access_key_id) %>
+  secret_access_key: <%= Rails.application.credentials.dig(:cloudflare, :secret_access_key) %>
+  region: auto
+  bucket: ext
+  force_path_style: true
 # Use bin/rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
 # amazon:
 #   service: S3

db/migrate/20250224005433_create_active_storage_tables.active_storage.rb

@@ -0,0 +1,57 @@
+# This migration comes from active_storage (originally 20170806125915)
+class CreateActiveStorageTables < ActiveRecord::Migration[7.0]
+  def change
+    # Use Active Record's configured type for primary and foreign keys
+    primary_key_type, foreign_key_type = primary_and_foreign_key_types
+
+    create_table :active_storage_blobs, id: primary_key_type do |t|
+      t.string   :key,          null: false
+      t.string   :filename,     null: false
+      t.string   :content_type
+      t.text     :metadata
+      t.string   :service_name, null: false
+      t.bigint   :byte_size,    null: false
+      t.string   :checksum
+
+      if connection.supports_datetime_with_precision?
+        t.datetime :created_at, precision: 6, null: false
+      else
+        t.datetime :created_at, null: false
+      end
+
+      t.index [ :key ], unique: true
+    end
+
+    create_table :active_storage_attachments, id: primary_key_type do |t|
+      t.string     :name,     null: false
+      t.references :record,   null: false, polymorphic: true, index: false, type: foreign_key_type
+      t.references :blob,     null: false, type: foreign_key_type
+
+      if connection.supports_datetime_with_precision?
+        t.datetime :created_at, precision: 6, null: false
+      else
+        t.datetime :created_at, null: false
+      end
+
+      t.index [ :record_type, :record_id, :name, :blob_id ], name: :index_active_storage_attachments_uniqueness, unique: true
+      t.foreign_key :active_storage_blobs, column: :blob_id
+    end
+
+    create_table :active_storage_variant_records, id: primary_key_type do |t|
+      t.belongs_to :blob, null: false, index: false, type: foreign_key_type
+      t.string :variation_digest, null: false
+
+      t.index [ :blob_id, :variation_digest ], name: :index_active_storage_variant_records_uniqueness, unique: true
+      t.foreign_key :active_storage_blobs, column: :blob_id
+    end
+  end
+
+  private
+    def primary_and_foreign_key_types
+      config = Rails.configuration.generators
+      setting = config.options[config.orm][:primary_key_type]
+      primary_key_type = setting || :primary_key
+      foreign_key_type = setting || :bigint
+      [ primary_key_type, foreign_key_type ]
+    end
+end

db/schema.rb

@@ -10,7 +10,35 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[8.0].define(version: 2025_02_23_004442) do
+ActiveRecord::Schema[8.0].define(version: 2025_02_24_005433) do
+  create_table "active_storage_attachments", force: :cascade do |t|
+    t.string "name", null: false
+    t.string "record_type", null: false
+    t.bigint "record_id", null: false
+    t.bigint "blob_id", null: false
+    t.datetime "created_at", null: false
+    t.index ["blob_id"], name: "index_active_storage_attachments_on_blob_id"
+    t.index ["record_type", "record_id", "name", "blob_id"], name: "index_active_storage_attachments_uniqueness", unique: true
+  end
+
+  create_table "active_storage_blobs", force: :cascade do |t|
+    t.string "key", null: false
+    t.string "filename", null: false
+    t.string "content_type"
+    t.text "metadata"
+    t.string "service_name", null: false
+    t.bigint "byte_size", null: false
+    t.string "checksum"
+    t.datetime "created_at", null: false
+    t.index ["key"], name: "index_active_storage_blobs_on_key", unique: true
+  end
+
+  create_table "active_storage_variant_records", force: :cascade do |t|
+    t.bigint "blob_id", null: false
+    t.string "variation_digest", null: false
+    t.index ["blob_id", "variation_digest"], name: "index_active_storage_variant_records_uniqueness", unique: true
+  end
+
   create_table "memos", force: :cascade do |t|
     t.text "content", null: false
     t.datetime "created_at", null: false
@@ -28,4 +56,7 @@ ActiveRecord::Schema[8.0].define(version: 2025_02_23_004442) do
     t.index ["email"], name: "index_users_on_email", unique: true
     t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
   end
+
+  add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
+  add_foreign_key "active_storage_variant_records", "active_storage_blobs", column: "blob_id"
 end