EC2上でReact公開

EC2へ接続

Microsoft Windows [版本 10.0.19045.5965]
(c) Microsoft Corporation。保留所有权利。

C:\Users\XX>ssh -i C:\**************.pem ec2-user@***.***.***.***
, #_
~\_ ####_ Amazon Linux 2023
~~ \_#####\
~~ \###|
~~ \#/ ___ https://aws.amazon.com/linux/amazon-linux-2023
~~ V~' '->
~~~ /
~~._. _/
_/ _/
_/m/'
Last login: Mon Aug 18 01:54:47 2025 from ***.***.***.***

ポート3000を開ける

※EC2ではなく他のパソコンのCMDから設定

C:\Users\XX>aws configure
AWS Access Key ID [None]: ********************
AWS Secret Access Key [None]: ****************************************
Default region name [None]: us-east-1
Default output format [None]: json

C:\Users\XX>aws ec2 authorize-security-group-ingress --group-id sg-***************** --protocol tcp --port 3000 --cidr 0.0.0.0/0

React作成及び公開

[ec2-user@ip-***-***-***-*** ~]$ npx create-react-app testapp
...省略...
[ec2-user@ip-***-***-***-*** ~]$cd testapp
[ec2-user@ip-***-***-***-*** ~]$npm start


Compiled successfully!
Compiled successfully!

You can now view testapp in the browser.

Local: http://localhost:3000
On Your Network: http://***.***.***.***:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

開く

ブラウザから以下のようにして開ける。
Reactを立ち上げた時に表示されているIPアドレスではなく
EC2コンソール上で確認できるIPアドレスを使わないと接続が出来なかった。

http://***.***.***.***:3000/