Dockerized ReactJS & Express on Elastic Beanstalk - reactjs

I'm working with a startup to build an app. I've been studying CS for 2 years, so I'm new to lots of things. For our app we have a ReactJS front-end, Express back-end, and MySQL database. Currently it's deployed on AWS Elastic Beanstalk in a NodeJS environment. I configured it to run react-scripts build after it's been deployed. It's serving the static React-generated files through the Express server (bad idea, I know). This has worked for a while, but now the instance is running out of memory when trying to build.
I've been looking into Docker as a better solution (I've never used Docker before this week), and now I have a local development setup with 3 containers: a MySQL container, a Node container running the backend, and an Alpine container just running react-scripts start. The front-end is using a proxy to connect to the backend. This is all working fine locally (except that my backend container can't connect to the Internet so an external API is broken), but I have no idea how to deploy this correctly to AWS.
With Elastic Beanstalk is there a way for me to build and deploy a single Docker container with the pre-built React front-end, configure Nginx to serve those static files, and then pass all /api requests to the Express server? I'm using RDS for the database, so I don't feel like I need to deploy another container for MySQL.
I don't expect you guys to solve my problem, but I'd appreciate being pointed in the right direction. Maybe I'm going about this completely the wrong way.

React App:
I suggest you deploy your react application on AWS Amplify. you can find resources on how to deploy on the internet very easily.
MySQL
You can host your MySQL database on an EC2 instance or use any other hosted service for the database.
Express App
Now you can host your express app on EBS using the docker platform. You can also get the resources for this on the internet.
===========================================================================
Now add your express app endpoint in AWS Amplify's environment to use it with react app.
Add MySQL URL to EBS's environment to use it with Express App.
Note: AWS amplify serves your app on HTTPS so you have to enable SSL on EBS also. You can do it with the AWS certificate manager by
getting an SSL certificate and attaching it to the EBS.
It will be easy if the domain is handled by Route53 but again you can also achieve this with any domain service provider.
It is recommended that you should migrate your domain to Route 53, as you will get more control and also many other benefits.
Refer this answer: https://stackoverflow.com/a/38225802/9323655
Hope my answer will guide you in the right direction.

Related

What AWS services/architecture is used as I have Front-End, Back-End & Database Application?

As I am new to AWS, so it will be really helpful for me if someone suggest me the correct strategy.
I have requirement in which I have to deploy Back-End Application with Node.js and Front-End Application in React.js which call endpoint of Node.js.
And the database is PostgresSQL.
So, as per my understanding below AWS service to be used for Back-End & Database: -
1). Node.js - Back-End Application: - To be deploy over EC2 instance
2). PostgresSQL - Database: - To be deploy over RDS Service
But I am not sure which service to be use for Front-End -- React.js, so that it can call an endpoint of Back-End Application deploy on EC2 instance?
You could also use EC2 for the front-end. With EC2 you get direct access to a server and you can configure it however you like.
But since a pure front-end application is just a bunch of HTML, Javascript and CSS files, you can also deploy it to Amazon S3 (+ an optional CDN for better performance and less cost). You might want to check articles like this one.
Bonus: you might also want to check AWS Amplify for these purposes.
ANother option you have is you can deploy your client to AWS Elastic Beanstalk. Elastic Beanstalk is a service for deploying and scaling web applications and services. Upload your code and Elastic Beanstalk automatically handles the deployment—from capacity provisioning, load balancing, and auto scaling to application health monitoring.This service hosts web apps.
For details, see https://aws.amazon.com/elasticbeanstalk.

How to deploy a Flask+React application to Azure Web Service

I have been working on this app on my localhost, which has Flask as the backend (localhost:5000) and React as the front end (localhost:3000), and they have been communicating well. Now I am supposed to put it up online so that other ppl can see it as well - I didn't have much experience in Azure, but how can I deploy these two components(React&Flask) into one URL on Azure web app service? (Before I had some experience in using FTP to upload the 'build' folder to a "site/wwwroot" folder to put up a simple React app without any backend)
Newest
After testing, the python project is deployed in the webapp, the react project is deployed in the virtual application, and the normal node project is also deployed in the virtual application.
Deploy the flask python project to the windows environment, the normal deployment method will fail, please be sure to follow this blog document (third-party document) to operate, it works for me.
Running Flask app with HttpPlatformHandler in Azure App Services
The effect is shown in the figure. You can see that the normal node project can be accessed normally, but the react project is not. I think there are some bugs. (Has raised a support ticket to confirm)
The deployment method of virtual application is recommended to adopt the publishing method shown in the figure below.
Privious
It is recommended to choose windows when creating azure web app, because windows supports virtual application.
We can deploy flask app normally and deploy react app in virtual app.
Under normal circumstances, the process.env.port of the two webapps is the same and will not interfere with each other because of the virtual path.
Reference post:
1. Vue Frontend and Express backend on same Azure web app Service
2. Azure Front Door Is Not Maintaining Custom Domain in Browser

Microservices architecture tutorial for springboot and react in production

My project contains two apps. Backend – springboot and a frontend - React.
I am using the spring-boot app only as a rest API to fetch data from the database. The React app frontend will call the API. Up until now, we were using only one environment (Windows) so production build was one jar that actually contains both apps and a tomcat. That was quite simple so by adding a proxy in the package.json file to point to the backend and some maven(frontend-maven-plugin) plugin the building process is simple.
Now we need to change the system architecture so each app will be hosts on a different windows machine.
I was trying to use express to host the react app but I am struggling with the proxy setup for the backend (spring) app from the express server. All the tutorials that I found actually using the express server as the backend API but I need the express server only for hosting the production build.
Is there a good tutorial that shows how to set up this type of architecture in production env.
Thank you

Deploying Angular App on AWS for Production

I have an AngularJS app which we need to deploy on production. It also has REST API calls.
As of now for development, we deployed it on AWS EC2 Ubuntu Instance and using grunt serve to run it.
I know grunt should be used only for development, so what are the other ways to deploy Angular App on AWS? I see many answers for deploying it on S3/Cloudfront. Can't we use EC2 instance with Nginx/Tomcat for this purpose on production?
Thanks!
You can setup CloudFront infront of EC2 instance to cache static contents in Angular App, which will improve the application performance better at scale.
If you can clearly seperate the Angular App including the index.html, it is an option to host it in AWS S3 also using CloudFront as a cache and a proxy to your EC2 instance which will reduce the overhead completely on delivering static content from the EC2 instance, further improving the performance. Also you can use S3 to store file uploads.

Deploy Java Web Application and MySQL database in the cloud

my issue is that I've been developing a Java Web app in Netbeans 7.2, which I've used Hibernate and JSF Facelets to communicate and show the data from a MySQL database deployed in my local server (localhost).
But now, I want to deploy both (my java web app and mysql database) in the cloud in a web server, or something but I don't know even how to start this. I've seen something about Google App Engine, but I didn't get the idea, and many others...
I just need to deploy my app to give access to other people to use my web app.
Google Appengine is a Framework.
its not webserver where you can deploy your app as on your local machine.
what you are looking for is
Amazon EC2
Google ComputeEngine
OpenShift
and others...... (to many to list them all)
most of them are not free.
some like openshift are if you dont need much resources.
there you can install the server you need, (its just like a remote server)
and deploy your app to.

Resources