今回やりたいこと
タイトルに書いてある通りなのですが、AWSでインフラを構築し、個人学習で作成したアプリを公開するまでの流れを整理いたしました。本記事で扱うことを下記に示します。
- CloudFront + S3 + Route 53 でWebページを公開する
- プライベートサブネット内にECS on EC2を作成し、APIサーバとする
AWSアカウントが登録されていることを前提とし、各サービスの概要については省略いたします。
構成図
-
フロントエンド
Vue.jsで作成, ビルドしたWebページをS3にアップロードし、CloudFront によってページを公開します。ACMによる証明書の発行でHTTPSリクエストを受け付けるほか、Route 53 によってドメイン名によるアクセスも可能にします。 -
バックエンド
ECS on EC2 をプライベートサブネットに構築し、ALBからHTTP通信を受信できるように設定します。使用するコンテナはeclipse-temurinをベースイメージにし、個人学習で作成したSpring Boot Restful API を構築します。DBサーバーとして、最近リリースされたAurora DSQL を採用しています。
料金
ドメイン購入費を除いた、AWSのサービス利用料金の概算を、東京リージョン(ap-northeast-1)をベースに整理しました。
Route 53
- ホストゾーンあたり0.50 USD/月
- Webページ用とAPI用の2つのホストゾーンを作成するので、1.00 USD/月
VPC
- NATゲートウェイ
- 稼働料金: 0.062 USD/時
- データ処理料金: 0.062 USD/GB
EC2
- t3.micro: 0.0136 USD/時
- EBS(30GB): 2.88 USD/月
- ロードバランサー
- 稼働時間: 0.0243 USD/時
- LCU時間: 0.008 USD/時
Autora DSQL
- DPU: 10.00 USD/100 万DPU(分散処理単位)
- ストレージ: 1GBにつき、毎月 0.40USD
※毎月最初の 100,000 DPU と 1GB のストレージが無料
事前準備
インフラの土台となるVPC作成と、セキュリティ, ポリシー関連の準備が必要になります。また、下記の準備に加えSSH キーペアとAurora-DSQL のクラスター作成が必要です。詳細な作成方法は省略いたしますが、参考文献に公式のドキュメントのリンクを張っているので、そちらをご参考ください。
VPC リソース, セキュリティグループ
ELBを使う都合上、2つのアベイラビリティーゾーンを用意する必要があるため、各ゾーンにパブリック, プライベートサブネットを作成します。今回作成したVPCのリソースマップは以下の通りです。NATゲートウェイは先に作っておくと余計な料金が発生するので、作成は後回しでも問題ありません。
セキュリティグループは、EC2用とALB用の2つを作成します。EC2用は、ALBからのリクエストのみ受け付けるようにします。
IAM ポリシー, ロール
EC2からAurora DSQLに接続するためのポリシーと、AmazonECSTaskExecutionRolePolicyを付与したIAMロールを作成します。本来は管理者権限でのアクセスではなく、専用のDBロールを作成, 承認するのがベターなのですが、今回のインフラ構築から逸れてしまうため省略いたします。ご了承ください。
"Statement": [
{
"Effect": "Allow",
"Action": [
"dsql:ListClusters",
"dsql:DbConnect",
"dsql:DbConnectAdmin",
"dsql:GetCluster"
],
"Resource": [
"arn:aws:dsql:ap-northeast-1:${ユーザID}:cluster/${クラスターID}"
]
}
]
Webページへアクセス
ドメインの取得、証明書の発行
今回は、XServer Domain にてWebページ用とAPI用、2つのドメインを購入しました。購入後、Whois代理公開設定を有効にしておきます。
Route 53 でホストゾーン作成
Xserverで取得したドメイン名から、パブリックホストゾーンを2つ作成します。作成後、タイプ: NS のレコードの値4つをそれぞれコピーし、Xserverのネームサーバの値を変更します。ネームサーバの設定変更が反映されるのは時間がかかるため、早めにやっておくと後の作業がスムーズになります。


ACM で証明書を発行
Xserverで取得したドメイン名2つのパブリック証明書を作成します。Webページ用のドメインはus-east-1で作り、API用のドメインはVPCと同じap-northeast-1で作成します。これは、CloudFront ではus-east-1のACM証明書しか使用できないためです。
"route53でレコードを作成"を押下すると、該当ドメインにタイプ: CNAME のレコードが作成されます。

S3 にビルドしたVueプロジェクトをアップロード
テストデータを用意してビルドしたVue.jsのプロジェクトを、S3にアップロードします。今回は、新たにバケットを作成して、ビルド後のファイルをまとめて置いています。

CloudFront で配信
ディストリビューションを作成していきます。料金プランはfree、DomainにはWeb用に購入したドメイン(us-east-1で証明書を発行したもの)を設定します。
Origin typeはS3を選択し、コンテンツが保管されているバケットとパスを入力します。Settingsはデフォルト(recommended)のままでもOKです。

TLS certificate でWeb用のAPIに作成したACM証明書を選択します。

作成したディストリビューションのIDを控えておいて、CloudFront経由でアクセス出来るようにS3のバケットポリシーを修正します。

Route 53 にAレコードを追加
Web用のドメイン名で作成したホストゾーンに、ルーティング先としてCloudFrontを追加します。

Aレコード作成後、Web用のドメインをブラウザで入力すると、Webサイトにアクセスできます!

APIサーバの用意
VPC でNATゲートウェイを用意
プライベートサブネットにEC2インスタンスを作成してDockerイメージを取得するために、NATゲートウェイを作成, アタッチしておきます。

ECR にイメージをプッシュ
アップロードしたいDockerイメージ名で、ECRにプライベートリポジトリを作成します。リポジトリ作成後に"プッシュコマンドを表示"を押下し、指定されたコマンドを順次実行して、Dockerイメージをアップロードします。

ECS でクラスターを作成
ECSでクラスター(コンテナインスタンス(ここではEC2)の論理グループ)を作成していきます。基本は下記画像の通りですが、重要な箇所はかいつまんで補足いたします。

- 必要な容量
起動するEC2インスタンスの数を指定できます。今回は学習用なので予算を節約しており、処理負荷が増大した場合でも最大2つまでとしています。 - VPC, サブネット,
事前準備で作成したものを指定します。サブネットに関しては、プライベートサブネットを2つ選択します。 - SSH キーペア, セキュリティグループ
こちらも、事前準備で作成したものを指定します。セキュリティグループはEC2用に作成したものを指定します。
ECS でタスク作成
クラスターに引き続き、タスク(1つ以上のコンテナから構成される、アプリケーションの実行単位)を作成していきます。
- タスクサイズ
ここで指定するCPUとメモリは、EC2インスタンス(今回はt3.micro)のスペック以下の値で入力します。 - タスクロール, タスク実行ロール
事前準備で作成したロールを指定します。 - イメージURI
ECR にイメージをプッシュで作成したプライベートリポジトリから、Dockerイメージを選択します。 - ポートマッピング
コンテナ(Java)へリクエストする際、コンテナ側は8080でリッスンしているため、ホストポートを80, コンテナポートを8080としています。
EC2 でターゲットグループを作成
ECSのクラスター作成と同時に、EC2インスタンスが作成されています。このインスタンスを対象に、ターゲットグループを作成します。
- VPC, サブネット
事前準備で作成したものを指定します。 - ヘルスチェック
今回はデフォルトのままにしていますが、EC2で実行するコンテナが"/"のリクエストを受け付けていない場合は、ヘルスチェックパスを変更する必要があります。
EC2 でロードバランサーを作成
ECSでのサービス作成時にもロードバランサーを新規作成できますが、リージョンを明示的に指定できないので、予め作成しておきます。作成の際には、ALB用のセキュリティグループを指定します。
- VPC, アベイラビリティゾーンとサブネット
事前準備で作成したものを設定します。サブネットに関しては、パブリックサブネットを2つ選択します。
- ターゲットグループ
先ほど作成したターゲットグループを指定します。
- デフォルトSSL/TLSサーバ証明書
API用に作成した証明書を選択します。
Route 53 の修正
API用のドメイン名で作成したホストゾーンに、ルーティング先としてALBを追加します。

ECS でサービス作成
作成したクラスターを選択し、サービス(クラスター内で実行されるタスクを管理する機能)を作成します。先ほど作成したロードバランサー, ターゲットグループと、事前準備で作成したVPCを指定します。

サービスのデプロイ中に、Vue.jsのプロジェクトをテスト用データから本番のAPI実行用に変更して、ビルドしたものをS3にアップロードしておきます。デプロイ後にWebサイトへアクセスして、HTTPSでAPIが実行できていれば成功です!

動作確認後の後片付け
料金がかかる箇所に絞って、各種機能を停止する方法を以下に列挙いたします。
- ECS
- クラスター名 > サービス > 更新 から、必要なタスクを0にしてからサービスを削除
- EC2
- ロードバランサーを削除
- Auto Scaling名 > 編集 から、希望するキャパシティ, 最小/最大の希望する容量を0にしてからAuto Scalingを削除
- EC2 インスタンスを終了(削除)
- VPC
- プライベートサブネットのルートテーブルからNATゲートウェイの設定を解除し、NATゲートウェイを削除
- Elastic IP アドレス にIPアドレスが残っている場合は、関連付けを開放して削除
終わりに
業務でAWSを触ることはあるのですが、改めてイチからインフラを構築する機会は中々ないので、今回思い切って着手してみました。料金はかかりますがそれ以上の学びがあり、何より手を動かして作業するのが楽しいと感じました。この記事を読んでいただいて、インフラ構築のハードルが少しでも下がれば幸いです。
参考文献










