---
# System prepended metadata

title: 1208ws

---

# 1208ws - 打造個人品牌-利用 Beanstalk 部署你的個人部落格


:::danger
### Files for this workshop :
https://drive.google.com/drive/folders/1nzkOMRaKQ6cdg2y8kNDEUgCsLDdpnh4C?usp=sharing

![image](https://hackmd.io/_uploads/S1kjozAHp.png)
下載完成有四個檔案，一個壓縮檔，並且壓縮檔內不包含其他壓縮檔。

:::

:::warning
## DynamoDB

| 示意圖 | 描述 |
| ------ | ----------- |
| ![image](https://hackmd.io/_uploads/S1ygQ2tBp.png) | create table |
| ![image](https://hackmd.io/_uploads/rJNEQnFHT.png) | table name選擇article，partition key選擇articleId (所有人相同)|
|![image](https://hackmd.io/_uploads/rJ4wXntHa.png) | create table |
:::

:::success
## S3

### Step1. 創建S3 bucket
| 示意圖 | 描述 |
| ------ | ----------- |
| ![image](https://hackmd.io/_uploads/HJKRERLHT.png) | 點擊S3進入 |
| ![image](https://hackmd.io/_uploads/HyrirRLSa.png) | create bucket |
| ![image](https://hackmd.io/_uploads/BJQyvRLS6.png) | 選擇一個獨一無二的名字 |
| ![image](https://hackmd.io/_uploads/HJ8qD0IBp.png) | 關閉 Block all public access |
| ![image](https://hackmd.io/_uploads/S1VEWkPB6.png) | create bucket |
:::

:::danger
## IAM權限設定
| 示意圖 | 描述 |
| ------ | ----------- |
| ![image](https://hackmd.io/_uploads/Syvxnb0r6.png) | 搜尋並進入IAM |
| ![image](https://hackmd.io/_uploads/BynMn-ABp.png) | 進入Role |
| ![image](https://hackmd.io/_uploads/SJMr3bRHT.png) | 點選Create Role |
| ![image](https://hackmd.io/_uploads/HJ6keaFHp.png) | 選擇EC2，下一步 |
| ![image](https://hackmd.io/_uploads/rkeVxTFBT.png) | 加入S3 Full Access |
| ![image](https://hackmd.io/_uploads/H1ArlpYBT.png) | 加入DynamoDB Full Access |
| ![image](https://hackmd.io/_uploads/Sysdg6trT.png) | 設定Role name |

:::

:::info
## Elastic Beanstalk架設後端

### Step1. 設定Elastic Beanstalk環境
| 示意圖 | 描述 |
| ------ | ----------- |
| ![image](https://hackmd.io/_uploads/SkjL_oYr6.png) | 搜尋beanstalk |
| ![image](https://hackmd.io/_uploads/rkk5_oFBa.png) | create application |
| ![image](https://hackmd.io/_uploads/SyCQFitST.png) | 取一個環境名稱 |
| ![image](https://hackmd.io/_uploads/SJqDFlcra.png) | Platform選擇Java與Corretto 17 on Linux 2|
| ![image](https://hackmd.io/_uploads/HkkBC23S6.png) | 選擇上傳程式碼，版本可以參考v0.0.1，選擇local file並上傳ZIP檔案(不需要解壓縮) |
| ![image](https://hackmd.io/_uploads/BJSJjiKS6.png) | Next |

### Step2. 設定權限
| 示意圖 | 描述 |
| ------ | ----------- |
| ![image](https://hackmd.io/_uploads/HkeFAgcr6.png) | 選擇Use an existing service role，roles選擇你剛才設定的Role，EC2 key選擇預設的，Instance Profile選擇相同的Role |
| ![image](https://hackmd.io/_uploads/rkRBCKjS6.png) | 選擇預設的VPC，啟動public IP |
| ![image](https://hackmd.io/_uploads/BkTbAKorT.png) | 選擇所有subnets

### Step3. 設定環境變數
| 示意圖 | 描述 |
| ------ | ----------- |
| ![image](https://hackmd.io/_uploads/r1snnRtHp.png) | 到S3找到你剛剛創建的bucket name |
| ![image](https://hackmd.io/_uploads/r1HH2gcrp.png) | 找到Environment properties，填入AWS_S3_BUCKET_NAME : 你的bucket name，以及 SERVER_PORT : 5000 |

:::

:::success
## S3

### Step2. 上傳網頁檔案
| 示意圖 | 描述 |
| ------ | ----------- |
| ![image](https://hackmd.io/_uploads/BJAkM1vSp.png) | 進入S3 bucket |
| ![image](https://hackmd.io/_uploads/B15HE1wBT.png) | upload進入上傳介面，上傳四個檔案 |
| ![image](https://hackmd.io/_uploads/By0UH1vB6.png) | 選擇Properties |
| ![image](https://hackmd.io/_uploads/SJouSywrp.png) | 在下方找到Static website hosting，點擊Edit |
| ![image](https://hackmd.io/_uploads/SyNeLJDr6.png) | 選擇Enable，在下方輸入index.html，Save Change |
| ![image](https://hackmd.io/_uploads/Bk2wLkPrT.png) | 點擊下方網址，會看到403 Forbidden網頁 |

### Step3. 修改儲存貯體政策

| 示意圖 | 描述 |
| ------ | ----------- |
| ![image](https://hackmd.io/_uploads/HkqWPywHa.png) | 選擇Permissions |
| ![image](https://hackmd.io/_uploads/Sk8NvkwrT.png) | 找到Bucket policy，點選Edit |
| ![image](https://hackmd.io/_uploads/rkkiwyPH6.png) | 貼上下方程式碼，記得把Bucket-Name改成你的bucket的名稱，儲存 |

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}
```
:::danger
### 注意:
只要取代Bucket-Name，後面的/\*要留著，取代完應該類似：
"arn:aws:s3:::s3-toby-ws-1207/*"
:::
::: success

### Step4. 修改index.html檔案
| 示意圖(Windows) | 示意圖(Mac) | 描述 |
| ------ | ------ | ----------- |
| ![image](https://hackmd.io/_uploads/Sy-CAZAra.png) 使用Notepad | ![Screenshot 2023-12-06 at 11.49.45 PM](https://hackmd.io/_uploads/B1UVdGRBT.png) 使用TextEdit | 編輯index.html檔案 |
| ![image](https://hackmd.io/_uploads/S1lskzCHT.png) | | 回到Beanstalk |
| ![image](https://hackmd.io/_uploads/H1nT1zAB6.png) | | 找到環境 |
| ![image](https://hackmd.io/_uploads/SkMGxzCSp.png) | | 複製下Domain的網址 |
| ![image](https://hackmd.io/_uploads/ryWIlG0rT.png) | | 取代掉PutYourAPIURLHere這一段文字 |
| ![image](https://hackmd.io/_uploads/S1oixzRra.png) | ![Screenshot 2023-12-06 at 11.55.15 PM](https://hackmd.io/_uploads/HkOKtG0rp.png) | 在前方加上http:// |
```
例如複製的網址為:Beanstalk-ws-toby-1206-env.eba-2ct5ms6t.us-east-1.elasticbeanstalk.com
修改為:http://Beanstalk-ws-toby-1206-env.eba-2ct5ms6t.us-east-1.elasticbeanstalk.com
```

| 示意圖(Windows) | 示意圖(Mac) | 描述 |
| ------ | ------ | ----------- |
| ![image](https://hackmd.io/_uploads/rkfdZM0Ba.png) |![Screenshot 2023-12-06 at 11.56.38 PM](https://hackmd.io/_uploads/Bk10KMCHp.png) | 儲存檔案 |
| ![image](https://hackmd.io/_uploads/H1ScmzCSp.png) | | 重新上傳index.html到S3 |


### Step5. 完成
| 示意圖 | 描述 |
| ------ | ----------- |
| ![image](https://hackmd.io/_uploads/S1hMKkDB6.png) | 回到剛才的網站，應該可以看到Blog (第一次進來沒有內容) |
| ![image](https://hackmd.io/_uploads/Hy2YkZcSa.png) | 可以上傳你的部落格內容，稍等一段時間，上傳完成後網頁會自動重新整理。 |

* **如果重新整理後還是沒有看到內容，可以換個瀏覽器試試，或是使用無痕模式**(可能被擴充套件Ex. adblock阻擋)。

:::
