Deploying react js and node js full stack on AWS production?

Question

I have currently deployed the React and Node.js on nginx which sits on AWS . I have no issues in deployment and no errors.

The current environment is: PRODUCTION.

But I have a doubt whether the method I follow is right or wrong. This is the method I followed, https://jasonwatmore.com/post/2019/11/18/react-nodejs-on-aws-how-to-deploy-a-mern-stack-app-to-amazon-ec2

The following is my nginx configuration

 server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;


        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
                root /var/apps/front_end/build;
                try_files $uri /index.html;
        }
        location /api/ {
         proxy_pass http://0.0.0.0:3005/;
         }

As shown above , I have copied the build folder after npm run build to the AWS instance and gave the location to nginx and the backend is copied as it is to the AWS instance and I gave npm start it runs on 3005 port , I gave that IP to /api location to proxy pass

I see a couple of others using server.js for the front end and putting the build folder files there and setting up the nginx to that server.js .

So should I do it that way ? or am I good with the current method as seen in the link above ?

Before knowing if you're doing it right, could you give a more info about your application: 1. What is the scale 2. What is the SLA requirements 3. Is there a backend needed (is it server side rendered) Depending on your answers you may be able to deliver on a cheaper / more effective solution on AWS. ex: Static Sites on CloudFront — Kyle Mills, Jul 08 '20 at 14:54
The scale of the application could be between 3000 and 5000 , might increase later — Rittesh P.V, Jul 08 '20 at 14:57
Well if you don't need a server I would suggest not using NGINX and simply serving your assets from CloudFront. You can use Geo based routing to ensure your content is delivered quickly. Something like this, https://medium.com/@wolovim/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af A prod deployment of course may be different but this will give you the idea — Kyle Mills, Jul 08 '20 at 15:12
I was asked to use the nginx since the server load could be more at sometimes , since my application involves registration and payment modules . So I just want to know whether I should follow something like this [blog](https://medium.com/@cjab/some-things-to-consider-when-deploying-your-react-app-to-heroku-b8a81fa02e82) or fine with current one — Rittesh P.V, Jul 08 '20 at 15:21
nginx cannot proxy `0.0.0.0`, if your node server is running on the same machine, you'll want `localhost` there like `proxy_pass http://localhost:3005/;` — jbielick, Jul 08 '20 at 15:32

score 1 · Accepted Answer · answered Jul 08 '20 at 15:50

1

Just like everything else, there are multiple ways to go about this. Depending on the way you have ended the question looks like you are open to exploring them.

Here are my preferences depending on the increasing order of responsibilities on my side vs what AWS handles for me:

AWS Amplify :

Given that you are already using React and Node, this will be a relatively easy switch. Amplify is a not only a set of very useful frontend framework by makeing it easy to add functionalities like Authentication, Social Logins, Rotating API keys (via Cognito and API Gateway) etc but also backend logic that can be eventually deployed on AWS ApiGateway and AWS Lambda. Not only this but AMplify also provides a CICD pipeline and connects with Gothub.

In minutes, you can have a scalable service, with opetion to host frontend via AWS CloudFront, a global CDN service or via S3 hosting, deploy the API via ApiGateway and Lambda, have a CICD pipeline setup via AWS CodeDeploy and Code Build and also have user management via AWS Cognito. You can have multiple enviornments dev, test, beta etc and have it setup such that any push to the master branch is automatically deployed on the infra, and so on and so forth other branches being mapeed to specific enviornment. To top it all off, the same stack can be used to test and develop locally.

If you are rather tied down to use a specific service or function in a specific way, you can build up any of the combination of the above services. API Gateway for managing API, Cognito for user management, Lambda for compute capacity etc. Rememebr, these are managed services so you offload a lot of engineering hours to AWS and being serverles means you are paying for what you use.

Comming to the example you have shared, you don't want your node process to be responsible of serving static assets - its a waste of the compute power as there is no intelligence attached to serving JS, CSS or images and also because in that case you introduce a new process in the loop. Instead have NGINX serve static assets itself. Refer this official guide or this StackOverflow answer.

answered Jul 08 '20 at 15:50

Mayank Raj

1,574
11
13

This is my internship work,I have spent almost more than 55 days of development day and night, and we are about to launch in this week so your solution sounds really good, but implementing it would take more time isn't it? So please suggest an efficient method within the bounded time? – Rittesh P.V Jul 08 '20 at 15:57
1

Hey Ritesh, If all you have to do is deploy the app and are not really tied down to AWS have a look at Heroku and more specifically this tutorial - https://blog.heroku.com/deploying-react-with-zero-configuration If you are instead tied down to AWS, and not really concerned about scaling, usage load etc, serve the static assets via NGINX directly. I've included the link towards the end of the answer. – Mayank Raj Jul 08 '20 at 16:03
The internship people who gave me the project asked me to use the AWS EC2 instance, Nginx for load balancing. So I can't shift to Heroku now, So please provide me with a better suggestion, Thank you for your response immediately – Rittesh P.V Jul 08 '20 at 16:14
1

Well in that case, you can continue with serving the express app and using NGINX as reverse proxy and serve static assets from the dist/build folder via NGINX directly. Please note that, if you have NGINX on a server and a single NodeJS process running to which NGINX is routing request to, NGINX in this configuration is acting as a reverse proxy and not a load balancer. There is nothing here to balance load amongst. – Mayank Raj Jul 08 '20 at 16:18
Well, you are very clear thanks man, So how do I modify the nginx conf to act as a load balancer for the backend node.js running separately on 3005 – Rittesh P.V Jul 08 '20 at 16:20
1

Glad I could be of help @RitteshP.V. Load balancing is when you have multiple processing units, NodeJS threads/processes in this case and want to distribute incoming load among them. As you have just one running on :3005, you don't need load balancing. To be frank, it's quite possible that the folks who gave you the project just misused the word and rather meant setting it up as reverse proxy. You'd be surprised at how frequently this is used – Mayank Raj Jul 08 '20 at 16:28
Somebody give this guy a medal ! Very clear and answered with patience thank you . – Rittesh P.V Jul 08 '20 at 16:41

Deploying react js and node js full stack on AWS production?

1 Answers1