---
# System prepended metadata

title: 12th 鐵人賽 Day_18 active Storage ?
tags: [12th 鐵人賽]

---

---
title: 12th 鐵人賽 Day_18 active Storage ?
tags: 12th 鐵人賽
--- 
# 12th 鐵人賽 Day_18 active Storage ?
嗨！各位朋友大家好，打給後，歹嘎吼，胎尬喉，我是阿圓，一樣有請今天的one piece：
![](https://i.imgur.com/fJfrvo5.jpg)
(bucket!!!)

寫在前面的話：前一天有更新喔，發現我少安裝一個gem 所以昨天圖片顯示不出來QAQ，已把步驟補上去囉！



昨天我們使用了Action Text，讓我們可以有漂亮的貼文內容，不過選擇上傳圖片時，預設是使用 Active Storage 可是如果仔細看圖片的路徑：
![](https://i.imgur.com/ehf6ayS.png)

是`localhost:3000`啊，就是本機，這樣之後換成自己的網域會有問題啊！
所以今天我們來讓圖片能夠上傳去其他的雲端上吧！


### Active Storage ?
[官方文件](https://guides.rubyonrails.org/active_storage_overview.html)

Active Storage 其實就是 Rails 中負責處理檔案上傳這件事的套件，其他有名的還有[carrywavier](https://github.com/carrierwaveuploader/carrierwave)、[shrine](https://github.com/shrinerb/shrine)

我們來把 Active Storage 設定成可以用google cloud storage：

首先先去 [google cloud](https://cloud.google.com/?hl=zh-tw) 申請一個帳號，並開啟一個專案，並使用storage的服務開啟一個bucket，並在admin的頁面生產出一組金鑰。

接著，請在`config/storage.yml`，把下面一段取消註解：
```yaml=
google:
  service: GCS
  credentials: <%= Rails.root.join("path/to/keyfile.json") %>
  project: ""
  bucket: ""
```
將相對應的資料填入，並將剛剛下載下來的json檔放入專案中(因為有敏感資訊，記得加入gitignore!)，並將檔案路徑放入`credentials`的那一欄。

也可以配合 figaro 把 key 寫在環境變數裡！
```ruby=
google:
  service: GCS
  credentials:
    type: "service_account"
    project_id: <%= ENV['GCS_PROJECT_ID'] %>
    private_key_id: <%= ENV['GCS_PRIVATE_KEY_ID'] %>
    private_key: <%= ENV['GCS_PRIVATE_KEY'] %>
    client_email: <%= ENV['GCS_CLIENT_EMAIL'] %>
    client_id: <%= ENV['GCS_CLIENT_ID'] %>
    auth_uri: "https://accounts.google.com/o/oauth2/auth"
    token_uri: "https://accounts.google.com/o/oauth2/token"
    auth_provider_x509_cert_url: "https://www.googleapis.com/oauth2/v1/certs"
    client_x509_cert_url: <%= ENV['GCS_CLIENT_X509_CERT_URL'] %>
  project: <%= ENV['GCS_PROJECT'] %>
  bucket: <%= ENV['GCS_BUCKET'] %>
```
這樣就設定好了，最後，請記得在gemfile:
```ruby=
gem "google-cloud-storage", "~> 1.11", require: false
```

完成後記得`bundle install`

這樣就大功告成了！


感謝各位看到這邊，若有任何建議，請各位不吝指教！我們明天見！
![](https://i.imgur.com/PPbpd2b.gif)