3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AWSでインフラを構築し、個人学習で作成したアプリを公開するまで

3
Posted at

今回やりたいこと

 タイトルに書いてある通りなのですが、AWSでインフラを構築し、個人学習で作成したアプリを公開するまでの流れを整理いたしました。本記事で扱うことを下記に示します。

  • CloudFront + S3 + Route 53 でWebページを公開する
  • プライベートサブネット内にECS on EC2を作成し、APIサーバとする

 AWSアカウントが登録されていることを前提とし、各サービスの概要については省略いたします。

構成図

aws.png

  • フロントエンド
    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ゲートウェイは先に作っておくと余計な料金が発生するので、作成は後回しでも問題ありません。

Qiita画像0-vpc.png

 セキュリティグループは、EC2用とALB用の2つを作成します。EC2用は、ALBからのリクエストのみ受け付けるようにします。

  • ALB用
    image.png

  • EC2用

image.png

IAM ポリシー, ロール

 EC2からAurora DSQLに接続するためのポリシーと、AmazonECSTaskExecutionRolePolicyを付与したIAMロールを作成します。本来は管理者権限でのアクセスではなく、専用のDBロールを作成, 承認するのがベターなのですが、今回のインフラ構築から逸れてしまうため省略いたします。ご了承ください。

AuroraDsqlPolicy.json
    "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のネームサーバの値を変更します。ネームサーバの設定変更が反映されるのは時間がかかるため、早めにやっておくと後の作業がスムーズになります。
Qiita画像1-route53-ns.png
Qiita画像2-xserver-ns.png

ACM で証明書を発行

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

S3 にビルドしたVueプロジェクトをアップロード

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

CloudFront で配信

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

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

Route 53 にAレコードを追加

 Web用のドメイン名で作成したホストゾーンに、ルーティング先としてCloudFrontを追加します。
Qiita画像7-route53-a.png

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

APIサーバの用意

VPC でNATゲートウェイを用意

 プライベートサブネットにEC2インスタンスを作成してDockerイメージを取得するために、NATゲートウェイを作成, アタッチしておきます。
Qiita画像9-vpc-nat.png

ECR にイメージをプッシュ

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

ECS でクラスターを作成

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

  • 必要な容量
    起動するEC2インスタンスの数を指定できます。今回は学習用なので予算を節約しており、処理負荷が増大した場合でも最大2つまでとしています。
  • VPC, サブネット,
    事前準備で作成したものを指定します。サブネットに関しては、プライベートサブネットを2つ選択します。
  • SSH キーペア, セキュリティグループ
    こちらも、事前準備で作成したものを指定します。セキュリティグループはEC2用に作成したものを指定します。

ECS でタスク作成

 クラスターに引き続き、タスク(1つ以上のコンテナから構成される、アプリケーションの実行単位)を作成していきます。

Qiita画像12-ecs-task.png

  • タスクサイズ
    ここで指定するCPUとメモリは、EC2インスタンス(今回はt3.micro)のスペック以下の値で入力します。
  • タスクロール, タスク実行ロール
    事前準備で作成したロールを指定します。
  • イメージURI
    ECR にイメージをプッシュで作成したプライベートリポジトリから、Dockerイメージを選択します。
  • ポートマッピング
    コンテナ(Java)へリクエストする際、コンテナ側は8080でリッスンしているため、ホストポートを80, コンテナポートを8080としています。

EC2 でターゲットグループを作成

 ECSのクラスター作成と同時に、EC2インスタンスが作成されています。このインスタンスを対象に、ターゲットグループを作成します。

Qiita画像13-ec2-target.png
image.png
Qiita画像14-ec2-target.png

  • VPC, サブネット
    事前準備で作成したものを指定します。
  • ヘルスチェック
    今回はデフォルトのままにしていますが、EC2で実行するコンテナが"/"のリクエストを受け付けていない場合は、ヘルスチェックパスを変更する必要があります。

EC2 でロードバランサーを作成

 ECSでのサービス作成時にもロードバランサーを新規作成できますが、リージョンを明示的に指定できないので、予め作成しておきます。作成の際には、ALB用のセキュリティグループを指定します。

Qiita画像15-ec2-alb.png

  • VPC, アベイラビリティゾーンとサブネット
    事前準備で作成したものを設定します。サブネットに関しては、パブリックサブネットを2つ選択します。

Qiita画像16-ec2-alb.png

  • ターゲットグループ
    先ほど作成したターゲットグループを指定します。

Qiita画像17-ec2-alb.png

  • デフォルトSSL/TLSサーバ証明書
    API用に作成した証明書を選択します。

Route 53 の修正

 API用のドメイン名で作成したホストゾーンに、ルーティング先としてALBを追加します。
Qiita画像18-route53-a.png

ECS でサービス作成

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

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

動作確認後の後片付け

 料金がかかる箇所に絞って、各種機能を停止する方法を以下に列挙いたします。

  • ECS
    • クラスター名 > サービス > 更新 から、必要なタスクを0にしてからサービスを削除
  • EC2
    • ロードバランサーを削除
    • Auto Scaling名 > 編集 から、希望するキャパシティ, 最小/最大の希望する容量を0にしてからAuto Scalingを削除
    • EC2 インスタンスを終了(削除)
  • VPC
    • プライベートサブネットのルートテーブルからNATゲートウェイの設定を解除し、NATゲートウェイを削除
    • Elastic IP アドレス にIPアドレスが残っている場合は、関連付けを開放して削除

終わりに

 業務でAWSを触ることはあるのですが、改めてイチからインフラを構築する機会は中々ないので、今回思い切って着手してみました。料金はかかりますがそれ以上の学びがあり、何より手を動かして作業するのが楽しいと感じました。この記事を読んでいただいて、インフラ構築のハードルが少しでも下がれば幸いです。

参考文献

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?