javascript - How to deploy a React + NodeJS Express application to AWS?

Question

I have a React + Webpack/Babel + Node/Express application and I want to deploy it on AWS.

Would I have to deploy React and Node/Express separately? Or could they be deployed together at once?

Answer 1

1. If you have two distinct projects

e.g. a React single-page app and a Node/Express API.

a. You can deploy both separately

• the frontend (the React app) on S3 and CloudFront (tutorial)

• the backend (the Node API) on Elastic Beanstalk (recommended) or EC2

Another option is to deploy both parts together at once on Elastic Beanstalk or EC2. However, you'll miss out on the benefits of hosting on S3 and CloudFront, i.e. faster delivery for your users and cheaper costs. In my opinion, it's also more convenient and less prone to unexpected errors to update and deploy separately the client-side and the server-side of a web application.

Another benefit of deploying separately: For organizations with different teams for the frontend and backend, it's easier for each team to be able to deploy their side of the application on their own without depending on the other team.

b. Why S3 + CloudFront instead of S3 alone?

• all the benefits of using a CDN
• your own domain name and a free SSL certificate in 1-click
• redirection on 4xx errors (necessary if your app uses a HTML5 History-based router)
• the caching system
• http2 and http to https redirection

c. How to handle CORS?

You can use different subdomains, e.g.

• api.domain.com for the Node/Express API
• app.domain.com for the React app

Then enable CORS in the API:

app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)

2. If you have a single project

e.g. a Node app including some React views.

You have to deploy the whole app on Elastic Beanstalk or EC2.

Note: If you have a single project including two sub-projects (i.e. a folder for the React app and another one for the Node API), and if both sub-projects still work when they are separated, then you can deploy the sub-projects separately (see first part of the answer).

3. In both cases

Run your Webpack build before deploying the React part. You can do it manually (before deploying on AWS) or automatically (in your CI/CD system). If you bootstrapped your app with create-react-app (CRA), just run yarn build or npm run build at the root of the project and upload the content of the "build" folder to your S3 bucket.

4. Tools

• Official AWS S3 CLI - Manage S3 buckets and objects using high-level aws s3 commands.
• Official AWS Elastic Beanstalk CLI - Manage and deploy your backend using eb commands.
• S3-deploy - CLI utility for deploying files to S3.

5. If not restricted to AWS

I answered a related question not restricted to AWS.