I have react JS as my client side framework and Node JS express is my API backend services with SQL database on a home project. The app runs locally on my machine and I want to deploy the app in azure. I am not sure if I have to take 2 app services instances to manage my frontend and backend or take a linux VM and manage the deployment myself as I am doing now locally with nginx and pm2.
Considering scalability in future, how to deploy in Azure and what I have to take as Azure components?
I'm assuming you are using the free tier for learning purpose as you said it is a home project?
For scalability and availability, I would go with a 3-tier architecture, the first tire is for the compute stuff (the nodejs app), deployed in an auto scalling group of minimum two instances all behind an Azure load balancer
The second-tier is the DB, I would go for Azure Databases for this
And last, is your React app, if it is a statically generated app (like Gatsby), I would go for Static website hosting in Azure Storage, otherwise it is best to put the React server in the same Linux instance as Nodejs app, and use path redirection in the load balancer to target the App
PS: this will cost a considerable amount of money depending on the load, but you don't have to care about the scalability, also you don't need to manage your database anymore.
Related
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.
What all options we have to deploy react web application to Azure?
Few options which I have already explored are: Azure web app, Container instance, Azure blob storage as static website.
What all other options we have to deploy the react web app to Azure? What option is better for react app (With regards to Availability, cost, maintenance)?
Also, To run react app, all we need is artifacts (like js, css, images etc.) which we can get by running simply build command so do we really need server to execute the code? can we not directly host it to some storage and then browsing it?
I am aware that my topic is already has many answers, but I can not find what I need and want to listen to cutting edge trend.
I am building react application with create-react-app and nestjs as backend server. After deployment I found out that there is some trouble with SEO on my website and I thought my app deploying structure might be wrong.
Here is my structure.
S3 for react app hosting.
Cloudfront
Nestjs server on EC2
RDS for database
Route53
So my react app website url is https://myapp.com, server url is https://server.myapp.com. I call server apis on client by using axios with server url like https://server.myapp.com/v1/users.
I found out many people deploy there both client and server in one EC2 instance using tools like NGINX or APACHE. The reason I was not adopting these were the benefit of using cloud services was I do not have to concern about these. But after deploying applications, it seems deploying on same instance is more better is many ways.
Can I listen to some ways of structuring web app deployment with server? And is my structure is the reason of poor SEO?
It's upon to you how you want to deeply and host your frontend and backend whether on the same instance or different instances it's according to your apps traffic and whole other factors.
Now we come upon the SEO part. In your case, the first SEO factor will be the content that you are serving on the internet and another factor will be the performance of your website. The content part totally depends upon you that how you are designing it or writing the content. But there are some strategies I can share on increasing your performance so that this factor doesn't create any chaos for you.
Since your content generation is dynamic and it will generate when the user requests a particular resource from your server. So caching can help you here to optimize the initial server response time. So you can cache your content by using Nginx, varnish, or use a service like Cloudflare.
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
Me and my team are working on a product deployed in Azure, all of our backend services will be deployed by using k8s service in Azure and it seems like the most pragmatic and right choice for us.
We also have ReactJS frontend for some of backend services. We deploy them by using Docker and k8s at this moment. We started thinking about scaling of our web apps and found that everything can be done by Azure Web Apps.
I would like to know what is best practice of web app deployment in Cloud(Azure in my case):
Should I use Azure Web App service for this purpose?
Or it is better to keep everything in my k8s cluster
Any link or a book as source of true might be even better :)
Update 1:
I also found out that web apps can be deployed by using Blob Storage and Azure functions to access the static content from the Blob Storage. What do you think?
Azure WebApp is a perfect option for your requirement check this link for more details and guide