I'm deploying a side-project at the moment that I've built on React+Nodejs.
I deployed the React part using Vercel, what a great service. I then deployed my Node backend to AWS ECS that is currently active and accessible.
The problem is, Vercel configures HTTPS by default so I need to enable HTTPS on my backend as well to allow for communication. Otherwise, I get a "Blocked mixed content" error on the frontend.
I've tried obtaining a certificate from ACM but Vercel has it so that I can't add a CAA record for Amazon (it removes the "." at the end). I currently have a support ticket with Vercel to try and resolve this.
If there's an alternate way to resolve this issue, or if I'm not even on the right track, let me know. Thanks.
Edit: This is the page I followed for ACM: https://docs.aws.amazon.com/acm/latest/userguide/setup-caa.html
The trailing dot is actually not required. As you can see here, Vercel is also using multiple CAA record without any issues. You can search for more examples online.
Related
We have two applications deployed to PCF:
A Spring Boot REST Backend on a route e.g. backend.route1.net deployed with java_buildpack_offline
We also have our React Frontend on the same instance on a route e.g. frontend.route1.net pushed with a Staticfile with a single line content of: pushstate: enabled
Both works separately, which we can confirm by accessing the endpoints on both directly, for which they clearly return the expected values, hence they are both working well.
However, as soon as we try to access a page on the Frontend that needs to talk to the Backend using Axios we get a ERR_CERT_COMMON_NAME_INVALID
The generic things I find on Google or in PCF Documentation don't seem to be helping. Any tips where should I continue looking or what the actual issue could be?
If you need further info please ask.
Thanks!
/András
I have a Quarkus application already deployed on Google Cloud Run.
It depends on MySQL, hence there is an instance started on Cloud SQL.
Next step in my deployment process is to add keycloak. From what I've read the best option seems to be Google App Engine.
The approved answer in this question gave me some good insight of what needs to be done ... mostly.
What I did was:
Locally I made a sub-directory in the main project.
In that directory I added the app.yaml and the Dockerfile (as described here for instance).
There I executed the said two commands: gcloud init and gcloud app deploy.
I had my doubts about this set up and they were backed up by the error I got eventually:
ERROR: (gcloud.app.deploy) INVALID_ARGUMENT: The first service (module) you upload to a new application must be the 'default' service (module). Please upload a version of the 'default' service (module) before uploading a version for the 'morph-keycloak-service' service (module).
I understand my set up breaks the overall structure of the project but I'm not sure how to mix those two application with the right services.
I understand keycloak is a stateful application, hence cannot live on Cloud Run (by the way the intention is for keycloak to use the same database instance shared with the application).
So does any one know a more sensible set up, or what can I move in mine in order to fix it?
In short:
The answer really is in reading the error message (thanks #gaefan) - about the error itself it explains enough. So I just commented out the service: my-keycloak-service line in the app.yaml (thus leaving gcloud to implicitly mark it as the default one) and the deployment continued.
Eventually keycloak didn't connect to the database but if I don't manage to adjust the configurations that would probably be a subject to a different question.
On the point of project structure and functionality:
First off, thanks #NoCommandLine and #guillaume-blaquiere for your input!
#NoCommandLine the application on Cloud Run is sort of a headless REST API enabled backend. Most of the API calls are secured by keycloack. A next step in the deployment process would be to port an existing UI (React) client on the Firebase hosting (or on another suitable service - I'm still not completely sure which approach is best) and in order for the users to work with this client properly they must make an SSO through keycloak first.
I'm quite new to GCP and the number and variants of the available options are still overwhelming to me - one must get familiar with the nuances but I guess it takes time. So I'm still taking suggestions on how to adjust my project structure to fit better the services stack. Thanks!
I am developing a React project for studies and would like to publish.
I tried some ways, but the site is blank, there is no data from the NEWS-API I am using.
It seems to make no mistake.
It is a front application, only react with the API.
If it helps, here's the repository link.
https://github.com/carlos-souza-dev/apinews
I visited your deployment in vercel from your github repo and noticed this issue.
You're requesting data from the API over http which is insecure, while your page hosted by vercel uses https.
Modern browsers donot allow for a page served over https to request http data.
It might just be a fixed by changing your urls to use https, or if the API didn't have https you might have to do other workarounds.(Although it's better to use an API with https support)
I noticed this by opening the console after visiting your page to see these Mixed content requests blocked error.
The reason for the blank page after loading is that the Promise to get the data from the API get rejected but never handled causing the JavaScript execution to stop
[EDIT 1]
I read through some of the code in your repository and noticed a link pointing to localhost. It looks like you tried to setup a nodejs server to proxy data through https
The API you're using does seem to have HTTPS support
Conclusion:
Try changing the links to the API to https instead of http in your react code and see if it works. If it does, there's no need for a backend server of you're own
If the API doesn't have HTTPS support however, do either one of
Migrate to a different API with HTTPS support
Try serving your static react app through the backend and pointing your react app to /path/to/api/route without an absolute url and use the proxy setting in package.json as said here for development
Point to a full path to your backend server on the internet (i.e remove localhost links)
Also note that you cannot deploy a backend to vercel but it does support serverless functions
I created an API in Spring for my react app. When I was ready to publish site I noticed that the app can not call the api. I went to the api link and noticed it said this site is not secure. I did create a self assigned certificate so that https would work but its giving me this issue now. Until I click trust the react app will not fetch the data. Once I click trust once it works but other people using my site wont know that. How can I fix my API so that it is trusted?
The problem is that you're creating an SSL Certificate build by yourself. Browsers only accept trusted certificates signed by companies.
You will need to buy a certificate and use it on your app. Here's a source of signed certificates: https://www.getssl.com/
I did never used the free options, but some people say it works fine too: https://www.sslforfree.com/
For better understanding of that I strongly recommend you the following video: https://www.youtube.com/watch?v=uNdYea6OCuA
Hope it helps you bro.
Newbie React learner here!
I created a react app from scratch, using webpack and babel). In the application, there are many fetch requests. The API URL has "HTTP" in front, and unfortunately, there isn't an https alternative for that. ( I tried putting an S or removing the / at the end but it didn't work).
The project worked fine locally with no errors. I made some configuration setup in order to host it with firebase, and then built and deployed it. The setup worked also error-free, but when I visited the page I saw that there was no fetched content. When I checked the console there was the mixed content error for all the fetch requests.
Mixed Content: The page at 'https://yu-gi-oh-deck.firebaseapp.com/' was loaded over HTTPS, but requested an insecure resource 'http://52.57.88.137/api/card_data/Burial%20from%20a%20Different%20>Dimension'. This request has been blocked; the content must be served over HTTPS.
To be honest, I have more than one questions, but there are all related to this project and how to move from here. I hope there isn't an issue with that.
Can I "undo" the firebase configuration from my project?
Are there other free options for hosting my app with no errors about https?
(it might be a stupid one). I haven't pushed the changes from the firebase setup to my Github repo. Can I edit my project even after running build and deploy?
Here you can find some of your answer and possible solution: Can sites on Firebase hosting include non-https resources?
Look at this post to stop hosting: How do I remove a hosted site from firebase
This is a post to host your single page app on GitHub: https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48
You can still edit your project, it has nothing to do with Firebase hosting.