將靜態(tài)網(wǎng)站部署到亞馬遜AWS

時間：2023-07-27 18:09:01 | 來源：網(wǎng)站運營

時間：2023-07-27 18:09:01 來源：網(wǎng)站運營

將靜態(tài)網(wǎng)站部署到亞馬遜AWS：有時我們需要構(gòu)建一個靜態(tài)網(wǎng)站，利用Amazon AWS的相關(guān)服務(wù)可以很好的滿足各方面需求：一是不用專門建立一個web服務(wù)器，二是可以自動化部署，三是可以支持HTTPS。

在AWS S3創(chuàng)建存儲桶

首先創(chuàng)建一個bucket，命名為你的域名，比如“example.com”，取消Block all public access。如圖

在bucket的Properties頁，激活Static website hosting：

在bucket的Permissions頁設(shè)置Bucket Policy：

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicRead", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::example.com/*" } ]}其中“example.com”是bucket的名字。

將靜態(tài)網(wǎng)站的內(nèi)容上傳到bucket，并且設(shè)置訪問權(quán)限為public：

如果需要使用www訪問，也需要設(shè)置一個bucket，名稱叫“www.example.com”，這里的“example.com”改成你自己的域名。同樣取消Block all public access。

在bucket的Properties頁，激活Static website hosting，不同于前一個bucket，這里設(shè)置為Redirect到前一個bucket：

在bucket的Permissions頁設(shè)置Bucket Policy：

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

在AWS Route 53創(chuàng)建DNS

在Route 53中創(chuàng)建一個hosted zone，會得到四個域名服務(wù)器。將域名的DNS指向這四個服務(wù)器。比如域名服務(wù)商是godaddy，則在godaddy賬號中設(shè)置。

在AWS Certificate Manager中申請證書

為了支持HTTPS，需要為網(wǎng)站申請證書：

在Validation步驟中，點擊Create record in Route 53按鈕，會自動在Route 53中添加一條記錄，用于驗證該域名的所有權(quán)。

使用AWS CloudFront實現(xiàn)https

在CloudFront里創(chuàng)建一個Distribution，注意設(shè)置CNAME和選擇Custom SSL Certificate：

“www.example.com”也類似。 設(shè)置完需要等一段時間（5～45分鐘？）才能在Route 53設(shè)置Alias中看到。（等到CloudeFront中Distribution的Status從In Progress變成Deployed）。

在AWS Route 53中將域名指向CloudFront中生成的域名

在上一節(jié)CloudFront中會生成一個“xxx.cloudfront.net”的域名。在Route 53的設(shè)置中，會自動看到此域名。

解決Access Denied問題

問題可見這個討論
解決辦法：

I was running into this same issue and found out that the auto-populated origin field in CloudFront for my S3 bucket wasn’t the website endpoint. To fix, copy the website endpoint URL from S3 and is that as the CF origin.
Example:
~~“example.com.s3.amazonaws.com”~~
“example.com.s3-website-us-east-1.amazonaws.com”

在上面的CloudFront設(shè)置中，選擇Origins and Origin Groups頁，可以發(fā)現(xiàn)Origin Domain Name缺省情況下使用了REST API 終端節(jié)點格式：
“example.com.s3.amazonaws.com”
但是實際上應(yīng)該使用 網(wǎng)站終端節(jié)點 格式：
“example.com.s3-website-us-east-1.amazonaws.com”
對于"http://www.example.com"，CloudFront中也要修改到網(wǎng)站終端節(jié)點格式。
修改設(shè)置后等待幾分鐘生效。

官方的支持文檔我使用 S3 REST API 終端節(jié)點作為我的 CloudFront 分配源。為什么我會收到“403 訪問被拒絕”錯誤？似乎并不能解決問題。

網(wǎng)站更新問題

由于使用了CloudFront，所有網(wǎng)頁是在全球各節(jié)點有緩存的。所以在更新S3之后并不能直接看到更新生效。更新時需要注意以下兩點：

1. 網(wǎng)站內(nèi)容上傳到S3 bucket時，需要注意將文件設(shè)置為public權(quán)限；
2. 更新的內(nèi)容需要在CloudFront中Invalidation以清除CloudFront中緩存的內(nèi)容。如下圖所示：

填入更新的路徑。等待片刻之后，在瀏覽器中刷新才能看到新上傳的內(nèi)容。

（后續(xù)將更新從github自動發(fā)布到S3的內(nèi)容。）