I am trying to make a portfolio-building app on aws. I am using reactjs for the front end, lambda(nodejs) for the backend, and other various technologies like dynamodb and API Gateway. My question is, how do I get the react content served up every time someone goes to my domain name? Is it done through lambda? Do I need an ec2 instance? I am stuck on this and if someone can help me out I would really appreciate it. Thanks!
There are many approaches you could use to set this up, it depends on what type or architecture you are looking for. I prefer to use AWS lambda functions attached to the API gateway for backend How To Build Your First Serverless API with AWS Lambda and API Gateway, and for frontend host the react.js app in s3 through cloudfront. This setup means that your entire application is serverless and you will be hard pressed to make it out of the free tier on AWS. Here is a great blog article detailing how to set this up Deploying create-react-app to S3 and CloudFront
So where is your front end running?
It could be many locations:
EC2 instance
Elastic Beanstalk (either as a Node app, or as a Docker container)
ECS/EKS (with or without Fargate)
As a series of Lambdas (running behind an ALB)
Without knowing your application and experience of AWS services it's quite hard to advise exactly where you should host it. However, once you decide which one of these you are using you can points its target A record/CNAME at your domain name by editing the A record/CNAME in your hosting provider.
Related
I have a MERN stack app and i am hosting it on AWS Elastic Beanstalk with a static IP, but I want to move to Lambda functions so i can save some money.
My backend and frontend is not separated and my database is MongoDB. I couldn't find a guide for my case so my question is, can i migrate my app to Lambda? if yes, is there any complete/easy guide out there to follow?
I have tried:
deploy-an-express-js-app-to-aws-lambda-using-the-serverless-framework
and had no luck.
AWS documentation also was complicated:
Going Serverless: Migrating an Express Application to Amazon API Gateway and AWS Lambda
Thank you
The short answer is - you cant, at least not a one to one migration i.e. host your entire stack on Lambda.
You'd need to start separating your stack out into at least three defined layers - UI, Logic, Data. For each layer, there is a best practice serverless pattern and implementation to follow.
If you are unfamiliar with AWS Lambda, and distributed/serverless computing as a whole, this is likely to be a very steep learning curve. You'd have to weigh up the pros can cons.
If all you are trying to do is to save some money, why not use AWS EC2 and pick a smaller instance? These are very cheap.
A hybrid approach that could work well is to move your front end/ui onto serverless hosting (AWS Amplify / CloudFront and S3) and keep your backend on a 'server'. This will take some load off your backend, and should make moving to a small instance easy.
If you have any large files/images etc that you host, move them to a SaaS CDN, or create your own with CloudFront and S3.
Next, start migrating your databases to serverless (AWS DynamoDB or AWS Aurora). This will again free up some compute on your backend to reduce costs.
Finally, you can refactor your backend to a web api using AWS Lambda and API Gateway.
I have done one of the tutorial for aws amplify (the todo app). When it was done I had no more need for it so I deleted the application from the cloud.
Then one though hit me. If I have the source code locally (or hypothetically in git) for my amplify application, can't I somehow recreate the app in the cloud again from the source? if I understood it completely it is supposed to be infrastructure-as-code.
Currently, Amplify CLI doesn't support this.
Amplify is not an Infrastructure as Code.
From the AWS Documentation:
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. With Amplify, you can configure app backends and connect your app in minutes, deploy static web apps in a few clicks, and easily manage app content outside the AWS console.
Even if it's not supported, apparently there is some way to add services to the newly created Amplify from the existing Amplify backend.
https://github.com/aws-amplify/amplify-cli/issues/3505#issuecomment-597897873
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.
Im new to using the serverless framework and I need to make a log in page and registration in my React js app. I'm using MongoDB and Serverless as my api. Could someone point me in the right direction how to make this work, since I had no luck finding any examples online.
Here is a serverless fullstack application boilerplate which contains registration and login, using AWS Lambda, AWS HTTP API, Express.js and React. It does not use MongoDB, however, as that does not pair well w/ AWS Lambda due to connection issues. Instead it uses a single-table design with AWS DynamoDB to store application data.
https://github.com/serverless-components/fullstack-app
I tried to deploy my single page application with spring boot and react.js. but I don't know where to start. I did my research and EC2 and S3 would be the right setup for deploying spa but I'm not quite sure. is there any resource I could have?
There are so many way to do this.
But I would use AWS CloudFront, and have the EC2 as a source (could also have the EC2 behind application load balancer) and the react.js in an S3 as a source. This way you also get them under a common domain name, and you can easily enforce HTTPS.