[SOLVED] React app showing data from Spring Boot Api

Issue

I am using AWS to host the server and Spring boot API and react app as docker images on the EC2 instance. I have checked all the logs by doing SSH to my instance all the ports have given as they have to, and I also checked with security groups as well but nothing works.

CONTAINER ID   IMAGE                                              COMMAND                  CREATED          STATUS                 PORTS                                       NAMES
21aba65e815e   ahmadmujtaba200210/fullstack-react:latest          "npm run dev"            19 minutes ago   Up 19 minutes          0.0.0.0:80->5173/tcp, :::80->5173/tcp       ecs-awseb-Fullstack-api-env-ewuh4fh3ed-21-fullstack-react-d0b5d5a587e89cc42b00
8110e126d33b   ahmadmujtaba200210/fullstack:06.10.2023.14.52.47   "java -cp @/app/jib-…"   19 minutes ago   Up 19 minutes          0.0.0.0:8080->8080/tcp, :::8080->8080/tcp   ecs-awseb-Fullstack-api-env-ewuh4fh3ed-21-fullstack-96b19dfc91cccd8beb01
34ffc605a8c0   amazon/amazon-ecs-agent:latest                     "/agent"                 3 hours ago      Up 3 hours (healthy)                                               ecs-agent

Spring boot Docker logs on EC2 instance:

 .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v3.1.2)

2023-10-06T14:54:38.069Z  INFO 1 --- [  restartedMain] c.a.fullstack.FullstackApplication       : Starting FullstackApplication using Java 17.0.8.1 with PID 1 (/app/classes started by root in /)
2023-10-06T14:54:38.082Z  INFO 1 --- [  restartedMain] c.a.fullstack.FullstackApplication       : No active profile set, falling back to 1 default profile: "default"
2023-10-06T14:54:38.212Z  INFO 1 --- [  restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : Devtools property defaults active! Set 'spring.devtools.add-properties' to 'false' to disable
2023-10-06T14:54:38.213Z  INFO 1 --- [  restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : For additional web related logging consider setting the 'logging.level.web' property to 'DEBUG'
2023-10-06T14:54:39.811Z  INFO 1 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Multiple Spring Data modules found, entering strict repository configuration mode
2023-10-06T14:54:39.817Z  INFO 1 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JDBC repositories in DEFAULT mode.
2023-10-06T14:54:39.940Z  INFO 1 --- [  restartedMain] .RepositoryConfigurationExtensionSupport : Spring Data JDBC - Could not safely identify store assignment for repository candidate interface com.amigoes.fullstack.customer.CustomerRepository; If you want this repository to be a JDBC repository, consider annotating your entities with one of these annotations: org.springframework.data.relational.core.mapping.Table.
2023-10-06T14:54:39.942Z  INFO 1 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 109 ms. Found 0 JDBC repository interfaces.
2023-10-06T14:54:39.995Z  INFO 1 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Multiple Spring Data modules found, entering strict repository configuration mode
2023-10-06T14:54:40.000Z  INFO 1 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode.
2023-10-06T14:54:40.108Z  INFO 1 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 95 ms. Found 1 JPA repository interfaces.
2023-10-06T14:54:41.881Z  INFO 1 --- [  restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2023-10-06T14:54:41.899Z  INFO 1 --- [  restartedMain] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2023-10-06T14:54:41.900Z  INFO 1 --- [  restartedMain] o.apache.catalina.core.StandardEngine    : Starting Servlet engine: [Apache Tomcat/10.1.11]
2023-10-06T14:54:42.003Z  INFO 1 --- [  restartedMain] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2023-10-06T14:54:42.010Z  INFO 1 --- [  restartedMain] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 3747 ms
2023-10-06T14:54:42.366Z  INFO 1 --- [  restartedMain] o.f.c.internal.license.VersionPrinter    : Flyway Community Edition 9.16.3 by Redgate
2023-10-06T14:54:42.367Z  INFO 1 --- [  restartedMain] o.f.c.internal.license.VersionPrinter    : See release notes here: https://rd.gt/416ObMi
2023-10-06T14:54:42.367Z  INFO 1 --- [  restartedMain] o.f.c.internal.license.VersionPrinter    :
2023-10-06T14:54:42.379Z  INFO 1 --- [  restartedMain] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Starting...
2023-10-06T14:54:42.951Z  INFO 1 --- [  restartedMain] com.zaxxer.hikari.pool.HikariPool        : HikariPool-1 - Added connection org.postgresql.jdbc.PgConnection@3f97503
2023-10-06T14:54:42.953Z  INFO 1 --- [  restartedMain] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Start completed.
2023-10-06T14:54:42.971Z  INFO 1 --- [  restartedMain] o.f.c.i.database.base.BaseDatabaseType   : Database: jdbc:PostgreSQL:<URL removed intentionally>:5432/customer (PostgreSQL 14.7)
2023-10-06T14:54:43.032Z  INFO 1 --- [  restartedMain] o.f.core.internal.command.DbValidate     : Successfully validated 3 migrations (execution time 00:00.039s)
2023-10-06T14:54:43.113Z  INFO 1 --- [  restartedMain] o.f.core.internal.command.DbMigrate      : Current version of schema "public": 3
2023-10-06T14:54:43.119Z  INFO 1 --- [  restartedMain] o.f.core.internal.command.DbMigrate      : Schema "public" is up to date. No migration necessary.
2023-10-06T14:54:43.345Z  INFO 1 --- [  restartedMain] o.hibernate.jpa.internal.util.LogHelper  : HHH000204: Processing PersistenceUnitInfo [name: default]
2023-10-06T14:54:43.474Z  INFO 1 --- [  restartedMain] org.hibernate.Version                    : HHH000412: Hibernate ORM core version 6.2.6.Final
2023-10-06T14:54:43.482Z  INFO 1 --- [  restartedMain] org.hibernate.cfg.Environment            : HHH000406: Using bytecode reflection optimizer
2023-10-06T14:54:43.765Z  INFO 1 --- [  restartedMain] o.h.b.i.BytecodeProviderInitiator        : HHH000021: Bytecode provider name : bytebuddy
2023-10-06T14:54:43.982Z  INFO 1 --- [  restartedMain] o.s.o.j.p.SpringPersistenceUnitInfo      : No LoadTimeWeaver setup: ignoring JPA class transformer
2023-10-06T14:54:44.293Z  INFO 1 --- [  restartedMain] o.h.b.i.BytecodeProviderInitiator        : HHH000021: Bytecode provider name : bytebuddy
2023-10-06T14:54:45.121Z  INFO 1 --- [  restartedMain] o.h.e.t.j.p.i.JtaPlatformInitiator       : HHH000490: Using JtaPlatform implementation: [org.hibernate.engine.transaction.jta.platform.internal.NoJtaPlatform]
2023-10-06T14:54:45.125Z  INFO 1 --- [  restartedMain] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default'
2023-10-06T14:54:45.838Z  WARN 1 --- [  restartedMain] JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning
2023-10-06T14:54:46.432Z  INFO 1 --- [  restartedMain] o.s.b.d.a.OptionalLiveReloadServer       : LiveReload server is running on port 35729
2023-10-06T14:54:46.487Z  INFO 1 --- [  restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2023-10-06T14:54:46.522Z  INFO 1 --- [  restartedMain] c.a.fullstack.FullstackApplication       : Started FullstackApplication in 9.448 seconds (process running for 10.808)
Hibernate:
    select
        nextval('customer_id_seq')
Hibernate:
    insert
    into
        customer
        (age,email,gender,name,id)
    values
        (?,?,?,?,?)

React Docker app logs on EC2 instance:

> [email protected] dev
> vite --host


  VITE v4.4.9  ready in 1607 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.17.0.3:5173/

Solution

Your issue seems to be that your applications (Spring Boot API and React app) are running inside Docker containers on an AWS EC2 instance but you're unable to access them externally. Let's break this down step by step:

1. Docker Port Mapping: From the logs, we can see that your Spring Boot application is running on port 8080 inside the Docker container and is mapped to port 8080 on the host. Similarly, your React app is running on port 5173 inside its Docker container and mapped to port 80 on the host.

2. Accessing the Applications:

   • Spring Boot API: Access it using http://[EC2_INSTANCE_PUBLIC_IP]:8080/
   • React app: Access it using http://[EC2_INSTANCE_PUBLIC_IP]/ (since it's on port 80, you don't need to specify the port).

3. AWS Security Groups: Ensure that the AWS security group associated with your EC2 instance allows incoming traffic on the necessary ports:

   • Port 80 for the React app.
   • Port 8080 for the Spring Boot API.

4. Docker Networking: Your applications seem to be running and listening correctly, as they're accessible via localhost inside the container. However, always ensure you're not binding your applications to localhost or 127.0.0.1 inside the container if you want to access them externally.

5. Other Considerations:

   • React App: Ensure that your React app, if it needs to communicate with your Spring Boot API, uses the correct base URL for the API endpoints. If your React app makes calls to the API using localhost, it will not work because inside the React container, localhost refers to the container itself and not the host or other containers.
   • Application Configuration: Ensure there's no configuration inside your Spring Boot or React application that restricts access from certain IPs or domains.

Action Steps:

1. If you haven't already, check the security group rules associated with the EC2 instance to ensure ports 80 and 8080 are open to incoming traffic.
2. Try accessing the applications using the EC2 public IP as mentioned above.
3. If your React app communicates with the Spring Boot API, ensure it's using the correct base URL (EC2 IP and port).
4. Ensure no internal application configurations block external requests.

If after trying the above you're still facing issues, consider sharing more specific details about the problem you're encountering (e.g., error messages, exact steps taken, etc.) so I can provide more targeted assistance.

Answered By - heyValdemar

Answer Checked By - David Marino (WPSolving Volunteer)