Deployment: Next/React.js and Spring Boot on AWS EC2 with Nginx

If you’re looking to host your Next.js/React.js frontend application along with your Spring Boot backend on AWS EC2 with Nginx as a reverse proxy, this article aims to provide beginner-friendly guide to help you seamlessly deploy your applications. Let’s explore how to host your end to end application on AWS EC2 and take advantage of its powerful cloud infrastructure.

Setting up AWS EC2 instance:

You’ll need to set up an EC2 instance to being hosting the application, it offers a flexible and scalable infrastructure for running your applications in the cloud. Once your EC2 instance is up and running, you can configure security groups to control inbound and outbound traffic. This ensures that your applications are accessible with security restrictions.

a) Create an EC2 instance

b) Set inbound and outbound rules

c) Pull your frontend and backend code with Github Deploy keys

Setting up Next.js/React.js Frontend server:

Once you have Node.js installed on your machine and have initialized your React.js project, setting up the server for your frontend becomes a straightforward process. Also, ensure the necessary dependencies and scripts in your package.json file.

a) Run app server

# add export script to your package.json
scripts: {
  ....
  "export": "next build && next export" <-- this line
  ....
}

# create out folder
mdkir out

# build your app
npm run export

b) Pm2 for process management

# navigate to project folder and make sure start script exists in package.json

# install pm2
npm install pm2 -g

# start app using pm2
pm2 start npm --name "app-name" -- start

Now your frontend application is up and running.

Setting up SpringBoot Backend server:

First make sure you have Java Development Kit (JDK) installed on your machine. Once you have initialized your Spring Boot project, setting up the server for your backend becomes a streamlined process.

# install java
sudo apt install default-jdk

# add JAVA_HOME if needed

# running springboot server using gradlew
./gradlew clean bootJar
java -jar build/libs/*.jar

Now your backend application is up and running.

Setting up nginx:

Nginx is a crucial step in deploying web applications and serving them efficiently. To begin, ensure that Nginx is installed on your server or machine. Next, navigate to the Nginx configuration files, typically located in the “/etc/nginx” directory.

a) Installing nginx:

# install nginx server
sudo apt install nginx -y

# verify nginx installation
sudo systemctl status nginx

b) Add sites:

# create <sitename.com.conf> file
sudo touch /etc/nginx/sites-available/sitename.com.conf

# delete default conf file (optional)
sudo rm -rf /etc/nginx/sites-available/default

c) Nginx config for site:

Use the below config and place it inside your <sitename.com.conf> file within /etc/nginx/sites-available/ folder. The config assumes frontend is running on port 3000 and backend server is running on port 8080.

server {
        listen 80;
        server_name site-name.com;

        location / {
                proxy_pass http://127.0.0.1:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        location /api/ {
                proxy_pass  http://backend;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $http_host;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Forwarded-For $remote_addr;
                proxy_set_header X-Forwarded-Port $server_port;
                proxy_set_header X-Request-Start $msec;
        }
}

upstream backend {
        server 127.0.0.1:8080;
}

d) Test config and Restart nginx:

# test nginx config
sudo nginx -t

# restart nginx with new config 
sudo systemctl reload nginx

Now the nginx server is up and running with reverse proxy for frontend and backend application, serving on port 80(http).

Viola! You have successfully deployed your end-to-end application on a single EC2 instance using Nginx. By following the steps outlined in this article, you have leveraged the power of Nginx’s reverse proxy capabilities to efficiently serve both your Next.js frontend and Spring Boot backend. Now, enjoy the seamless integration and improved performance of your application on AWS EC2.

For end-to-end mobile app development services, reach out to me on my Fiverr gig. I have the expertise to bring your app idea to life, from design to deployment. Let’s collaborate and create a successful mobile app together.

Ifyou appreciate my assistance and find my responses helpful, consider buying me a ChatGPT subscription as a token of support. Your generosity is greatly appreciated in enabling me to serve you better.