0%

將Action_text編輯器的圖檔上傳到_AWS_S3

Action text 是rails 6之後新增加的編輯器功能,它整合了trix編輯器的內嵌圖片、comment、quote等功能,非常容易安裝使用,以下跟大家分享我的安裝及上傳內嵌圖片到s3的經驗。

安裝action text 及active storage

  1. 首先按照rails官網指示安裝action text

    1
    rails action_text:install
  2. 在application.js引入trix跟action text

    1
    2
    require("trix")
    require("@rails/actiontext")
  3. 因為action text需搭配active storage來夾帶附件及圖片,所以一併安裝,輸入以下指令會建立兩個table(active_storage_blobs and active_storage_attachments)。

    1
    2
    rails active_storage:install
    rails db:migrate
  4. 在安裝action text的同時,也同時新增了一個actiontext.scss,可以針對編輯器的css做更改,記得把它打包到stylesheet的pack裡面。

    1
    @import "./actiontext.scss";

    開始使用action text

  5. 在你要使用編輯器的model及欄位做設定。

    1
    2
    #project.rb
    has_rich_text :content
  6. 在view上把編輯器渲染出來。

    1
    <%= form.rich_text_area :content %>

  7. 如果是在development階段開發,active storage預設會走local的儲存方式(可見development的設定),附件都會存在本機,所以現在已經可以開始進行編輯及內嵌圖片囉!

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #development.rb
    config.active_storage.service = :local

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

    local:
    service: Disk
    root: <%= Rails.root.join("storage") %>
  8. 預設的編輯器在上傳圖片時,會有一組caption,如果不需要的話,可以在_blob.html裡面把它拿掉。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
    <% if blob.representable? %>
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
    <% end %>

    <figcaption class="attachment__caption">
    <% if caption = blob.try(:caption) %>
    <%= caption %>
    <% else %>
    <span class="attachment__name"><%= blob.filename %></span>
    <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
    <% end %>
    </figcaption>
    </figure>

    在production 環境時上傳內嵌圖片到S3

  9. 在AWS S3註冊一個帳號,接著申請一個bucket及credential_key,取得它的access_key跟secret_access_key之後,在storage.yml裡面新增amazon的儲存方式,把資料填進去(這裏我使用figaro把敏感資料存成環境變數使用)。

    1
    2
    3
    4
    5
    6
    7
    #storage.yml
    amazon:
    service: S3
    access_key_id: <%= ENV["aws_access_key_id"] %>
    secret_access_key: <%= ENV["aws_secret_access_key"] %>
    region: "your region"
    bucket: "your bucket name"
  10. 設定active storage在production環境時,走amazon的儲存方式。

    1
    2
    #production.rb
    config.active_storage.service = :amazon
  11. 在S3的bucket設定跨來源資源分享(CORS),授權我們domain跟AWS資料交換,

  12. 如此一來就可以上傳圖片到S3囉!

參考資料:https://pragmaticstudio.com/tutorials/using-active-storage-in-rails