“S3にデプロイしてReactアプリを特定のIPアドレスから見る方法”
執筆: “S.S”
はじめに
初めまして。プログラマーのS.Sです。
今回は、Reactで作成したアプリをAWSのS3にアップロードして設定したIPアドレスからのみアプリが見れるように設定したいと思います。
ReactアプリをS3にデプロイして特定のIPアドレスからであれば誰でもアクセスできるような環境を作成していきます。
① Reactアプリの作成
Reactで作成した自身のアプリを用意します。
② S3でバケットを作成する
バケットとはファイル群を格納してくれるコンテナのことです。
- AWSを開き検索から「S3」を検索または、「S3」を選択
「バケットを作成」を選択
- 「バケットを作成」を選択
- 任意の名前で作成
名前はなんでもいいです。
- 作成したバケットを選択して「プロパティ」の「静的ウェブサイトホスティング」を下記のように編集
- インデックスドキュメントの箇所にindex.htmlと入力、エラーでキュメントの箇所にerror.htmlと入力し空のhtmlファイルを作成
③ バケットポリシーにコードを追加
バケットポリシーに下記のコードを記載する
IPアドレスを自身のpublicIPアドレスにすることで、セキュリティ面が守られると思います。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::自分のS3のバケット名/*",
"Condition": {
"IpAddress": {
"aws:SourceIp": "自身のパブリックIPアドレス（ex.○○○.○○○.○○○.○○）"
}
}
}
]
}
④ S3にReactアプリをデプロイする
※buildファイル作成コマンド。ターミナルで実行したらbuildファイルができる
npm run build
バケットのオブジェクトにReactでbuildしてできてbuildファイルを選択してbuildファイルの中身だけをアップロードします。
ファイルとフォルダをまとめてアップロードできないので、ファイルはファイルでまとめてアップロードし、フォルダは１つづつフォルダをアップロードしていきます。
４０４エラーが出る場合
①buildファイルの中身だけをアップロードする
②エラードキュメントを「index.html」にする
を確認してみて、試してみて下さい。
起動
バケットのプロパティ＞静的ウェブサイトホスティングに記載されている「バケットウェブサイトエンドポイント」のURLをクリックすると指定したIPアドレスからのみサイトを見ることができます。
まとめ
所感やどんな事に応用できるとかそれぞれの感想や発展性について言及
今回は作成したReactアプリをS3にアップロードし、特定のIPアドレスからのみ見れるようにAWSの設定を行いました。また、このS3にアップロードしたアプリはCloudFronをt設定したらCloudFrontからS3の中に入っているアプリを見ることも可能です。バケットウェブサイトエンドポイントのURLはHTTPになっており、HTTPSになっていないのでもし、自分が作成したアプリがHTTPSのリクエストしか受け取らないようなものであればCloudFrontをHTTPSの設定にして立てればCloudFront側から見ることができます。また、セキュリティ面でもCloudFrontから見れた方がいいかもしれませんね。今回は開発環境であったため特定のIPアドレスからのみ見れるように作成しました。S3にReactアプリを入れることが出来たら、CloudFrontを立てたり、WAFを使ってセキュリティ面を強化することもできるので、皆さんもぜひ試してみてください。
関連記事