將我的部落格遷移到亞馬遜雲端(1)

Octopress已經被公認為Geeker的部落格框架。它所擁有的特性都很符合Geeker的癖好:強大的命令列操作方式、簡潔的MarkDown語法、靈活的外掛配置、美輪美奐的theme（自帶響應式設計哦）、完全可定義的部署……

一般大家都喜歡把部落格部署到github pages上，免費速度快，與Octopress無縫結合。但是自己最近迷上了AWS，就捉摸著將自己的Octopress部落格部署到AWS的S3上，使用CloudFront做CDN，使用Amazon Route 53做域名對映。倒騰了兩天，終於搞定了，也學到了很多東西。不敢私藏，拿出來和大家分享。

這篇文章主要講如何將Octopress部落格部署到S3上去。下一篇文章會講如何將CloudFront做CDN,並與現有域名繫結。

在此之前先普及一些概念。

AWS - Amazon Web Service,亞馬遜提供的雲服務簡稱。

S3 - Amazon Simple Storage Service, 亞馬遜提供的一種儲存靜態資源（如css、js、html檔案，音視訊檔案）的服務。

CDN - Content Delivery Network, 內容分發網路。

Amazon CloudFront - 亞馬遜提供的一種內容分發服務，提高你的網站訪問速度。

Amazon Route 53 - 亞馬遜提供的一種穩定高效的域名解析系統。

第一步，註冊一個亞馬遜的賬號，註冊地址是https://portal.aws.amazon.com/gp/aws/developer/registration/index.html。注意註冊的時候需要提供一張具備外幣功能的信用卡。

第二步，登陸到Amazon management console裡，單擊右上角的名稱，選擇Security Credentials標籤，然後點選左側標籤按照嚮導建立一個group,一個從屬於這個group的user，併為該user生成一個Access key，記錄下來Access key Id 及 Secret Access Key。亞馬遜的文件還是非常詳細的，不懂的可以多看看提示資訊和幫助文件。

第三步，在Amazon management console裡選擇Services -> S3 service，並建立兩個bucket。假如你的部落格域名為example.com，那麼兩個bucket的名稱分別為example.com,www.example.com。為什麼要建立兩個那？是因為我們要保證使用者無論輸入www.example.com還是example.com都可以訪問我們的網站。

將我的部落格遷移到亞馬遜雲端(1)

第四步，選擇www.example.com這個bucket，點選properties標籤，在Static Website Hosting中選擇Redirect all requests to another host name，並配置‘Redirect all requests to:’為example.com。這樣來自www.example.com bucket的訪問都會自動轉發給example.com這個bucket。我們只需為example.com這個bucket同步我們的部落格檔案即可。

將我的部落格遷移到亞馬遜雲端(1)

第五步，選擇example.com這個bucket，在Static Website Hosting中選擇‘Enable Website Hosting’,並配置Index Document，我的是index.html。這個Index Document是預設返回的object名稱。比如如果使用者直接訪問bucket的某個目錄，系統會檢測該目錄下是否存在Index Document中配置的檔名，如果有則會自動返回這個object。

將我的部落格遷移到亞馬遜雲端(1)

第六步，選擇’Permissions’標籤，點選’add bucket policy‘按鈕，加入如下的policy.

{
     "Version": "2008-10-17",
     "Statement": [
          {
               "Sid": "AddPerm",
               "Effect": "Allow",
               "Principal": {
                    "AWS": "*"
               },
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::example.com/*"
          }
     ]
}

這個policy其實是給所有匿名使用者訪問該bucket裡面檔案的許可權。

將我的部落格遷移到亞馬遜雲端(1)

第七步，還是在’Permissions‘標籤裡，點選’Add CORS configuration‘按鈕，加入如下的配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

這個是用來配置跨域訪問的許可權，即是否允許其他網站訪問這個bucket上的資源。由於Octopress部落格整合了很多外掛，比如google analiycis, github等，都需要跨域載入JavaScript檔案，執行JavaScript檔案，所以要加入這些配置。

將我的部落格遷移到亞馬遜雲端(1)

第八步，下載安裝s3cmd。s3cmd是一款操作AWS S3的命令列工具。通過它可以建立或刪除bucket，上傳或下載object，我們在部署octopress部落格時，主要就是通過它來將部落格上傳到S3上去。如果是mac系統化可以通過HomeBrew直接安裝。

# brew install s3cmd

如果是windows系統可以從官網下載安裝包進行安裝。

第九步，配置s3cmd與你的S3的連線。在命令列下輸入s3cmd --configure，按照嚮導來配置與S3的連線。這時候在前面儲存的Access key就派上用場了。所有的配置資訊其實都存在當前使用者名稱下的.s3cfg檔案中。你也可以隨後修改這些資訊。執行s3cmd ls來檢測是否配置成功。

$ s3cmd ls #列出所有的bucket
2013-09-27 05:05  s3://huangbowen.net
2013-09-28 03:24  s3://www.huangbowen.net

第十步，配置Octopress支援向S3的部署。在Octopress目錄下找到Rakefile檔案，修改或新增下述配置。

deploy_default = "s3"   #部署task
s3_bucket = "example.com" # bucket名稱

s3_cache_secs = 3600  # header中的cache controll屬性，即快取時間，後面CloudFront要用到

然後新增一個新的task。

desc "Deploy website via s3cmd"
task :s3 do
  puts "## Deploying website via s3cmd"
  ok_failed system("s3cmd sync --acl-public --reduced-redundancy --add-header \"Cache-Control: max-age=#{s3_cache_secs}\"  public/* s3://#{s3_bucket}/")
end

OK，大功告成，執行rake generate 及&& rake deploy就可以將生成的靜態站點上傳到S3中區。然後就可以通過S3的EndPoint來訪問新站點了。（EndPoint可以在Amazon management console的S3 dashboard的 ‘Static Website Hosting’ 標籤中找到）

當然現在還不能使用自己的域名來訪問，你可以通過配置CNAME來啟用自己的域名。

下篇文章會講如何將CloudFront作為內容分發，並且如何將自己的域名與CloudFront繫結。

現在我的部落格已經在雲端了，地址是<www.huangbowen.net>

將我的部落格遷移到亞馬遜雲端(1)

相關文章