Day 29 整合宝石：【Lab】建构三层式云端架构 (EC2+VPC+S3+RDS+IAM) (上)

(转眼间到最後两天，发现想谈及的主题谈不完，所以最後这两篇整合宝石的文章会特别长～，因为如果照之前的量切分的话，这两天会是五天的量，但那就超过 30 天了。)

我们最後一个宝石「整合宝石」：不论我们个别学习了多少个 AWS 服务，最重要的还是如何将其整合，并运用到实际工作上。因此本文将对 AWS 进行总专案实作演练，透过整合前面五大宝石，来建构起业界常见的「三层式云端架构」！

【Lab】建构三层式云端架构(上)(本文)：

• IAM 的前置设定与使用
• VPC 环境建置、资料库创建
• EC2 Instance 建立
• 资料库连结、资料库初始资料的设立
• Docker 应用程序的运用
• 前端服务器与後端服务器的连结、页面内容互动与修改

【Lab】建构三层式云端架构(下)：

• 档案控管
• 节省成本
• 备份还原
• 资源清理

---

那我们开始吧！

首先，以 Root user 登入，如下图：

在 AWS Management Console 页面搜寻 IAM 服务并进入，如下图：

建立 Policy

为了允许开发者去拥有他们所需要的开发权限，第一步要进入 Policies 页面(下图#1)，点击 Create policy (下图#2)进行建造 Policy 的动作。

建立 Policy —— VPC 与 EC2 的权限

第一个假设想赋予的是使用VPC相关功能的权限，而在 AWS 之中，VPC 相关功能被归类在 EC2 的 Service 底下，点击 Choose a service (下图#1)，搜寻 EC2 (下图#2)，再点下方 EC2 (下图#3)。

在 Actions 项目设定，勾选 All EC2 actions，如下图：

展开 Resources (下图#1)，选择 All resources (下图#2)，套用到所有 Resources。

到此便把 VPC 及 EC2 相关权限都加上去了，如下图：

建立 Policy —— RDS 权限

把 VPC 及 EC2 相关权限都加上去之後，缩小 EC2 的权限设定(下图#1)，再按 Add additional permissions (下图#2)，来新增 RDS 权限。

按下 Choose a service (下图#1)，搜寻列输入 RDS (下图#2)，点下面的 RDS (下图#3)。

在 Actions 项目下，勾选 All RDS actions，如下图：

打开 Resources (下图#1)，选 All resources (下图#2)，套用到所有的 Resources。

到此便把 RDS 相关权限加上去了，如下图：

建立 Policy —— S3 权限

RDS 权限新增完成後，缩小 RDS 的权限设定(下图#1)，点 Add additional permissions (下图#2)，以新增 S3 权限。

点击 Choose a service (下图#1)，查找 S3 (下图#2)，按下方的 S3 (下图#3)。

Actions 项目，勾选 All S3 actions，如下图：

展开 Resources (下图#1)，选 All resources (下图#2)，套用到所有的 Resources。

到此便把 S3 相关权限加上去了，如下图：

建立 Policy —— 给 EC2、RDS 使用的 IAM Role 权限

S3 权限新增完成後，缩小 S3 的权限设定(下图#1)。

到此便已把曾经介绍过的 VPC、EC2、RDS 及 S3 服务所需要的权限都加进此 Policy 中了，但实际上，在创建 RDS 跟 EC2 的时候，其实还需要用到 Role 相关权限。

所以接下来点击 Add additional permissions (下图#2)，把 Role 相关权限也加上去，

点击 Choose a service (下图#1)，搜寻 IAM 服务(下图#2)，按下方的 IAM (下图#3)。

由於 IAM 是一项需要安全性更高的服务，所以跟 EC2、RDS、S3 不一样，IAM 的 Actions项目并非全部套用，故此处筛选出 Role 相关的权限(下图#1)，再勾选 ListRoles (下图#2)、CreateRole (下图#3)及 PassRole (下图#4)的权限。

除了 Role 相关权限外，还需要新增另外一个叫作 List Instance Profiles (下图#1)的权限。

List Instance Profiles 权限是特别用於创建EC2的时候，EC2服务会在後面创建一个叫作 Instance Profile 的东西，来连结到 IAM Role，所以把 ListInstanceProfiles 打勾(下图#2)。

再来展开 Resources (下图#1)，选 All resources (下图#2)，套用到所有的 Resources，但事实上，我们真正需要套用到的是 EC2 跟 RDS 相关的 Resources。

到此便把 IAM 相关权限加上去了，如下图：

IAM 权限新增完成後，缩小 IAM 的权限设定(下图#1)。如此便完成 Policy 的建置，点击右下 Review policy 到下一步(下图#2)。

建立 Policy 名称(下图#1)，Description 同名称(下图#2)，点击页面右下 Create policy 创建 Policy(下图#3)。

建置好 Policy，在搜寻列搜寻刚才建立的 Policy 名称(下图#1)，即可看到 Policy 被成功创建了(下图#2)。

权限赋予 —— 创建 User

点击左方列表的 Users (下图#1)，按下 Add user (下图#2)，设定 User 建立。

建立 User 名称(下图#1)，勾选 Programmatic access (下图#2)给予程序相关权限，也勾选 AWS Management Console access (下图#3)赋予 Console 权限。

再来点选 Custom password (下图#4)帮忙建立密码，不勾 User must create a new password at next sign-in (下图#4)，这样 User 就不需要再设定新的密码，最後点击 Next: Permissions 下一步(下图#6)。

略过 Permissions 设定，点击 New Tags 下一步(下图#1)。

跳过 Tags 设定，点击 Next: Review (下图#1)，进到下一步。

Review 确认後，点击 Create user (下图#1)建立 User。

点击 Close 关闭(下图#1)。

即完成第一个 User 建立，如下图：

再来创建第二个 User，点击 Add user，如下图：

建立 User 名称(下图#1)，勾选 Programmatic access (下图#2)给予程序相关权限，也勾选 AWS Management Console access (下图#3)赋予 Console 权限。

再来点选 Custom password (下图#4)帮忙建立密码，不勾 User must create a new password at next sign-in (下图#4)，这样 User 就不需要再设定新的密码，最後点击 Next: Permissions 下一步(下图#6)。

略过 Permissions 设定，点击 New Tags 下一步(下图#1)。

跳过 Tags 设定，点击 Next: Review (下图#1)，进到下一步。

Review 确认後，点击 Create user (下图#1)建立 User。

点击 Close 关闭(下图#1)。

即完成第二个 User 建立，如下图：

权限赋予 —— Group 建立

从左方列切换至 Groups 介面(下图#1)，点击 Create New Group (下图#2)创建 Group。

建立 Group 名称(下图#1)，此 Group 是为开发人员创造的，按下 Next Step 进到下一步(下图#2)。

搜寻刚才建立的 Policy (下图#1)，勾选 Policy (下图#2)，点击 Next Step 下一步(下图#3)。

Review 确认後，点击 Create Group 创建 Group (下图#1)。

Group 即被成功建立，如下图：

权限赋予 —— 加入 User 到 Group 中

点进 Group 页面(下图#1)。

点击 Users 下方的 Add Users to Group (下图#1)，来往 Group 中加入 User。

选择要加入的 User (下图#1)，点击 Add Users 加入到 Group 里面(下图#2)。

下方切换至 Permissions (下图#1)，就会看到加入此 Group 中所有的 IAM User，拥有先前创立的 Policy 赋予的权限(下图#2)。

Role 建立

稍後的实作演练中，将需要一台 EC2 Instance 去跟 S3 沟通，所以要先把 Role 建立起来。

左方列表切换至 Roles (下图#1)，点击 Create role (下图#2)，来开始建立 Role。

选择 EC2 服务(下图#1)，按 Next: Permissions 下一步(下图#2)。

搜寻列输入 S3 (下图#1)，勾选下方 AmazonS3FullAccess (下图#2)，点击右下 Next: Tags (下图#3)。

跳过 Tags 设定，点击 Next: Review (下图#1)。

建立 Role 名称(下图#1)，Description 叙述与名称相同(下图#2)，按下 Create role 完成 Role 的建立(下图#3)，

Role 建立後，在搜寻列搜寻刚才建立的 Role 名称(下图#1)，即可看到 Role 成功建立(下图#2)。

IAM User 登入

到此便完成 IAM 的前置设定，接着点击页首的 Account 名(下图#1)，按下方 Sign Out 登出(下图#2)。

跳转页面後，点进 Log back in (下图#1)。

这次不用 Root user 登入，而是点击 Sign in to a different account，用另一个 Account 登入，如下图：

选择 IAM user (下图#1)，键入 Account Alias (下图#2)，点击 Next 下一步(下图#3)。

输入先前创建的 IAM user name (下图#1)，键入密码(下图#2)，再点击 Sign in 登入(下图#3)。

VPC 环境建置

在 AWS Management Console 页面，搜寻 VPC (下图#1)，点进 VPC (下图#2)。

VPC 环境建置 —— VPC 创建

左方列表切换至 Your VPCs (下图#1)，按右页面右上角的 Create VPC (下图#2)。

创建 VPC 名称(下图#1)，给予 IP 范围(下图#2) ，点击页面右下方的 Create VPC 建立 VPC(下图#3)，。

即会跳转到建立好的 VPC 页面，如下图：

VPC 环境建置 —— Public Subnet 的建立

VPC 创建完毕，切换至 Subnets (下图#1)，按下 Create subnet (下图#2)，来进行建立 Subnet 的动作。

建立 Public Subnet 的名称(下图#1)，选择先前所建的 VPC (下图#2)，放进想放的 Availability Zone (下图#3)，给予 IP 范围 (下图#4)，点击 Create (下图#5)，建立 Public Subnet。

点击 Close 关闭(下图#1)。

即会看到 Public Subnet 被成功建立，如下图：

VPC 环境建置 —— 第一个 Private Subnet 的建立

点击 Create subnet (下图#1)，创建第一个 Private Subnet。

建立 Private Subnet 的名称(下图#1)，选择先前所建的 VPC (下图#2)，放进与 Public Subnet 不同的 Availability Zone (下图#3)，给予 IP 范围 (下图#4)，点击 Create (下图#5)，建立 Private Subnet。

按下 Close 关闭(下图#1)。

即会看到第一个 Private Subnet 被成功建立，如下图：

VPC 环境建置 —— 第二个 Private subnet 的创建

按下 Create subnet (下图#1)，创建第二个 Private subnet 。

建立 Private subnet 的名称(下图#1)，选择先前所建的 VPC (下图#2)，放到与 Public Subnet 跟其它 Private subnet 不同位置的 Availability Zone (下图#3)，给予 IP 范围 (下图#4)，点击 Create (下图#5)，建立 Private subnet。

点 Close 关闭(下图#1)。

即可看到第二个 Private Subnet 被成功建立，如下图：

VPC 环境建置 —— IGW 连接

所谓的Public Subnet，有一个最重要的要素就是 Public Subnet 的 Route Table 要能够连到 IGW。

点击左方列表 Internet Gateways (下图#1)，按下 Create internet gateway 创造一个 Internet Gateway (下图#2)。

建立 Internet Gateway 名称(下图#1)，点击 Create internet gateway 建立 Internet Gateway (下图#2)。

Internet Gateway 建立完毕後，点开右上 Actions 选单(下图#1)，按下 Attach to VPC 设定连接 VPC (下图#2)。

进到 Attach to VPC 页面，选择要连接的 VPC (下图#1)，按下 Attach internet gateway (下图#2)，完成连接 IGW 的动作。

即会跳转到 VPC 成功连结 IGW 的页面，如下图：

VPC 环境建置 —— 编辑 Route

连接 IGW 完毕後，点进左列表 Subnets (下图#1)，勾选右方页面的 Public 的 Subnet (下图#2)，下方切换至 Route Table (下图#3)，点进下方所示的 Route Table (下图#4)，来进入 Public Subnet 的 Route table 介面。

到 Route Table 介面後，下方切换至 Routes (下图#1)，按下 Edit routes 编辑(下图#2)。

预设的 Route (下图#1)可以让我们跟其它 Subnet 互通，这边保持原样。

按下 Add route (下图#2)，Destination 输入 0.0.0.0/0 (下图#3)，让所有要到 Internet 的请求，Target 下一站都要先去 Internet Gateway (下图#4)，并选择刚才建造的 Internet Gateway (下图#5)，点击页面右下的 Save routes 储存(下图#6)。

按 Close 关闭(下图#1)。

如此，我们便拥有一个 Public subnet (下图#1)，之後只要 Instance 也有 Public IP 的话，便可以与 Internet 沟通，到此便完成了 VPC 环境的建立。

建立资料库 —— Security Group 建造

VPC 环境的建立完毕後，再来进行建立资料库的动作。

首先，点击左方列表下方的 Security Groups (下图#1)，点击右页面右上角的 Create security group (下图#2)，建造一个新的 Security Group。

建立 Security Group 名称(下图#1)，Description 叙述同名称(下图#2)，选择先前建造的 VPC (下图#3)。

点击 Add rule 新增一个 Rule (下图#1)，Type 选择 MYSQL/Aurora 让大家可以去连(下图#2)，Source 来源 IP 选择全部(下图#3)，最後下拉到页尾，按右下 Create security group 建立 SG (下图#4)。

完成之後就有 Security Group 可以使用，如下图：

建立资料库 —— Subnet Group 建造

Security Group 建立完毕後，展开页首左上角的 Services (下图#1)，搜寻输入 rds (下图#2)，新分页开启 RDS (下图#3)。

到达 RDS 介面後，点击左方列表的 Subnet groups (下图#1)，按下右边页面右上角的 Create DB Subnet Group (下图#2)，设定建造 Subnet Group。

建立 Subnet Group 名称(下图#1)，叙述与名称相同(下图#2)，选择先前建造的 VPC (下图#3)。

Availability Zones 选择 Private Subnet 所放置的 Availability Zone (下图#1)，Subnets 选择加入 Availability Zone 内的 Subnet (下图#2)。

也就是说目前要加入到 Subnet Group 里的 Subnet 都是 Private Subnet (下图#3)，而 Private Subnet 是没有对 Internet 的连线。最後点击右下的 Create 建立 Subnet Group(下图#4)。

如此 Subnet Group 便被成功创建(下图#1)。

建立资料库

点击左方列表的 Databases (下图#1)，按下右边页面右上的 Create database (下图#2)，设定建立资料库。

点选 Standard Create 选择一般的创造流程，如下图：

Engine type 一样选择 MySQL，如下图：

Templates 选择 Production，如下图：

建立 DB instance 资料库名称(下图#1)，设定 Master username 及密码(下图#2)。

DB instance size 决定底层的 EC2 Instance 要用到多好，选择预设的 Standard classes 即可，如下图：

Storage 储存资源部分，底层 EBS Volume 选择使用更好的 Provisioned IOPS ( SSD ) (下图#1)，起始储存空间 ( Allocated storage ) 给予 100 GiB (下图#2)，Provisioned IOPS 给 1000 GiB (下图#3)，Storage autoscaling 给 1000 GiB (下图#4)，使能够从初始空间的 100 GiB (下图#2)，一路根据需求上升到 1000 GiB (下图#4)。

选择使用 Multi-AZ (下图#1)，使能够有一台 Master 和另一台 Standby 在不同的 AZ 之中，以拥有更高的 Availability。

选择 VPC (下图#1)，展开 Additional connectivity configuration (下图#2)，选择 Subnet group (下图#3)，Public access 点选 No (下图#4)，把 Existing VPC security group 下的 default 点叉叉取消(下图#5)，再选择先前新增的 Security Group (下图#6)，Database port 则维持 3306 (下图#7)。

Database authentication 选择一般密码验证方式即可，如下图：

展开 Additional configuration (下图#1)，虽然有警示符号(下图#3)表示我们没有权限列出表来(下图#2)，但没关系，设定皆照预设即可。

Monitoring Role 的 Role (下图#1)指的就是 IAM Role，也就是为什麽先前设定 IAM Policy 的时候，要让当下登入帐号的开发者拥有创建新 IAM Role 的权限；而下方灰字(下图#2)意思是，当我们去建造资料库的时候，它会帮忙建造一个 IAM Role 出来。

最後，拉到页尾，点击右下 Create database，创建资料库，如下图：

等待大约 20 分钟(下图#1)，资料库即会创建完毕(下图#2)。

建立 EC2 Instance

接下来，建立 EC2 Instance 以连进此资料库。

展开页首左方的 Services (下图#1)，在搜寻列输入 EC2 (下图#2)，新分页开启下方 EC2 (下图#3)。

点进左方列表的 Isntances (下图#1)，再点击右方页面的 Launch instance (下图#2)，设定建立 EC2 Isntance。

按下第一个的 Select (下图#1)。

Instance Type 预设即可，点击右下 Next: Configure Instance Details 下一步，如下图：

Network 选择先前创建的 VPC (下图#1)，Subnet 选择 Public Subnet (下图#2)，Public IP 选 Enable (下图#3)，点击右下 Next: Add Storage 下一步(下图#4)。

Storage 储存资源预设即可，点击右下 Next: Add Tags 下一步(下图#1)。

略过 Tag 设定，点击右下 Next: Configure Security Group 下一步(下图#1)。

按下 Add Rule (下图#1)，开启一个为 8080 的 Port (下图#2)，对所有 IP 来源都开放(下图#3)，最後点击 Review and Launch (下图#4)下一步。

直接点击右下 Launch，如下图：

选择创建一个 Key Pair (下图#1)，建立 Key Pair 名称(下图#2)，按下 Download Key Pair 下载(下图#3)，再点击 Launch Instances。

点击 View Instance，如下图：

连结後端 EC2 Instance

这台 Instance 将成为我们後端的 EC2 Instance，而等待 Instance 建立的过程中(下图#1)，可以先建立名称(下图#2)。

待 Instance 建立完成(下图#1)，点击上方 Connect (下图#2)。

复制指令，如下图：

开启 Terminal，先 cd 到下载 Key Pair 的地方(下图#1)，再贴上刚才复制的指令(下图#2)，修改 Key Pair 的权限。

再回到 EC2 页面，复制指令，如下图：

回到 Terminal，贴上刚才复制的指令(下图#1)，输入 yes (下图#2)，即能进入 EC2 Instance (下图#3)。

连接资料库

再来要透过这台 EC2 连进去，在 Primary Subnet 的资料库。

首先安装 MySQL，如下图：

等待 MySQL 安装完毕(下图#1)：

回到 RDS 介面，复制 Endpoint，如下图：

切换到 Terminal，输入 mysql -h 加 Endpoint (下图#1)；-u 加 Username (下图#)；而 -p 指以一般密码方式登入(下图#3)，输入密码(下图#4)，即可连进资料库(下图#5)。

创建初始资料 —— Create & Use Database

输入 create database Database 名称;，创建 Database (下图#1)；输入 use Database 名称;，进入 Database (下图#2)。

创建初始资料 —— Create Table

输入 create table Table 名称 ( 栏位名称 资料型态 );，创建 Table，栏位跟栏位间则以 "," 分开，如下图：

创建初始资料 —— Insert Into Table

输入 insert into Table 名称 ( 栏位名称 ) VALUES ( 栏位值 );，往 Table 中插入资料，栏位跟栏位间以 "," 分开，如下图：

创建初始资料 —— Select From Table

输入 select * From Table 名称;，查看 Table 内容，如下图：

到此，便完成了资料库初始资料的建立。输入 exit (下图#1)，离开资料库，再输入 clear (下图#2)，清空画面以保後续画面整洁。

後端服务器与 Docker

再来要建立我们後端的服务器，这边将会使用 Docker 这项技术，来让我们专注在云端的服务功能上，而不是单一的程序码的开发模式上。所以这边一切跟 Docker 相关的东西，都代表了一个意义，它代表了我们的应用程序。

首先，下载 Git，如下图：

等待 Git 下载完毕(下图#1)。

再来下载 Docker，如下图：

等待 Docker 下载完毕(下图#1)。

下载完毕後，输入 sudo service docker start 指令(下图#1)，即开启 Docker 服务器(下图#2)。

透过指令(下图#1)，下载 docker-compose (下图#2)。

透过 chmod (下图#1)改变 docker-compose (下图#2)指令的权限。

建立指令连结，方便未来使用，如下图：

到此，便完成此後端服务器所需要的套件们。

後端服务器与参数设定

接下来，利用 git clone (下图#1)下载 Project (下图#2)。

输入 ls 看到目录(下图#1)， cd 进目录(下图#2)。

进到目录後，再输入 ls (下图#1)，可以看到多个档案目录，而这次要到的是代表後端服务器的 app_new (下图#2)，cd 进去 app_new (下图#3)。

进到 app_new 之後，输入 ls (下图#1)，可以看到一个资料夹(下图#2)跟一个档案(下图#3)，app是我们的後端服务器所需要的东西，docker-compose.yml 则代表所有一切 Docker 所需要设定的东西。

再输入 ls -a (下图#1)，打开隐藏的档案，接下来输入 sudo vi .env (下图#2)，来修改 .env 档案，顺便看一下里面有什麽。

进到档案後，会看到内容有 4 个参数，USER 对应到所建立的 User 名称(下图#1)；PASSWORD 对应到所建立的密码(下图#2)。在正式环境下当然不能这麽用，但为了 DEMO，所以直接先放在这边。

DATABASE (下图#3)则是对应到刚刚 EC2 连到资料库之後，所建立的 Create Database 的名称，而最重要的是 DB_HOST_IP (下图#4)接下来要去做更新。

打上小写 a，进入编辑模式，如下图：

回到 RDS 页面，复制 Endpoint，如下图：

回到 Terminal 贴上(下图#1)，再按 ESC，离开编辑模式(下图#2)。

打上冒号，看到下方出现後，再打 w 写入 q 退出，如下图：

输入 cat .env 检查(下图#1)，可以看到参数列表都改好了(下图#2)。

无论是用任何语言开发，Java、Python 或者是 JavaScript，应用程序都会有某个地方需要去设定跟资料库的连线方式。也就是说，这些参数都会在某个网页框架之中，找到相对应的位置。

完成参数设定後，输入 docker-compose 指令，打包程序码，如下图：

等待成功打包(下图#1)。

打包完成之後，输入 sudo docker-compose up，启动後端应用程序，如下图：

等待後端应用程序启动完毕，如下图：

回到 EC2 介面，复制後端服务器这台 EC2 的 Public ID，如下图：

开启新分页，贴上 Public ID，後面配上 Security Group 所开放的 Port，也就是输入 :8080，再打上 /demo/all，这是这个 Public ID 的後端应用程序对外开放的一个 API，Enter 进入後便能看到刚刚在资料库所建立的资料，如下图：

到此，便证实後端应用程序已经成功跟资料库连结。

创建前端 EC2 Instance

回到EC2介面，点击 Launch Instance，如下图：

按下第一个的 Select (下图#1)。

Instance Type 预设即可，点击右下 Next: Configure Instance Details 下一步，如下图：

Network 选择先前创建的 VPC (下图#1)，Subnet 选择 Public Subnet (下图#2)，Public IP 选 Enable (下图#3)，特别不一样的是 IAM role 要选择先前建立的 Role (下图#4)，让这台 EC2 Instance 有权限去与 S3 Service 互通，再点击右下 Next: Add Storage 下一步(下图#5)。

Storage 储存资源预设即可，点击右下 Next: Add Tags 下一步(下图#1)。

略过 Tag 设定，点击右下 Next: Configure Security Group 下一步(下图#1)。

按下 Add Rule (下图#1)，前端开放的 Port 为 3000 Port (下图#2)，对所有 IP 来源都开放(下图#3)，最後点击 Review and Launch (下图#4)下一步。

直接点击右下 Launch，如下图：

选择 Key Pair (下图#1)，使用先前的创建过的 Key Pair (下图#2)，打勾(下图#3)，再点击 Launch Instances (下图#4)。

点击 View Instance，如下图：

连结前端 EC2 Instance

等待 Instance 建立的过程中(下图#1)，可以先建立名称(下图#2)。

待 Instance 建立完成(下图#1)，点击上方 Connect (下图#2)。

直接复制 ssh 指令，如下图：

为了将後端与前端区别开来，开启另一新的 Terminal，cd 到下载 Key Pair 的地方(下图#1)，再贴上刚才复制的指令(下图#2)，输入 yes (下图#3)，连接 EC2 (下图#4)。

前端服务器与 Docker

接着透过类似的步骤，利用 Docker 把前端服务器给启起来。

首先，下载 Git，如下图：

等待 Git 下载完毕(下图#1)。

下载 Docker，如下图：

等待 Docker 下载完毕(下图#1)。

利用指令(下图#1)，启动 Docker(下图#2)。

利用指令(下图#1)，下载 docker-compose(下图#2)。

修改 docker-compose 指令权限，如下图：

建立 docker-compose 指令连结，如下图：

到此，完成前端服务器的套件下载。

前端服务器与参数设定

利用 git clone 指令(下图#1)，下载专案(下图#2)。

cd 进第一层目录(下图#1)，输入 ls 查看(下图#2)，可以看到代表前端应用程序的 web_new 目录 (下图#3)。

cd 进入 web_new 目录(下图#1)，输入 ls (下图#2)，可以看到 docker-compose.yml，代表的是 Docker 所需要的设定档；web 则是代表前端应用程序所需要的东西。

键入 ls -a 打开隐藏的档案(下图#1)，输入 sudo vi .env 进入修改(下图#2)。

回到 EC2 介面，前端要连到後端的 API，所以需要後端的 Public IP，勾选後端服务器(下图#1)，复制其 Public IP (下图#2)。

回到 Terminal，此处 IP 代表後端服务器的位置(下图#1)，按小写 a 进入编辑模式，将刚才复制的後端服务器 Public IP 贴上替代(下图#2)，按 ESC，输入 :wq (下图#3)，离开 .env。

输入 cat .env 检查内容(下图#1)，可以看到参数已更新到最新的後端 EC2 Public IP (下图#2)。

接下来，利用 docker-compose build 打包前端应用程序，如下图：

等待前端应用程序打包完成(下图#1)。

透过 docker-compose up 启动前端应用程序，如下图：

等待前端应用程序启动完成(下图#1)。

连结前端首页

启动前端应用程序後，想尝试连进首页。

先回到 EC2 介面，选择前端服务器(下图#1)，复制前端页面的 Public IP (下图#2)。

开启新分页，贴上前端 Public IP (下图#1)，配上 Security Group 开放的 3000 Port，进入此位址便能看到前端页面。而此处呼叫了一个 List API 跟後端服务器互动，就能看到最一开始在资料库所建构的那一笔资料(下图#2)。

同样的，也可以透过 Create API 来创建一个新的 User。假设创建 sam003，点击 Add user (下图#1)，就能看到 sam003 的加入(下图#2)。

而回到後端服务器，页面上 1 笔资料的状态(下图#1)，经过重新整理页面，即可看到 API 变成回传 2 笔资料的状态(下图#2)。

到此，前端页面跟後端页面透过 API 交流，後端页面跟资料库建立连线，基本上便完成了一个 3 层式架构的部署。

EC2 Instance 透过 IAM Role 与 S3 Service 互动之权限

回到前端页面，发现首页的照片 cover photo 没有显示出来(下图#1)，点击浏览器右上角(下图#2)，往下找到 More Tools (下图#3)，按 Developer Tools (下图#4)，把开发者工具打开。

点击开发者工具左上指标(下图#1)，点看图片的 HTML (下图#2)，接下来要做的是，把封面照片放到 S3 上面，并把这边的网址改成图片的位址(下图#3)。

回到前端 Terminal，利用 Crtl + C 终止前端应用程序的启动，如下图：

在创建前端 EC2 的时候，有给它一个 IAM Role，所以可以用这台 EC2 跟 S3 Service 进行交流。

利用 s3api create-bucket 创建 Bucket (下图#1)，给予名称(下图#2)，设置 Region 到 EC2 所在地区(下图#3)，根据文件需求加上设定(下图#4)，并且 LocationConstraint 放上同一个地区(下图#5)。

创建 Bucket 後，透过 list-buckets 查看(下图#1)，即可看到刚才创建的 Bucket (下图#2)。

在专案里面，其实已存有封面图片。

打上 ls 看到 web 目录底下的 public 目录(下图#1)，可以看到图片(下图#2)，选择其中一个档案放到 S3 的 Bucket 里面。

输入 aws s3 cp (下图#1)，cp 是 Copy 的意思。加上档案位址(下图#2)，配上刚才建立的 Bucket 名称(下图#3)。

在 aws s3 利用 ls 查看刚才创建的 Bucket (下图#1)，即可看到成功放上图片到 Bucket (下图#2)。

这些步骤所要展示的是，这台 EC2 Instance 透过 IAM Role 获得了去跟 S3 Service 互动的权限。

开放 S3 档案权限

回到 EC2 介面，点开左上角 Service (下图#1)，搜寻列输入 S3 (下图#2)，新分页开启 S3 (下图#3)。

可看到刚才在 EC2 Instance 建立的 Bucket 出现在 S3，点击进入 Bucket，如下图：

Bucket 中有刚才放上的档案(下图#1)，接下来要让这个档案可以对 Public 开放。

首先检查 Bucket 层级的 Permissions (下图#1)，确认 Block all public access 是 off 的状态(下图#2)。

完成後，我们就点进图片档(下图#2)。

再来看到 Permissions (下图#1)，打勾 Public access (下图#2)。

开放 Read object 读的权限(下图#3)，按下 Save (下图#4)

回到 Overview (下图#1)，复制 Object URL 连结(下图#2)。

修改页面

回到 Terminal，接下来对前端页面进行修改。

打上 sudo vi 配上前端页面档案，如下图：

按 ↓ 一路往下找到图片的程序码，如下图：

按小写 a 进入编辑模式(下图#1)，替代为先前复制的 Object URL (下图#2)。

按 ESC，输入 :wq 写入并离开(下图#1)。

完成修改後，再一次利用 docker-compose build 打包前端应用程序，如下图：

等待前端应用程序打包完成(下图#1)。

透过 docker-compose up 启动前端应用程序，如下图：

等待前端应用程序的启动，如下图：

前端应用程序启动之後，回到前端首页重新整理，即可看到成功在前端页面拿到放在 S3 上的图片，如下图：

结语

以上经由 IAM 的前置设定与使用、VPC 环境建置、资料库创建、EC2 Instance 建立、资料库连结、资料库初始资料的设立、Docker 应用程序的运用、前端服务器与後端服务器的连结、页面内容互动与修改的实作，得到了与 AWS 相关的实务经验。

What's Next?

那麽明天，我们将接着看到「整合宝石：【Lab】建构三层式云端架构(下)」！