I have frontend and backend both are using nodejs. Frontend is exposed and every request for api goes through the proxy module in the frontend, and both frontend and backend communicate on different modes.
Is there a way to deploy the above module, using code pipeline onto the Elastic Beanstalk platform ?
Why not deploy the front end on Amplify AWS?
AWS Amplify is a set of tools and services that can be used together or on their own, to help front-end web and mobile developers build scalable full stack applications, powered by AWS.
You just need to link your Repo and select your branch and everything will be deployed and generate also a random free domain or you can set your domain from the domain management section
Related
I'm absolutely new to Azure, CI, and CD.
I have an app consisting of a frontend developed under React + Typescript which sends CRUD requests to a typescript backend. Both front and end are NPM projects.
I've no idea on how to step from development environment to production, deploying to Azure.
Should I create two separate AppServices, one for each project?
If that's the case, how do I then connect them?
Do I just need to change the URL the server listens to?
As you can see I've no idea of what I'm doing but I'm eager to learn so any feedback is much appreciated
The most common approach is
Deploy frontend app ( react ) in one app service.
Backend nodejs app on a different app service.
Then, call the api of the nodejs app from the frontend.
Or,
Set up and run the client and server on the same server using a gulp file and deploy that project on an app service. In that case, there is no cross-site communication. This is the most preferred one.
Using the same app service for both front end and back end application. Refer nodeexpress-backend-with-angular-front-end-in-a-single-azure-web-app.
Using Cors to connect front end and backend Check here
Refer SO Link 1 & Link 2
And You can use deploy staging slots in app service to use different environment like (test/dev, Production).
Currently I am using aws ec2 instance to host my backend and frontend . Backend is in nodeJs and frontend is in angular. ALso using route 53 for routing . and bought domain from goDaddy.
I have used following steps for hosting.
for backend :
clone my backend files on ec2 instance.
run backend nodejs program using pm2(used to run nodejs in background)
used nginx as reverse proxy to point localhost to my sub domain.
for frontend:
cloned frontend production files on ec2 instance.
used nginx to point frontend file to my main domain.
Now nginx is little bit complex to handle for me. Is there any way to avoid nginx or to host though any other way ?
Thank you for your time.
If your frontend app uses angular, then presumably it's a 'Single Page App' that is only dynamic in the sense that it makes some kind HTTP calls to an (RESTful?) API provided by your nodeJS application.
If this is the case, then you can host the built version of the angular app in a public S3 bucket configured as a 'static' site, which will still be able to communicate with your backend via angular's HttpClient. You can use Route53 to point your bought domain at the bucket's index.html file, and also set up a CloudFront distribution if desired.
Your nodeJS app will continue to live on the EC2 instance, although you could consider either using Elastic Beanstalk to deploy the backend app for you, or at least setting up yourself a load-balancer and autoscaling group to give you fault tolerance and availability for the backend.
I am developing a web application in React with a Node.js back-end. I would like to host the images and static files built for the React application on Cloudfront. However, the React application relies on the Node.js server to obtain some changing data to populate the views.
I need to have a thorough understanding of the flow of the application in order to come up with a reasonable design. Here is what I think happens:
User enters URL in the browser
Client is directed to the closest Cloudfront edge location
Cloudfront serves the HTML and images to the browser
The React application bootstraps in the browser
An API call is made to the Node.js server, which returns the required data
The browser renders the React application.
Am I understanding this correctly? Is there a better way to architect my web application?
I am not able to find the information I require online and would appreciate any help!
Your architecture is correct.
Just to be clear, CloudFront is not hosting your files. CloudFront is a cache and will fetch your files from an Origin, typically an Amazon S3 bucket.
Using React && AWS Amplify, you can create a serverless architecture for this type of setup with minimal work. You can get started by following the instructions at https://aws-amplify.github.io/docs/
In a nutshel :
Install with:
npm install -g #aws-amplify/cli
$ amplify configure
Then in your project :
amplify init
amplify add api #this will create your API as AWS Lambda functions exposed through Amazon API Gateway)
amplify add hosting #this will create the Amazon S3 bucket for hosting and the cloudfront distribution)
amplify push #to create all this on your AWS account for you
If you search for 'aws amplify react' you will easily find a dozen blog posting showing you how to get started. There are so many I can not recommend one in particular.
I am deploying a React.js front-end (built with create-react-app) and a back-end with a CRUD API that connects to Cloud SQL.
Is this a good way?
React.js front-end is a default service.
Back-end API is backend service
I'm familiar with deploying to Heroku, which had front-end and back-end on different ports. Would that work for App Engine?
This is all in Node.js.
I don't see any issues with the described design.
To get you on track you can take a look in Stack Overflow thread How to deploy create-react-app to Google Cloud or the following tutorial.
You can run applications on different ports with setting port forwarding in your app.yaml file.
The design pattern is good.
You only need to create a dispatch.yaml file which is only one per project.
Your dispatch.yaml file would look something like this:
dispatch:
- url: "*/backend/*"
service: backend
Then your frontend at project-id.appspot.com will simply make requests to https:/project-id.appspot.com/backend/ *, and these requests will be redirected to the API service.
Let's say I have a single page application using React/Node, and I want to deploy that application using a content delivery network to improve load performance.
To do that in Amazon Web Services (AWS) I would need to incorporate different services to work together.
I would need to host my bundled static web page files on amazon's S3 bucket. Then I would need to host my Node API on Elastic Beanstalk. Lastly, I would then need to setup a CloudFront distribution and set my origin to my S3 bucket.
It would look something like this:
Now, if I wanted to do the same thing in Firebase, according to this video tutorial, I can simply setup Firebase Hosting which is backed by their own CDN which gives similar improved load times. Firebase hosting can encompass the entire React/Node application without the need for separation or various services like I did in AWS.
My questions are:
How does Firebase hosting encompass dynamic Node Apps with out the need to separate the front and backend or use various other services?
The point of a CDN is to cache files, so it wouldn't be possible to use a CDN on a Node API right or wrong? If right then how is Firebase using Node app in their CDN?
It seems much simpler to setup on Firebase to serve an entire dynamic app on their CDN compared to AWS, would their be any drawbacks to this or is it just a better service?
Firebase Hosting is only for your static frontend code. But there is a way to connect Firebase Hosting and Cloud Functions to serve dynamic content that is pretty easy to setup.
https://firebase.google.com/docs/hosting/functions
You can think of Firebase Hosting a zero-ish config equivalent to the AWS S3/CloudFront section of the diagram.