[Ting's筆記Day7]活用套件carrierwave gem:（2）利用Amazon S3架設圖片服務器

來到第7篇了！培養寫做習慣真是不容易：）

 

在個人上一篇文章活用套件carrierwave gem:（1）在Rails實現圖片上傳功能，上傳圖片功能已經完成啦！可是目前圖片僅能上傳在本身的本地文件夾內孤芳自賞。/images/emoticon/emoticon25.gif

 

若是咱們要把網站完整的功能部署到正式環境，讓其餘網絡使用者也能夠一塊兒上傳圖片，勢必須要一個圖片服務器。目前最主流的Image Host之一算是AWS（Amazon Web Service）裏的S3（Simple Storage Service）了。

 

在這邊咱們略過申請賬號的過程（須要綁信用卡號，但只要在一年內不超過特定用量就可免費。）

 

A.安裝Fog-AWS Gem與Figaro Gem

爲了串接carrierwave上傳到Amazon S3的功能，咱們回到carrierwave gem在Github的頁面Using Amazon S3這個段落好好研究。它要咱們在Gemfile裏新增gem「fog-aws」，而後在carriewave/intializers下，新增一個檔名稱叫作carrierwave.rb，。

以它提供的示例程序上寫的上來看(leafor)：

 

CarrierWave.configure do |config|

config.fog_provider = 'fog/aws' #required

config.fog_credentials = {

provider: 'AWS'，#required

aws_access_key_id: 'xxx'，

#required unless using use_iam_profile

aws_secret_access_key: 'yyy'，

#required unless using use_iam_profile

use_iam_profile: true，#optional，defaults to false

region: 'eu-west-1'，#optional，defaults to 'us-east-1'

host: 's3.example.com'，#optional，defaults to nil

endpoint: 'https://s3.example.com:8080' #optional，defaults to nil

}

config.fog_directory = 'name_of_bucket' #required

config.fog_public = false #optional，defaults to true

從研讀代碼的過程當中，咱們很容易發現到了裏面出現一個使用任何雲端上傳服務都會有的密鑰及安全性的問題！如何避免以後代碼備份到Github上，Access Key被全世界的人看光光？

 

[解決方案]

這時候咱們除了fog-aws，還要裝一個gem叫作Figaro以解決上述問題。Figaro會幫咱們修改Rail的configuration檔，用環境變數ENV代替密鑰，併產生一個簡單的YAML檔。

 

YAML是一種寫法優雅，適合表達、編輯數據結構與各類設定檔的格式（注意：大小寫和TAB鍵敏感！）。YAML近一步瞭解：Wiki|簡書

 

如今咱們立刻來安裝gem:

 

gem 'figaro'

gem「fog-aws」#用雙引號，由於裏面有特殊字元「-」

而後在terminal跑bundle install，

再重啓服務器rails s（安裝gem的三大步驟要牢記！）

 

這樣咱們一次就裝好了figaro和fog-aws兩支gem。

 

接着，按照Figaro主頁README.md檔的指示，到terminal輸入bundle exec figaro install：

 

tingdeMacBook-Air:yelpdemo tingtinghsu$ bundle exec figaro install

create config/application.yml

append .gitignore

這時候項目就會在config文件夾下產生了新的yml檔：config/application.yml。

 

以後git push項目到git版控服務器如github，figaro這支gem會用.gitignore隱藏好application.yml，幫助咱們的私密數據沒法被它人觀看。

 

新手如我在修改代碼的時候，經常看到一些新名詞，例如剛剛的fog-aws，這時候去google一下定義，對於程序構架的理解是頗有幫助的。我很好奇爲什麼要用fog（霧？️？）這個名詞。ITHome的這篇文章有提到：原來fog（霧運算）是相對於cloud（雲計算）。

 

邊緣運算是就近運算的概念，將運算更靠近數據源所在的本地區網（Local Network）內運算，儘量不用將數據回傳雲端，以減小數據往返雲端的等待時間及下降網絡頻寬成本。邊緣運算一般是在本地端和雲端兩邊交界的附近作運算處理，也就是數據進出區網附近的位置，這麼作的目的，在於既能夠將運算環境放在本地，同時又能夠靠近雲端邊界附近，藉此跟雲銜接。畢竟並非所有的數據都能放在本地端運算，仍是會有些須要更進一步分析及判斷的數據，

 

B.在Amazon S3創建新的bucket

Amazon S3的bucket（儲存桶）是相似雲端文件夾（~霧端文件夾？）的概念。新手推薦

初期接觸Amazon S3服務的板友們，我很建議去這個lab按照教學操做，內容設計互動上還挺有趣的～

 

1.進入Amazon S3 console，按下的create bucket創建bucket。

 

輸入Bucket Name和Region（區域）。注意（bucket是個物件，你的bucket name必須是個unique name和世界上其餘人的bucket name都不同）然指定一個區域（region），不一樣區域的bucket對於使用者的上傳下載速率有顯著影響。（原來如此！難怪後文出現了卡bug。）我選了我目

前所在的城市Sydney。

 

在設定bucket的Permission頁面時，一開始對於新手來講，將bucket設定爲public是較爲容易的學習作法。（若是咱們的數據是極爲隱密的，就千萬不能這樣作！）

 

2.在bucket內按upload上傳一張圖片（或任何檔案），記下所在的host和region。

 

 

點開檔案，能夠看到每一個檔案都會有屬於本身的獨特網址。

 

從這行網址，就能夠確認主機s3-ap-southeast-2.amazonaws.com，區域是ap-southeast-2，這二者是咱們修改carrierwave.rb所須要的參數。

 

host:「s3-ap-southeast-2.amazonaws.com」，

region:「ap-southeast-2」

3.在Sercurity Credentials新增Access Key

在右上方點擊咱們的賬戶，菜單上會出現Sercurity Credential（安全憑證）。按下以後，視窗會提醒你接下來的步驟要當心謹慎，按下Continue to Sercurity Credential後出現如下畫面：

 

點選Create New Access Key，而後Download Key File能夠下載新建好的Access Key。

 

C.到項目修改application.yml

咱們用記事本打開熱騰騰剛打好的鑰匙Access Key！在剛剛figaro幫咱們製做的application.yml，放入密鑰id和access key。

 

pusher_app_id: '放個人id'

pusher_key: '放個人鑰匙'

pusher_secret: '放個人祕密路徑'

咱們使用的是Amazon S3，因此前面三個pusher修改成：

 

aws_access_key_id: '放個人剛剛建好的id'

aws_secret_access_key: '放我剛剛建好的key'

fog_directory: '個人Amazon S3 bucket名稱'

以此類推，若是你使用Google Cloud，就要換成Google Cloud的變數和相對應的key。YAML對於任何多的空格space或tab都是敏感的，因此輸入數據時要特別當心。

 

D.Config/initializers新增新檔carrierwave.rb，代換參數，重啓server。

在config/initializers/路徑下，新增carrierwave.rb，將carrierwave提供給咱們代碼貼過去修改，代換剛纔提到figaro幫咱們作好的ENV[]環境變數：

 

CarrierWave.configure do |config|

config.fog_provider = 'fog/aws' # required

config.fog_credentials = {

provider: 'AWS'，# required

aws_access_key_id: ENV[「aws_access_key_id」]，

aws_secret_access_key: ENV[「aws_secret_access_key」]，

host:「s3-ap-southeast-2.amazonaws.com」，

region:「ap-southeast-2」

}

config.fog_directory = ENV[「fog_directory」] # required

# optional，defaults to {}

end

這邊咱們更動到了config檔案，記得要重啓服務器rails s。

 

[Bug注意！]

 

host:「s3-ap-southeast-2.amazonaws.com」，

region:「ap-southeast-2」

這兩行要代換成你所選擇的Amazon aws服務器主機區域，否則會產生問題(vmwork)！

 

後來我用關鍵字Excon:：Errors:：SocketError Broken pipe（Errno:：EPIPE）參考了這篇網誌終於搞定！

 

（跟Amazon S3相關功能的熟悉和隨之而來的bug讓我卡了兩天/images/emoticon/emoticon14.gif）這篇文章的得來不易啊…。

 

C.修改carriewave的uploader.rb

去app/uploaders/image_uploader.rb，把storage：file加上註釋，消去storage：fog的註釋，讓carriewave知道，如今咱們要把圖片要上傳到Amazon S3去。

 

class ImageUploader < CarrierWave:：Uploader:：Base

# Choose what kind of storage to use for this uploader:

# storage：file

storage：fog #Use Amazon S3

end

def store_dir

「uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}」

end

=大功告成！=

試着用本機功能的上傳按鈕傳圖片，再點開圖片網址確認。

這張照片已經放入Amazon S3的bucket囉！

 

我很開心地修改3家餐廳的數據，去Amazon S3的bucket確認，圖片已經安安穩穩地躺在路徑/upload/restaurant/image/餐廳id裏了。

 

下一篇要講把上傳Amazon S3的新功能Deploy部署到Heroku上！