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

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

下載完成有四個檔案，一個壓縮檔，並且壓縮檔內不包含其他壓縮檔。

:::

:::warning
## DynamoDB

| 示意圖 | 描述 |
| ------ | ----------- |
|  | create table |
|  | table name選擇article，partition key選擇articleId (所有人相同)|
| | create table |
:::

:::success
## S3

### Step1. 創建S3 bucket
| 示意圖 | 描述 |
| ------ | ----------- |
|  | 點擊S3進入 |
|  | create bucket |
|  | 選擇一個獨一無二的名字 |
|  | 關閉 Block all public access |
|  | create bucket |
:::

:::danger
## IAM權限設定
| 示意圖 | 描述 |
| ------ | ----------- |
|  | 搜尋並進入IAM |
|  | 進入Role |
|  | 點選Create Role |
|  | 選擇EC2，下一步 |
|  | 加入S3 Full Access |
|  | 加入DynamoDB Full Access |
|  | 設定Role name |

:::

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

### Step1. 設定Elastic Beanstalk環境
| 示意圖 | 描述 |
| ------ | ----------- |
|  | 搜尋beanstalk |
|  | create application |
|  | 取一個環境名稱 |
|  | Platform選擇Java與Corretto 17 on Linux 2|
|  | 選擇上傳程式碼，版本可以參考v0.0.1，選擇local file並上傳ZIP檔案(不需要解壓縮) |
|  | Next |

### Step2. 設定權限
| 示意圖 | 描述 |
| ------ | ----------- |
|  | 選擇Use an existing service role，roles選擇你剛才設定的Role，EC2 key選擇預設的，Instance Profile選擇相同的Role |
|  | 選擇預設的VPC，啟動public IP |
|  | 選擇所有subnets

### Step3. 設定環境變數
| 示意圖 | 描述 |
| ------ | ----------- |
|  | 到S3找到你剛剛創建的bucket name |
|  | 找到Environment properties，填入AWS_S3_BUCKET_NAME : 你的bucket name，以及 SERVER_PORT : 5000 |

:::

:::success
## S3

### Step2. 上傳網頁檔案
| 示意圖 | 描述 |
| ------ | ----------- |
|  | 進入S3 bucket |
|  | upload進入上傳介面，上傳四個檔案 |
|  | 選擇Properties |
|  | 在下方找到Static website hosting，點擊Edit |
|  | 選擇Enable，在下方輸入index.html，Save Change |
|  | 點擊下方網址，會看到403 Forbidden網頁 |

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

| 示意圖 | 描述 |
| ------ | ----------- |
|  | 選擇Permissions |
|  | 找到Bucket policy，點選Edit |
|  | 貼上下方程式碼，記得把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) | 描述 |
| ------ | ------ | ----------- |
|  使用Notepad |  使用TextEdit | 編輯index.html檔案 |
|  | | 回到Beanstalk |
|  | | 找到環境 |
|  | | 複製下Domain的網址 |
|  | | 取代掉PutYourAPIURLHere這一段文字 |
|  |  | 在前方加上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) | 描述 |
| ------ | ------ | ----------- |
|  | | 儲存檔案 |
|  | | 重新上傳index.html到S3 |

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

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

:::