React×SpringBoot×MySQLをAWSにデプロイ

こんにちは。じゅんです。

今回はReact×Spring Boot×MySQLをAWSにデプロイします。

VPCの作成から動作確認までこの記事でカバーしています。

これまでの作業内容については以下の記事にまとめています。

【まとめ記事】Web開発学習の記録

本記事は、管理人のWeb開発学習を記録したまとめ記事です。 ロードマップを作る上で重視したことは、以下の2点です。 1度に複数の技術を勉強することを避ける 重複する部分を繰り返しながら学ぶ 「急がば回れ」の精神で確実に習得していきます。 学...

inakademac.com

2024.10.20

全体像

VPCの作成

EC2やRDSを配置する仮想ネットワークを用意するためVPCを作成します。

VPCとは広範囲のIPアドレスを持つIPアドレス空間のことです。

IPアドレスは住所に例えられることがあります。
その例えに従うとVPCは複数の住所を持つ都道府県のようなイメージです。

以下の設定で作成します。

サブネットの作成

VPC内でさらにIPアドレス範囲を分割したサブネットを作成します。

サブネットはVPC（都道府県）の中の具体的なエリアを示す市区町村のようなイメージです。

市区町村ごとに外部からのアクセスに対して異なる対応をするためにサブネットを作成します。

パブリックサブネット

ReactとSpring Bootを起動したWebサーバーを配置するパブリックサブネットを作成します。

パブリックサブネットは外部からのアクセスを許可します。

パブリックサブネットは外部の人々が訪れることができる観光地や商業地のようなイメージです。

以下の設定で作成します。

作成直後はパブリック IPv4 アドレスを自動割り当てがいいえとなっており、このサブネット内で起動したEC2インスタンスにパブリックIPアドレスが自動的に付与されません。そのため作成後に設定を編集する必要があります。

アクション > サブネットの設定を編集から変更します。

プライベートサブネット

RDSを起動したDBサーバーを配置するプライベートサブネットを作成します。

RDSを利用する際には、マルチAZ配置にして可用性を高めるために異なるAZに属するサブネットを2つ用意する必要があります。

プライベートサブネットは外部の人々が直接アクセスできない住宅地や工業地帯のようなイメージです。

プライベートサブネットは外部からのアクセスを拒否して、パブリックサブネットからのアクセスのみ許可します。

以下の設定で作成します。

サブネット作成時点ではパブリックとプライベートの違いは対象のCIDRブロックのみです。
この後作成するセキュリティグループでアクセス制御を行います。

インターネットゲートウェイの作成

VPCと外部のインターネットの出入口となるインターネットゲートウェイを作成します。

VPC（都道府県）とインターネットの外部（国外）をつなぐ空港のようなイメージです。

以下の設定で作成します。（VPCとの紐付けは作成後に行います）

作成後、アクション > VPCにアタッチ からVPCと紐づける設定を行います。

ルートテーブルの設定

VPC内の通信を振り分けるためのルートテーブルを設定します。

都道府県（VPC）内の交通（通信）を適切に誘導するための地図や交通標識のようなイメージです。

ルートテーブルはこれまでの操作の過程で既に作成されています。

この設定は、送信先が10.0.0.0/16 に該当するIPアドレス、つまりVPC内部での通信に関する設定を表しています。
ターゲットがlocalとあるため、同じVPC内のリソースに接続されるルールが設定されています。

このままではWebサーバーがインターネットへレスポンスを返す際にVPCから出られません。

外部への通信を行えるようにするために、送信先が0.0.0.0/0でターゲットが作成したインターネットゲートウェイであるルートを追加します。

また、追加したルートに関連づけるためにパブリックサブネットを関連付けます。

これでWebサーバーからのレスポンスがインターネットに返るようになりました。

セキュリティグループの作成

Webサーバー用

ルートテーブルの設定では、Webサーバーがインターネットにレスポンスを返すための設定を行いました。

Webサーバー用のセキュリティグループではインターネットからのリクエストを許可する設定を行います。

以下の設定で作成します。

DBサーバー用

ルートテーブルでは、DBサーバーを起動するプライベートサブネットへの外部からのアクセスは許可していません。

DBサーバー用のセキュリティグループには、Webサーバーからのリクエストを許可するように設定する必要があります。

以下の設定で作成します。

任意のIPアドレスからの通信を許可するのは、Webサーバー用のインスタンスのパブリックIPアドレスは起動ごとに変更されるためです。
ルートテーブルの設定でインターネットからプライベートサブネットへの通信は拒否されるためセキュリティグループで任意のIPアドレスからの通信を許可してもインターネットからRDSへは到達しません。
（セキュリティ的には最適とは言えません...）

DBサブネットグループの作成

RDSのマルチAZ化のためにDBサブネットグループを作成します。

RDS > サブネットグループ から以下の設定で作成します。

EC2インスタンスの作成

WebサーバーとしてのEC2インスタンスを作成します。

以下の設定で作成します。

RDSインスタンスの作成

DBサーバーとしてのRDSインスタンスを作成します。

以下の設定で作成します。

セットアップ・動作確認

ここからはWebサーバー役のEC2インスタンス上で作業を行います。
EC2 Instance Connectを使用します。

今回、ReactとSpring BootをWebサーバーに起動する上で、Nginxをリバースプロキシとして使用します。

Webサーバーのデプロイに関する以下の操作はこちらの記事で詳しく解説しています。

SpringBoot×Reactを1つのEC2インスタンスにデプロイ【NginxでCORS回避】

こんにちは。じゅんです。 前回ローカル環境にSpring BootとReactの簡単メモアプリを作成しました。今回はそのメモアプリを1つのEC2インスタンスにデプロイしていこうと思います。 WebサーバとAPサーバを分けてデプロイした際の記...

inakademac.com

2024.08.10

Nginx

EC2 Instance Connectを使用して、以下の設定でNginxを起動します。
Nginxのセットアップについてはこちらで詳しく解説しています。

ReactアプリをAWS EC2にデプロイして公開する方法【Nginx】

ローカル環境で作成したReactアプリケーションをAWS EC2にデプロイする方法を解説します。 Reactアプリをローカル環境で作成することはできるが、それを本番環境で動かす方法が分からない人の参考になるかと思います。 学習記録も兼ねた記...

inakademac.com

2024.08.08

server {
    listen       80;
    server_name  localhost;

    # 外部 → Nginx → React
    location / {
        proxy_pass http://localhost:3000;
    }

    # React → Nginx → Spring Boot
    location /api {
        proxy_pass http://localhost:8080/api;
    }
}

実行コマンド

sudo systemctl start nginx

React

ReactプロジェクトについてはGitからクローンしてきます。
Reactのデプロイについてもこちらで詳しく解説しています。

ReactアプリをAWS EC2にデプロイして公開する方法【Nginx】

ローカル環境で作成したReactアプリケーションをAWS EC2にデプロイする方法を解説します。 Reactアプリをローカル環境で作成することはできるが、それを本番環境で動かす方法が分からない人の参考になるかと思います。 学習記録も兼ねた記...

inakademac.com

2024.08.08

なお、API接続先は以下の通りです。

const response = await fetch(`http://(WebサーバーのパブリックIPアドレス)/api/memos`);

実行コマンド

cd simple-memo-frontend/   # 作業ディレクトリに移動
npm install                # package.jsonに記載されたパッケージをインストール
npm run build
npm install -g serve  # 軽量サーバーを提供するパッケージ
serve -s build             # ビルドされた静的ファイルを軽量サーバーで実行

npm run buildがEC2上で終わらなかったのでビルドファイルをscp転送しました。

Spring Boot

Spring Bootは開発環境からjarファイルをscp転送します。
Spring Bootのデプロイについてはこちらで詳しく解説しています。

Spring Boot単体をEC2にデプロイする方法

DBを省いたSpringBoot単体だけをEC2にデプロイする方法はあまり検索しても出なかったのでまとめます。 問題を切り分けしやすくして、学習をスムーズに行う狙いです。 学習記録も兼ねた記事一覧をこちらの記事にまとめています。 事前準備 ...

inakademac.com

2024.08.08

なお、MySQLの接続先情報は以下の通りです。

spring.datasource.url=jdbc:mysql://(RDSのエンドポイント):3306/simple_memo
spring.datasource.username=admin
spring.datasource.password=xxxxxxxx

また、CORS対策としてWebサーバーのパブリックIPアドレスを許可しておきます。
@Value("${api.endpoint}")でapplication.propertiesで設定したapi.endpointが取得できます。

package com.example.simplememo.config;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

  private static final Logger logger = LoggerFactory.getLogger(WebConfig.class);

  @Value("${api.endpoint}")
  private String apiEndpoint;

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    // apiEndpointの値をログに出力して確認
    logger.info("Configured API Endpoint for CORS: {}", apiEndpoint);

    registry.addMapping("/api/**")
            .allowedOrigins(apiEndpoint)
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("*")
            .allowCredentials(true);
  }
}

# 上述したMySQL接続情報
spring.datasource.url=jdbc:mysql://(RDSのエンドポイント):3306/simple_memo
spring.datasource.username=admin
spring.datasource.password=xxxxxxxx

# CORS対策: リクエスト元を指定
api.endpoint=http://54.249.13.31

前回（こちらの記事の時）はNginxでリバースプロキシすることでCORSを回避できたのですが、今回は上手く動きませんでした。
理由は分かりませんが許可するとAPI通信が正常に実行できました。

実行コマンド

java -jar ~/simple-memo-0.0.1-SNAPSHOT.jar

MySQL

EC2 Instance Connect上からMySQLに接続します。

mysql -h (RDSのエンドポイント) -u admin -p

MySQLのセットアップはこちらの通りに「simple_memo」データベースを作成し、memosテーブルを作成します。

以下のコマンド実行結果が得られればセットアップ完了です。

上記4サービスをセットアップすることで、WebサーバーのパブリックIPアドレスにアクセスすると以下のようにアプリケーションが表示されるはずです。

まとめ

今回はReact×SpringBoot×MySQLをAWSにデプロイしてみました。

「Reactだけ」「SpringBootだけ」「React×SpringBoot」と段階的にデプロイしてきましたが、初めよりだいぶ本番環境の理解が進んだと思います。

ReactのHello Worldから記事にしているので順番にやっていけば同じようにできるはずです！

【まとめ記事】Web開発学習の記録

本記事は、管理人のWeb開発学習を記録したまとめ記事です。 ロードマップを作る上で重視したことは、以下の2点です。 1度に複数の技術を勉強することを避ける 重複する部分を繰り返しながら学ぶ 「急がば回れ」の精神で確実に習得していきます。 学...

inakademac.com

2024.10.20

次回からはフロントエンドの学習トピックに注力していきたいと思います。

なお、今回はポートフォリオを公開するのに必要最低限のアーキテクチャを選択しています。
フロントエンドをS3とCloudFrontに、SpringBootをECSにデプロイすることでよりパフォーマンスとスケーラビリティを向上することができます。
また機会を設けてインフラの勉強を続けたいと思います。

参考文献

EC2 + RDSを構築して､SpringBootとReactを載せてアプリを起動している【前編】 | オカログ

現在､絶賛バックエンドの学習をしているのですがアプリをデプロイする先をせっかくならAWSにやってみようということでAWS環境にEC2とRDSを構築してSpringBoot(バックエンド)とReact(フロントエンド)が起動するところまでなん

okalog.info

EC2 + RDSを構築して､SpringBootとReactを載せてアプリを起動している【後編】 | オカログ

前編では､EC2・RDSの構築をしてEC2からRDSへの接続までを確認しました｡ 後編では下記を行っていきます｡ 前編での内容 VPCの設定 EC2の設定 RDSの設定 EC2からRDSへの接続を確認する 後編での内容(今回の記事) Git

okalog.info

超初心者がDB接続するSpringBootアプリをAWSにデプロイする【前編】 - Qiita

はじめに駆け出しJavaエンジニアでインフラの知識もデプロイ経験もほぼ無い筆者が、Springで作成したアプリケーションをAWSにデプロイすることに成功した手順を、遭遇したエラーも交えながら記して…

qiita.com

AWSで基本的なサーバー環境を構築してみました。 - Qiita

#はじめにAWSを使用してEC2とRDSを構築し、EC2のSSH接続とRDSへの接続確認まで行ってみました。その手順の流れを備忘録として残します。※AWSコンソール画面のスククショは、2020年…

qiita.com

AWSでMySQLを使う

zenn.dev