iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

前端網頁設計學習旅程系列 第 25

Day25_Deploy

學到目前為止,也算是有個基礎能力
可以建置一個簡易的網站了
接著要嘗試把開發後的網站,部署到雲端的環境上

AWS

這邊嘗試的是把網頁丟到 AWS 的雲端空間 S3中,並透過 Cloudfront 存取網站
下面一步步說明如何把開發後的成品丟到 S3

首先切換到S3的服務
https://ithelp.ithome.com.tw/upload/images/20201007/20130503pYayOEAWVX.png

建立一個儲存體
https://ithelp.ithome.com.tw/upload/images/20201007/20130503NAZWxbYsKu.png

設定儲存體名稱,以及地區
https://ithelp.ithome.com.tw/upload/images/20201007/20130503B5MiTa8LoQ.png

設定選項
https://ithelp.ithome.com.tw/upload/images/20201007/2013050380gBYXGp68.png

設定權限
https://ithelp.ithome.com.tw/upload/images/20201007/20130503LYSqrTmgrg.png

完成!
https://ithelp.ithome.com.tw/upload/images/20201007/20130503RcZL0gyNAw.png

會長出剛剛新增的儲存體
https://ithelp.ithome.com.tw/upload/images/20201007/20130503roZMughdka.png

開始新建檔案
https://ithelp.ithome.com.tw/upload/images/20201007/20130503XN0kHg8vpb.png

選擇要上傳的檔案
https://ithelp.ithome.com.tw/upload/images/20201007/20130503by5csDi9KQ.png

上傳
https://ithelp.ithome.com.tw/upload/images/20201007/20130503eQDqWsWnyE.png

設定許可
https://ithelp.ithome.com.tw/upload/images/20201007/20130503CC2VCpmcXv.png

設定屬性
https://ithelp.ithome.com.tw/upload/images/20201007/20130503rPNYFZRilA.png

上傳
https://ithelp.ithome.com.tw/upload/images/20201007/201305031JD28zrzM1.png

上傳成功!
https://ithelp.ithome.com.tw/upload/images/20201007/20130503uw1zJU7UJ8.png

試著開啟網頁
https://ithelp.ithome.com.tw/upload/images/20201007/20130503wqrYuJtkWV.png

開啟失敗XD
https://ithelp.ithome.com.tw/upload/images/20201007/20130503ah3E89XMGl.png

原因是S3預設不對外開放,官方建議的是透過CloudFront的服務,以HTTPS協定的方式存取S3上的靜態網頁
這段就留著明天分享吧~


上一篇
Day23_Bootstrap-Flexbox
下一篇
Day26_Deploy-CloudFront
系列文
前端網頁設計學習旅程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言