---
# System prepended metadata

title: 以 Amazon S3 建置靜態網站
tags: [website, bucket, s3, aws, static]

---

# 以 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&#46;cn-northwest-1&#46;amazonaws&#46;com&#46;cn | 不支援<sub>(Not supported)</sub> |
| 歐洲 (法蘭克福) | Europe (Frankfurt) | s3-website&#46;eu-central-1&#46;amazonaws&#46;com | Z21DNDUVLTQW6Q |
| 歐洲 (愛爾蘭) | Europe (Ireland) | s3-website-eu-west-1&#46;amazonaws&#46;com | Z1BKCTXD74EZPE |
| 歐洲 (倫敦) | Europe (London) | s3-website&#46;eu-west-2&#46;amazonaws&#46;com | Z3GKZC51ZF0DB4 |
| 歐洲 (米蘭) | Europe (Milan) | s3-website&#46;eu-south-1&#46;amazonaws&#46;com | Z3IXVV8C73GIO3 |
| 歐洲 (巴黎) | Europe (Paris) | s3-website&#46;eu-west-3&#46;amazonaws&#46;com | Z3R1K369G5AVDG |
| 歐洲 (斯德哥爾摩) | Europe (Stockholm) | s3-website&#46;eu-north-1&#46;amazonaws&#46;com | Z3BAZG2TWCNX0D |
| 南美洲 (聖保羅) | South America (São Paulo) | s3-website-sa-east-1&#46;amazonaws&#46;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