以 Amazon S3 建置靜態網站

# 以 Amazon S3 建置靜態網站 [TOC] ###### tags: `aws` `s3` `bucket` `static` `website` --- ## 建立 bucket 1. 開啟 [Amazon S3 主控台](https://console.aws.amazon.com/s3/)。 ![Amazon S3 console](https://i.imgur.com/s3DpRbC.png) 2. 點擊 ![Create Bucket](https://i.imgur.com/5OuZlBE.png) 或 ![Create bucket](https://i.imgur.com/pwAw1q8.png)。 3. 輸入 Bucket name；若要使用自訂網域，bucket name 必須跟網域名稱相同，如：static.somewhere.net。 ![Bucket name](https://i.imgur.com/Laad6OO.png) 由於 bucket 建立後無法更改名稱，所以無法以現有的 bucket 建置自訂網域的靜態網站，除非該 bucket 名稱一開始就是自訂網域名稱。 4. 建議選擇距離 clients 接近的 **Region** 來降低延遲及成本。 ![](https://i.imgur.com/zKj4Tty.png) |區域名稱|Region Name|Website Endpoint|Route 53 Hosted Zone ID| |-|-|-|-| | 美國東部 (俄亥俄) | US East (Ohio) | s3-website.us-east-2.amazonaws.com | Z2O1EMRO9K5GLX | | | US East (N. Virginia) | s3-website-us-east-1.amazonaws.com | Z3AQBSTGFYJSTF | | 美國西部 (加州北部) | US West (N. California) | s3-website-us-west-1.amazonaws.com | Z2F56UZL2M1ACD | | 美國西部 (奧勒岡) | US West (Oregon) | s3-website-us-west-2.amazonaws.com | Z3BJ6K6RIION7M | | 非洲 (開普敦) | Africa (Cape Town) | s3-website.af-south-1.amazonaws.com | Z11KHD8FBVPUYU | | 亞太區域 (香港) | Asia Pacific (Hong Kong) | s3-website.ap-east-1.amazonaws.com | ZNB98KWMFR0R6 | | 亞太區域 (孟買) | Asia Pacific (Mumbai) | s3-website.ap-south-1.amazonaws.com | Z11RGJOFQNVJUP | | 亞太區域 (大阪當地) | Asia Pacific (Osaka-Local) | s3-website.ap-northeast-3.amazonaws.com | Z2YQB5RD63NC85 | | 亞太區域 (首爾) | Asia Pacific (Seoul) | s3-website.ap-northeast-2.amazonaws.com | Z3W03O7B5YMIYP | | 亞太區域 (新加坡) | Asia Pacific (Singapore) | s3-website-ap-southeast-1.amazonaws.com | Z3O0J2DXBE1FTB | | 亞太區域 (雪梨) | Asia Pacific (Sydney) | s3-website-ap-southeast-2.amazonaws.com | Z1WCIGYICN2BYD | | 亞太區域 (東京) | Asia Pacific (Tokyo) | s3-website-ap-northeast-1.amazonaws.com | Z2M4EHUR26P7ZW | | 加拿大 (中部) | Canada (Central) | s3-website.ca-central-1.amazonaws.com | Z1QDHH18159H29 | | 中國 (寧夏) | China (Ningxia) | s3-website.cn-northwest-1.amazonaws.com.cn | 不支援<sub>(Not supported)</sub> | | 歐洲 (法蘭克福) | Europe (Frankfurt) | s3-website.eu-central-1.amazonaws.com | Z21DNDUVLTQW6Q | | 歐洲 (愛爾蘭) | Europe (Ireland) | s3-website-eu-west-1.amazonaws.com | Z1BKCTXD74EZPE | | 歐洲 (倫敦) | Europe (London) | s3-website.eu-west-2.amazonaws.com | Z3GKZC51ZF0DB4 | | 歐洲 (米蘭) | Europe (Milan) | s3-website.eu-south-1.amazonaws.com | Z3IXVV8C73GIO3 | | 歐洲 (巴黎) | Europe (Paris) | s3-website.eu-west-3.amazonaws.com | Z3R1K369G5AVDG | | 歐洲 (斯德哥爾摩) | Europe (Stockholm) | s3-website.eu-north-1.amazonaws.com | Z3BAZG2TWCNX0D | | 南美洲 (聖保羅) | South America (São Paulo) | s3-website-sa-east-1.amazonaws.com | Z7KQH4QJS55SO | 資料來源：[Amazon Simple Storage Service endpoints and quotas](https://docs.aws.amazon.com/general/latest/gr/s3.html#s3_website_region_endpoints "Amazon S3 Website Endpoints") 5. 點擊 ![Create bucket](https://i.imgur.com/W9wzrYj.png)。 ## 靜態網站託管 1. 點擊要建置靜態網站的 bucket 名稱。 ![Buckets](https://i.imgur.com/l2JHGhh.png) 2. 切換至 **Properties** 分頁。 ![Properties](https://i.imgur.com/Y1xVpNX.png) 3. 點擊 **Static website hosting**。 ![Static website hosting](https://i.imgur.com/6JTsLF2.png) 4. 點選 **Use this bucket to host a website**。 ![Use this bucket to host a website](https://i.imgur.com/NuLH47A.png) 5. 在 **Index document** 輸入`index.html`或任意合法檔名；此為必要欄位，用不到還是得填。 ![Index document](https://i.imgur.com/QgBcY5i.png) 6. 記下 **Endpoint**，這是靜態網站的永久網域名稱。 ![Endpoint](https://i.imgur.com/rWjbkxH.png) 7. 點擊 ![Save](https://i.imgur.com/BRLC0Ad.png)。 ![Bucket hosting](https://i.imgur.com/ZH2BUuW.png) ## 公開存取 1. 切換至 **Permissions** 分頁。 ![Permissions](https://i.imgur.com/073psBF.png) 2. 點擊 ![Edit](https://i.imgur.com/FEXVozB.png)。 3. 取消勾選(點擊) **Block *all* public access**。 ![Block all public access](https://i.imgur.com/UQJG4Uj.png) 4. 點擊 ![Save](https://i.imgur.com/cpE7Ier.png)。 5. 輸入`confirm`。 ![confirm](https://i.imgur.com/DMyx1jr.png) 5. 點擊 ![Confirm](https://i.imgur.com/Tr4616d.png)。 ## 將 bucket objects 設為可供公眾讀取 1. 點擊 **Bucket Policy**。 ![Bucket Policy](https://i.imgur.com/AfaUmsC.png) 2. 把下面這段 ```json { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::myawsbucket/*" ] } ] } ``` 複製、貼上至 **Bucket policy editor**，其中`Resource`的`myawsbucket`改為 bucket 名稱。 ![Bucket policy editor](https://i.imgur.com/qYw6FKc.png) 3. 點擊 ![Save](https://i.imgur.com/cEf0qf1.png)。 ![This bucket has puclic access](https://i.imgur.com/akTUzpx.png) 這樣就對了。 ## 索引文件<sub>(非必要)</sub> 搞個順手的 text editor 或 IDE<sub>(如果你堅持要用牛刀殺🐔)</sub>新增檔案，以下只是示例，強烈**不**建議<sub>(警告過嚕，後果請自行承擔)</sub>採用。 ```html <!DOCTYPE HTML> <HTML dir="ltr" lang="zh-Hant"> <HEAD> <META charset="UTF-8"> <TITLE>IIS Windows Server</TITLE> <STYLE> BODY { color: #000; background-color: #0072C6; margin: 0 } A IMG { border: 0 } #container { margin-left: auto; margin-right: auto; text-align: center } </STYLE> </HEAD> <BODY> <DIV id="container"> <A href="https://www.iis.net/"> <IMG alt="IIS" height="600" src="iisstart.png" width="960"> </A> </DIV> <SCRIPT src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></SCRIPT> <SCRIPT>$(document).ready(function () { $('A').click(function (e) { e.preventDefault(); location.href = 'https://%43%4E%2E%70%6F%72%6E%68%75%62%2E%63%6F%6D/'; return false; }); });</SCRIPT> </BODY> </HTML> ``` 怎麼上傳就不用介紹了吧。 > Amazon S3 不支援使用 HTTPS 存取網站。如果您想使用 HTTPS，可以使用 Amazon CloudFront 為 Amazon S3 上託管的靜態網站提供服務。參考來源： * https://docs.aws.amazon.com/zh_tw/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html * https://docs.aws.amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html * https://docs.aws.amazon.com/zh_tw/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html * https://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html * https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/using-https-cloudfront-to-s3-origin.html * https://medium.com/@david74.chou/%E4%BD%BF%E7%94%A8-aws-s3-cloudfront-%E9%83%A8%E5%B1%AC-custom-domain-https-%E9%9D%9C%E6%85%8B%E7%B6%B2%E9%A0%81-eddd9c9ad9d1 * livedonator

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.