AWS — S3 架設靜態網站

Kurt
Kurt
Published in
Jun 24, 2022
Photo by Glenn Carstens-Peters on Unsplash

文章同步發表於 個人網站,之後的文章都會發布在個人網站上,再請大家多多支持啦❤️

前言

目前市面上有許多方式可以架設靜態網站,例如 Github PagesNetlify、AWS 的 S3、Amplify … 等等,甚至直接使用別人寫好的框架兜出自己的網站,如 WordPress

工具百百種,今天我要介紹的是使用 S3 架設自己的靜態網頁!

先前準備

  1. 首先你必須要有 AWS 的帳號,如果還沒有的就先去建立吧,這邊就不多做說明。
  2. 隨意建一個 index.html 畫面,以及一個 404.html 的錯誤頁面,內容隨意打,主要只是要 demo 用。(以下我是使用 Docsaurus 模板)

實作順序

  1. 進到 s3 畫面建立一個 Bucket(儲存眝體)
  2. 進到 Bucket 裡面,啟用靜態網站託管 & 設定索引文件以及錯誤文件(即 index.html, 404.html)3.
  3. 編輯存取設定4.
  4. 上傳靜態網站所需檔案5.
  5. 打開網站端點即可看到畫面

開始吧!

1. 建立 Bucket

Bucket 的名稱沒有什麼規定,就自己高興就好,但如果你之後要用自己的網域,就需要取網域的名稱。

另外題外話一下,如果你的 Bucket 名稱有 .,例如 xxx.xxx.xxx,使用上要注意如果你在其他專案上取得該 Bucket 中的資源時,可能會造成 CORS 的錯誤,所以如果不是為了使用個人網域架設靜態網站的話,Bucket 名稱盡量是不要參雜 .,可以使用 -、_ 之類的。

2. 啟用靜態網站託管功能

建立好 Bucket 之後,進到該 Bucket 的屬性

滾到最下面有一個 靜態網站託管 ,進到編輯畫面

選擇 啟用,選擇 託管靜態網站,索引文件就是我們網站的主畫面,也就是我們的 index.html,當然你的檔案要取其他名稱也是可以的,錯誤文件就是我們的 404.html,如果你不想要自己寫一個錯誤畫面,s3 也是有自己預設的錯誤頁面可使用。

3. 編輯存取設定

這邊有個特別的設定要用,因為 S3 的存取權限預設是私有的,但因為我們的網站是要給別人看的,當然不可能設為私有,這樣別人就看不到啦~ 於是你需要按照下圖,將 封鎖公有存取權 的這項設定,預設為打勾的選項取消勾選。

4. 上傳靜態網站所需檔案

上傳 index.html、你用到的圖片、css 等等的檔案到你的 Bucket 。

像這邊我的範例是使用 Docusaurus ,所以我就把 build 出來的所有檔案都放上來。

5. 查看我們的網站

做到這邊,已經算是99%完成了,接著就是趕緊打開我們的網站看看到底有沒有成功~ 到屬性頁面,靜態網站託管的地方,可以看到 儲存眝體網站端點,這個網址會回傳我們設定的索引文件,以我的範例為例就是 index.html,若不太懂網站端點,可以到 這邊 看一下 AWS 的文件。

到這邊為止,算是大功告成啦~~~

不過這時你可能會說:我想用自己的網域耶!

可以的,會在下一篇介紹!

--

--