I deployed a full stack app, total newb. I made a minimal api in C#/.NET, with EF and PostgreSQL and a React front end.
I used AWS to launch a virtual machine instance. Through remote desktop connection, I uploaded my backend code, connected that server to my front end hosted on netlify, and all was well.
Then browser started refusing to fetch from my server, which is http (all that you can get free from AWS apparently) and gave a mixed content error. I solved the mixed content error by adding a https 443 port via remote desktop and re-adding useHttpsRedirect in my .net code. All was well.
My api calls to my backend server looked like http://12.345.67.890/api/checkuser, the url it’s calling to is my remote server public ipv4 address. That’s what it’s supposed to do.
Then it refused to fetch again, giving an invalid auth certificate error. Research led me to conclude that because the cert on my server was self-signed, I needed a real one, which seemed to require buying a domain.
So I bought a domain which came with a free SSL cert from godaddy. I made a DNS A record to connect that domain and my remote server public 1pv4 address.
Then I painstakingly installed my godaddy cert on my remote server and added it to my website. I changed my ENVs on netlify so that my public database URL is the domain name, backend.app. Then I got a different error, common name invalid, which meant the name on the SSL cert didn’t match the domain. I was thinking, is it getting the domain name and refusing to go to the ipv4 address? Because I know I was consistent with the common name.
Finally after redeploying on netlify, my front end fetched to my backend, now at backend.app instead of 12.345.67.890, and I saw the user registration form instead of loading circle. Awesome! Then I realized that my API calls were all failing and getting 404s. Then I notice that the URI it is fetching is this:
https://frontenddomain.netlify.app/backend.app/api/checkuser
now what in god’s name would cause the netlify url to be added in front of my endpoint? I checked my envs on netlify, I checked my front end code and all api calls use a variable name for my database that env’s plug in. I’ve looked through the IIS manager and the AWS console, but I have no idea what I’m doing.
Now I assume the 404 is because this weird augmented endpoint doesn’t match those in my backend. However, even if they matched I’m not sure if fetching from domain name instead of string of numbers AWS ipv4 address will work. But this is the first thing to figure out I reckon.
Thanks for reading, I hope this makes sense.
I tried to submit a payload to the user registration endpoint at https://backend.app/api/register, which should have posted a new user to my db. Instead the request was sent to https://frontenddomain.app/backend.app/api/register. Understandably that results in a 404. I can’t test other endpoints because I must be a signed in registered user to view the rest of the app.
example of API call to backend
const registerUser = (userInfo) => new Promise((resolve, reject) => {
fetch(`${clientCredentials.databaseURL}/api/register`, {
method: 'POST',
body: JSON.stringify(userInfo),
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
})
.then((resp) => resolve(resp.json()))
.catch(reject);
});
ex. backend endpoint
//register user
app.MapPost("/api/register", (CCDbContext db, User userObj) =>
{
db.Users.Add(userObj);
db.SaveChanges();
return Results.Created($"/users/${userObj.Id}", userObj);
});
where db variable is coming from (firebase is used for OAuth)
const clientCredentials = {
...firebaseCredentials,
databaseURL: process.env.NEXT_PUBLIC_DATABASE_URL,
};
NEXT_PUBLIC_DATABASE_URL is set to backend.app in the Netlify env config. When it was set to the ec2 ip address, the endpoints were correct
Courtney Fairall is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.