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
e.g. a React single-page app and a Node/Express API.
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.
4xx
errors (necessary if your app uses a HTML5 History
-based router)http to https
redirectionYou can use different subdomains, e.g.
api.domain.com
for the Node/Express APIapp.domain.com
for the React appThen enable CORS in the API:
app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)
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).
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.
aws s3
commands.eb
commands.I answered a related question not restricted to AWS.
To deploy your app hassle free, you need to learn about three concepts: Microservices, containers, and process managers. I will discuss them with a bit more details and few links to get you started:
Microservices is an architecture that allows you to divide your app into smaller services. This has multiple benefits: 1- The services are easily testable. 2- The services are replaceable. 3- The services can scale separately.
Almost every useful app has at least dozens of dependencies. You can install dependencies on the target machines, but most certainly you'll face few challenges. Programs like Docker allow you to create a container for your app and deploy that container on the cloud. (Regardless of the cloud provider) Learn more...
Process managers ensure that your app is running smoothly and all parts are healthy. If your app crashes, it can easily restart the app.
Note: This approach does not work if you are doing server-rendering with ReactJS. Go to the next option.
You can simply build your app and deploy it to a static S3 website. This option works if you use microservices architecture to separate your API from your react app.
Creating a static website in S3 is really simple:
For more information check AWS handy documentation.
You can launch different EC2 instances for every microservice. (API, React app, etc.) You need to use a process manager such as PM2 to ensure your app is running smoothly.
To create an automatic deployment, I prefer to use Terraform in combination with Ansible. Terraform is very declarative. You describe how the cloud infrastructure should look like and Terraform build it for you.
Ansible, on the other hand, is very procedural and is perfect for provisioning a new server.
Ideally, you should have unit tests to prevent shipping buggy code to the production. (Use Jest with supertest, Enzyme for shallow rendering). But the world is imperfect, and it is good to receive any potential bugs that happen on the client. Enter Sentry