I am trying to separate frontend and backend parts. I deployed frontend to S3 bucket (https) and I have a backend on elasticbeanstalk (with http://***.elasticbeanstalk.com). Since both are development environments I won't buy domain for them and I am looking for a best idea how to make it works together.
HTTPS frontend and HTTP backend doesn't work, because of mixed content
and I can't get HTTPS on *.elasticbeanstalk.com (I would need to have my own domain)
Only idea I see is probably API GATEWAY, but:
I am not sure if It would be possible to use HTTPS there
I would be hard do deploy changes I think
I have quite nice build backend structure and using gateway would ruin that
Maybe some with bigger experience suggest me something?
Related
I'm new to AWS and I'm in the process of deploying an app there. I already hosted my frontend in S3 and cloudfront and generated a certificate in order to serve my frontend with https. Now I need to provide access to my backend. I already created the proper structure in EC2 and I can even retrieve info from my backend through simple http. The problem is that once my frontend is https and my backend is http it refuses to receive info thowing an error for "mixed content".
I already read a lot of articles from AWS and yet I'm confused on how to implement https in ec2.
I've created load balancers, VPC and etc, but I really can't make it work.
If anyone can help me with , I'd be thankful!
I'm working on this site that I'm hosting with AWS. I'm hosting a vue.js frontend in an S3 bucket and the backend utilizes Spring Boot hosted with Elastic Beanstalk and a MySQL RDS instance. After playing around some, I got the frontend to serve up files via HTTPS, but now my requests to the Spring API are failing.
I've done a lot of digging on this and it seems that are may be several ways to handle this, but I just keep getting stuck and not knowing where to turn next. I've tried playing around with setting up a load balancer, and also tried configuring a proxy in a .ebextensions configuration file.
This whole thing was working when I set it up with HTTP originally, but now that the front-end is serving up HTTPS it won't work.
Web browsers must be blocking your mixed HTTP/HTTPs content because of their inbuilt security. You need to make sure that you setup the whole site using HTTPs or HTTP. As you have already set up the S3 content to be served through HTTPs, now you must configure your Elastic Beanstalk environment to be setup with HTTPs too. Here is the link to help you with that
Configuring HTTPS for Your Elastic Beanstalk Environment
If your site is built with a CRM? (WordPress/Joomla/ect.) then there are plugins/extensions that handle that. I had a similar situation with a WordPress site, and used the plug-in called "SSL Insecure Content Fixer". Worked without a hitch, rather than scanning through the entire site for mixed HTTP/HTTPs content.
I am trying to deploy my angular app and nodejs server on aws. To deploy the angular app, I am using s3 bucket and enable static website hosting.
To deploy nodejs, I am using ec2. I have chosen to keep both the server and angular frontend separate.
I wanted to know how this will be available to the outside world. I have purchased a domain name say www.example.com. I am attaching with an s3 bucket, so upon launching www.example.com, I get to see my angular app. But I also want to use the same domain for my nodejs server as my angular app is making API calls to the nodejs server. Do I need to purchase a different domain for my backend server?
In my local development, I was simply running my frontend on localhost:4200 and nodje on localhost:3000. But I am not sure how it would work on the cloud.
There are multiple solutions to this problem.
You could have www.example.com point to your S3 bucket and api.example.com point to your backend.
Another solution would be to use CloudFront and configure it with multiple origins: one for your frontend (S3) and one for your backend (custom origin, API gateway or Application Load Balancer). You would then have a specific behavior like /api/* serve your backend. This solution has the advantage of having a CDN in front of both your frontend and backend and avoiding CORS request in the frontend (+ many more features offered by CloudFront).
I've made the following diagram showing the pieces which this request will flow through:
As #jogold has said, the key is CloudFront, which will behave redirecting to FrontEnd or BackEnd (Same distribution, multiple origins, multiple behaviors)
Remember to create a new origin ("Origins and Origin Groups" tab), but also a new behavior ("Behaviors" tab): Use the expected "Path Param" (Your app also should have this as a BasePath) and pay attention to "Precedence" (Default must always be the last).
In my case, "PathParam" value for BackEnd was "/api/*"
I have a WordPress blog that serves niche content on domain.com
On a different endpoint, domain.com/api/ I have a completely different Node.JS API that doesn't regard the WordPress but I want to serve it from the same domain.
It is worth mentioning that we proiritize performance and speed above all.
My thought was the following :
Set up 2 EC2 Instances, one for the WordPress and one for the API (Maybe make the API a Lambda instance ?).
Set up an Application Load Balancer that will know how to route requests with a rule depending on the URL.
Is it the right way to go ? Should I just use nginx as a reverse proxy and serve the Node.JS API on a local port ?
I also want to use Elastic Beanstalk to save myself the headache of configuring the Load Balancer and the Auto Scaling group.
P.S If anyone has any advice or good habits on how to build those (With S3 Bucket perhaps, over CloudFront, etc etc) it will be more than welcome.
Thanks !
Is this possible?
I am building a ecommerce site that requires calling external api service built on HTTP.
My site is built on AWS EBS, with django(backend) and angular2(frontend).
If I try to call the HTTP api from angular side, mixed-contents errors pops up, which is apparently the chrome browser blocking the call.
Is there a way to do this? I found this answer regarding proxy, but because I'm a newbie, I don't really get how to I can proxy the call with django or angular. Thanks.
Since your application is serving the content over HTTPS, its a must to access other resources also through HTTPS to solve the mixed content issue. The best way to approach is to use a proxy. For that you can either setup a proxy manually using EC2 or using a managed service like AWS CloudFront or AWS API Gateway depending on the nature of the resources you access.
If its a REST API use API Gateway and if its more of content (JS, CSS, HTML and other files & etc.) use CloudFront.