AWS攻略——使用S3托管静态网页
? ? ? ? 在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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: AWS攻略——使用CodeCommit托
- 下一篇: AWS攻略——使用CodeBuild进行