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.
Related
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'm new to SPA development, so this may be a stupid question. please understand.
My question is "Is SPA(Single Page Application) needs a Application Server?"
As I understand it, the SPA gets the response after calling REST API. It use that response to re-render.
If so, is the server that handles REST API "Application Server"?
So many posts say Application Server are tomcat, oracle, etc... and they are also say Application Server handle the request to access the database. Then what is "Application Server" in SPA? or there are no Application Server in SPA?
(Are there any architectures or systems I'm not aware of?)
If I'm misunderstanding the architecture, please let me know.
I want to understand web server and Application Server in SPA. So I have read many posts but I'm still confused.
Thanks.
A SPA needs one server to serve the SPA bundle to the users browser.
If the SPA interacts with an API or APIs, the API(s) could be hosted on the same server that served the SPA bundle, or they could be hosted on other servers.
A Single Page App requires a server to serve the .css, index.html, and .js files it requires. It is not a requirement that that an SPA must communicate with an application server via any means at all.
Your content can be static or self generated by the app itself. Should you require communication with a backend server, you can consume that via some sort of api over
protocols such as http, https, websockets or Server Side Events.
To summarize. An SPA can be completely self contained OR access an api to provide functionality. A standalone app requires a server only to serve the component files (.css, .js, .html) of the app itself.
With SPA as well you will have html file and images, js, css files that will be loaded when you launch your single html webpage. So you need to host this static content on some server. So it can be separate web server or same APIs
server(Application Server) which can host these static content and serve request for those files. It can be also hosted on cloud static server and distributed via CDN
Short answer:
Yes. SPA apps do need to live somewhere (as you need to host the assets (js, css, initial html, other)
Long Answer:
You need to setup somewhere to host the entry files as per the short answer. In the past I've used anything from:
NodeJS code base services running on a Docker container (app & assets being served via express), to
dotnetcore on a similar stack (With kestrel server serving the assets running on docker on ec2).
Docker container running Apache webserver hosting the statically compiled assets
More recently I've dabbled with compiling the SPA app to a bunch of static assets (such as the ability NextJS / Gatsby provides with their tooling, but there are tons of others or alternatives in other SPA worlds)... but even then you'll need to host those assets somewhere.
S3 on Amazon has the ability to host SPA apps directly via a bucket setting & providing an entry point
Vercel (...or any other SaaS alternatives, Vercel is just where I host my personal stuff and has been easy to get going)
Again it's all up to you, but yes, you still need to make the JavaScript available somehow, you just need to pick your mechanic. SaaS with a baked in WebServer such as Vercel, a CDN like S3 that AWS provides, or go totally custom and spin up your own WebServer as application entry.
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.
I've an existing web application developed in angularjs 1.5. And now, I'm planning to deploy it in a serverless architecture on AWS.
I've been googling around to get leads on how to achieve this. But, most of the links/tutorials that come up in Google search, suggest using ng-toolkit. However, when I start following those links/tutorials, I realize that those tutorials use angular2.0. These links/tutorials are not helpful, as my angular version is 1.5 and I know, angular2.0 is way different from it's predecessor.
So, my question is -
Is it possible to have my existing angularjs 1.5 application, to be deployed in a serverless architecture on AWS? If yes, can you share some links, that will help me set this?
We have successfully deployed our Angular 1.x web applications to an AWS S3 bucket, and then configure the bucket to support static website hosting.
You will want to give your bucket the same name as the URL of your desired website. Your bucket contents will need to be public, so be careful with what you push to this bucket. Should only be your Angular website bits.
You can then go to Route53 and create an alias A record to point to your S3 bucket. But note that is will only give you http:// support. To support https://, you will need to create a certificate in AWS CertificateManager and a corresponding AWS CloudFront distribution. You can source your CloudFront distribution to pull from your S3 bucket, and use the new certificate to support https://. You will then need to go into Route53 and point your A record to the CloudFront URL.
Deploying an angular 1.x application on a serverless architecture is like deploying any static website. You create an AWS S3 bucket, configure it for static website hosting, then set up CloudFront with https (use the CertificateManager to get a free certificate) to point to the public url of the bucket as origin.
Then you can set up Route53 to point your domain to the CloudFront URL. Here is a YouTube-Tutorial describing the whole process: https://www.youtube.com/watch?v=uwgB_sIhIko
I’m new and learning how to deploy to AWS.
I made angular JS website and tried to deploy it at localhost with node.js npm/bower. It’s worked. I tried to deploy it at MS Azure: deployed it from Github and it’s worked as well well (I did not do anything in setting and did not install node.js, but maybe Azure did it automatically?).
The last, I tried to upload it at AWS S3 bucket as a static webpage with allowing public access. It wasn’t work property: I can only see my index.html content but no routing content: so basically almost nothing of my webpage.
I saw a similar question (“How do I set up an AngularJS app using AWS?”) where a person was wonder about options to upload an AngularJS to S3 bucket or EC2. The answer says that one can use S3 at AWS if it's angular js static webpage. The person of that question went for EC2 option. If I’ll go for S3 option: I’m confuse: what is “static Angular js page” actually? will routing work at S3 or I must use EC2 with node.js?
First, you should really do a simple search and read the differences between static and dynamic webpages.
If you are using some sort of server-side technology like NodeJS, Java, Python, Ruby, etc. to generate the HTML for your web pages whenever a request is made then you have a dynamic webpage and you would need to host that on EC2.
If your webpage is simply HTML, CSS and JavaScript files, and the raw content of those files does not changes with each request then you have a static webpage, which can be hosted on S3. The advantages of a static webpage is that it is much cheaper to host, and when hosted somewhere like S3 it can handle massive amounts of traffic without any extra configuration or management on your part.
In your case I believe you are only using NodeJS as a script that you run once to generate/output your static AngularJS content. If that's the case then you have a static website. If however you are also using NodeJS as a server to handle HTTP requests dynamically then you have a dynamic website.
AngularJS is a client-side technology. AngularJS runs entirely in the browser. As such you should be able to host your AngularJS application on S3.
Since AngularJS routing works entirely on the browser side, it shouldn't matter where the page is hosted. You should expect it to work if the page is hosted in S3, since it actually runs in the browser, not the server.
What is “static Angular js page” actually?
Static AngularJS refers to the frontend content such as HTML, JS, CSS, Images & etc. You should be able to implement routing for static content from S3.
Will routing work at S3 or I must use EC2 with Node.js?
If you can separate the AngularJS App Static Content and Backend Code (e.g NodeJS Server Logic with Database access & etc.) then you can host, the AngularJS App in S3 and use EC2 for backend. This can get challenging to setup. To route both to the Frontend in S3 and to the NodeJS backend, in addition you can use AWS CloudFront.
However, since you are new to AWS, it would be better to use either AWS Elastic Beanstalk or EC2 with NodeJS i n the beginning for deployment.