? ? ? ? 在AWS上有很多部署靜態(tài)網(wǎng)頁的方式，比如使用EC2或者Lightsail。但是不管使用上述哪種方案，都需要預(yù)先部署如Nignx或者Apache等Http服務(wù)。這對(duì)純前端同學(xué)來說可能有點(diǎn)復(fù)雜，而AWS提供了更簡(jiǎn)單的部署方式——只需要提供靜態(tài)網(wǎng)頁文件的“S3網(wǎng)頁托管服務(wù)”。（轉(zhuǎn)載請(qǐng)指明出于breaksoftware的csdn博客）

? ? ? ? 本文將帶大家熟悉一下該方案的實(shí)施步驟。

創(chuàng)建存儲(chǔ)桶

? ? ? ? 因?yàn)镾3管理頁面是不分區(qū)的——“全球”，所以在創(chuàng)建存儲(chǔ)桶時(shí)，需要指定該存儲(chǔ)桶所在的區(qū)域。這次部署的區(qū)域是us-east-1(弗吉尼亞北部），為了方便之后環(huán)節(jié)介紹的“自動(dòng)化部署”，我們給該存儲(chǔ)桶取名規(guī)則制定為“區(qū)域-項(xiàng)目-前/后端”，其中kronos是我們項(xiàng)目名稱。由于我們是重新創(chuàng)建存儲(chǔ)桶，所以不復(fù)制任何桶的設(shè)置。

? ? ? ? 在“設(shè)置權(quán)限”中取消勾選“阻止全部公共訪問權(quán)限”

設(shè)置為“公有”

? ? ? ? 進(jìn)入存儲(chǔ)桶，在“權(quán)限”頁面選中“存儲(chǔ)桶策略”，并填入下面的配置

{"Version": "2012-10-17","Statement": [{"Sid": "PublicReadGetObject","Effect": "Allow","Principal": "*","Action": "s3:GetObject","Resource": "arn:aws:s3:::us-east-1-kronos-web/*"}]
}

設(shè)置“靜態(tài)網(wǎng)站托管”

? ? ? ? 進(jìn)入“屬性”，點(diǎn)擊“靜態(tài)網(wǎng)站托管”。由于我們項(xiàng)目是Vue，且路由是History模式，所以需要將“索引文檔”和“錯(cuò)誤文檔”都設(shè)置為“index.html”。這個(gè)設(shè)置尤其重要，否則History模式將無法使用。同時(shí)記錄下“終端節(jié)點(diǎn)”的URL，我們將通過這個(gè)URL訪問靜態(tài)網(wǎng)頁。

文件上傳

? ? ? ? 由于文件不能打包上傳，所以我們需要一個(gè)個(gè)，一層層上傳靜態(tài)網(wǎng)頁的文件。

? ? ? ? 一個(gè)比較簡(jiǎn)單的方法是使用aws工具。我們進(jìn)入dist文件夾所在的目錄，執(zhí)行如下指令

aws s3 sync dist --region us-east-1 s3://us-east-1-kronos-web/ 

? ? ? ? 最后我們?cè)L問上一步的URL，便可以看到網(wǎng)頁內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的AWS攻略——使用S3托管静态网页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。