【React】【Terraform】CloudFront+S3へデプロイしてアクセスできるようにする

React

 

ReactアプリをAWSへデプロイし、WEBブラウザからアクセスしてみます

最近勉強しているTerraformを使用してAWSの環境を構築していきます

 

ゴール

 

(インフラ構成図)

(ポイント)

  • ReactアプリをS3にデプロイする
  • HTTPS通信を実現するためにCloudFrontをS3の前に置く
  • CloudFront経由でのみ、アプリ用S3にアクセス可能
  • Route53を使用し、独自ドメインアクセスする
    →筆者の場合は、「test.hisui-app.com
  • ACMを適用し、HTTPSで通信する

 

前提

 

  • Terraform、AWS CLIが使える環境にある
  • IAMユーザーはAdministrator
  • 使用するドメインを取得し、Route53で管理している
    →まだの方はこちらの記事をご参考ください
  • reactのプロジェクトを作成できる
    →まだの方はこちらの記事をご参考ください

 

構築のざっくりとした流れ

 

  1. TerraformでAWS環境を構築する
  2. Reactアプリを作成する
  3. 2. で作成したアプリをS3にデプロイする
  4. WEBブラウザからアクセスする

 

やってみる

TerraformでAWS環境を構築する

ソースコード

 

terraform_aws_deploy_practice/react_deploy at react_aws_deploy · hisuihisui/terraform_aws_deploy_practice
Contribute to hisuihisui/terraform_aws_deploy_practice development by creating an account on GitHub.

 

詳細はリポジトリ内のREADMEやソースコード内のコメントをご覧ください

 

AWSに環境構築する

 

 

(構築完了まで5分ぐらいかかりました。。。)

 

終了したら、AWSコンソールから確認してみましょう!

S3, CloudFront, Route53, ACM にリソースが作成されていればOKです!

 

HTMLファイルをS3において動作確認する

 

まずは、PC内の適当な場所にindex.htmlを作成します

今回はDesktop配下の「app_to_S3」というフォルダ内に作成します

 

index.htmlの中身は以下。

 

次にS3にAWS CLIを使ってアップロードしていきます

アプリ用のバケットは「hisui-react-app-bucket」なので、コマンドはこんな感じ

 

https://<CloudFrontと紐づけたドメイン>/index.html

にアクセスし、先ほど作成したindex.htmlの内容が表示されればOKです!

 

私の場合は、https://test.hisui-app.com/index.html にアクセスして確認します。

↓のように表示されていればOKです

アップロードしたindex.htmlはいらないので、消しておきます

 

Reactアプリを作成する

 

作る場所は先ほどと同じ「app_to_S3」フォルダ内Reactアプリを作成します。

 

Reactアプリをビルドして、S3にアップロードする

 

 

 

WEBブラウザからアクセスする

 

https://<CloudFrontと紐づけたドメイン>/index.html

にアクセスし、今度はReactアプリが表示されればOKです!

 

私の場合は、https://test.hisui-app.com/index.html にアクセスして確認します。

↓のように表示されていればOKです

 

無事、構築完了しましたー!!、おわり。

 

構築にあたり遭遇したエラー集

 

【Terraform】指定したドメインでCloudFrontにアクセスできない。。。
Route53でCloudFrontとドメインを関連付け、ACMを適用しました。 だけど、そのドメインにアクセスしてもうまく表示されなかったので、解決していきます。 ※Terraformを使って構築しています ...
【Terraform】CloudFrontのログ用S3はACLを有効にしておく必要がある
TerraformでCloudFrontを構築したときに、アクセスログ用S3バケットを作成しました。 その過程でACL関係のエラーが出たため、記事に残しておきます。 ゴール Terraformを使用して、C...
【Terraform】ACMでSSL証明書を作成しDNS認証するときに遭遇したエラーたち
Terraformを使ってACMでSSL証明書を発行しようとした際にいくつかエラーにはまったので、記事にしておきます。 ゴール Terraformを使ってACMでSSL証明書を発行する 認証方法はRou...

 

参考

 

Terraform Registry

AWS S3 + CloudFrontでReactアプリをHTTPS公開するための正しい構成 - Qiita
はじめにReactのようなフロントエンドアプリの配置先としては、AWS S3のようなフルマネージドなWebホスティング環境が最適です。ただし、S3のWebホスティング機能は単体ではSSL(TSL)…
ReactをCloudFront+S3でCICDする
【Terraform】CloudFront から S3 へのアクセス制御に Origin Access Control を利用する
CloudFront + S3のWebサイトをTerraformで構築する | DevelopersIO
概要 S3にホスティングされた静的コンテンツをCloudFront経由で配信してみようと思います。 今回はTerraformを用いてシステムの構築を行います。 CloudFrontとは CloudFrontはAWSが提供 …
Amazon Simple Storage Service オリジンへのアクセスの制限 - Amazon CloudFront
Amazon CloudFront オリジンアクセスコントロール (OAC) で、Amazon S3 オリジンへのアクセスを制限します。
S3 + CloudFront + ACM + Route53のミニマムWebサイトをTerraformで構築する
AWSのサービス、S3 + CloudFront + ACM + Route53のウェブサイト環境をTerraformで構築するときのミニマム構成。 おそらくかなりベーシックな構成なのでよく出るやつです。 この構成をTerraformのコードで書いていきます!...

 

コメント

タイトルとURLをコピーしました