I have an elastic beanstalk instance in which I have deployed my spring-boot application. By default elastic beanstalk gives you a URL for your environment over http.
While this works fine this has led to a lot of problems for me. I have the frontend (my react application) deployed on Vercel. I want my frontend app to get data from my elastic beanstalk app. Problem is the url is in http. On the console I get an error like this
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS.
which renders the app useless basically.
After hours of google I found out that I have to request the data over https because my vercel app is over https*(I might be very wrong here)* I've tried some solutions to get my elastic beanstalk app to serve the data on https to no avail.
Here is what I've tried
I created a self signed ssl certificate using openssl and uploaded
it to AWS via the AWS cli. I then went to my applications load
balancer settings and added the ssl certificate . (This did not
work, I cried)
I used keytool to create yet another ssl certificate and added it to my
resources folder and the corresponding settings in the
application.settings file. I repackaged the jar file and redeployed
it to AWS.(Still didn't work. Didn't cry this time though. I was
out of tears)
Question How do I serve the data from my spring-boot app to my Vercel react app over https? Or any other method. Just anything that will work.
If one thing is clear from all that long nonsense I've told you up there is I don't know wtf I'm doing. Just following a bunch of tutorials which for all I know keep destroying my app and your time even more.
Now my app is broken and now I cant even load the static assets on the elastic beanstalk URL because I'm getting another error
400 Bad Request
The plain HTTP request was sent to HTTPS port
I know that question is really long and maybe even wrong. Please help
So once you have the SSL certificate ready this what you need to do in the AWS Elastic beanstalk to serve your application for https
Add a new listener to for port: 443 and select HTTPS
After this incase you are facing any certificate error while browsing the page, ensure that the URL mentioned in the certificate is matching the URL in browser
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 configured an angularjs application in AWS S3. I need to remove hash(#) from URL So, followed the rules mentioned here
Angular on Aws S3 everything works fine but when a refresh on any page it is landing into the base/root/main page.
Could anyone help me to solve the issue.
FYI: Am using Apache to serve my S3 content.
This happens because when the browser is reloaded when the angular app is in a route(Not with #) it request it from S3 where there isn't a file on that path. The Angular development handles this which is why its not appear locally. As a workaround you can do the following.
Setup AWS CloudFront Distribution in-front of S3.
Create an error handler if a different path is called and its not found in S3 to return the index.html.
For more details and automate the setup use the AWS Cloudformation in the article Deploying Angular/React Apps in AWS
Note: You can directly serve your S3 content using this approach using the Apache server only for the backend logic which can also be routed through CloudFront while in the same origin.
I want to make my website more secure. So i was thinking of deploying front end(using angular js) on s3 with aws cloudfront and all my api's(using dropwizard) in API gateway.
How to deploy angular ap on s3 bucket using cloudfront?
Is it possible to call api's from the s3 bucket?
i have researched on this but i get only for angular app and not the other part(calling api's from the s3 bucket).
THis should work without a problem. I have angular apps that are hosted as static s3 websites, calling back-end api's (both thru amazon api and other custom api endpoints running on ec2 instances).
SO yes, in a general sense this will work - if its not working for you, you could give us specifics about what you are trying to do, and what error messages you are getting.
I have a phonegap app that uses jquery to post to a remote server, running on Google App Engine.
What's the best way to ensure that only my phonegap app can post to this remote server? I've been scouring the web for an answer but can't find anything concrete.
Normally I believe you'd check the referrer to ensure that the request is coming from a whitelisted domain but in this scenario there is no domain because it's a phonegap app.
This question is similar but it's gone unanswered:
Security issues with phonegap remote server access
You can't. Any request that your app can make - including whatever authentication credentials you care to embed in the app - can be generated by a third-party. The most you can do is obfuscate, by embedding secrets in your app, but a clever user can extract these.
A better option would be to authenticate the user, rather than the application.