Nginx with my web application

2 years ago

Hello there! Been trying out a few different services to see where I want to host my web app.

Frontend: React
Backend: Golang

I've got the backend up and running without any issues. I'm having some trouble getting my frond end up and running. I've tried with/without a docker file. Currently with the dockerfile the application is building fine, but crashes.

Error:

/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: info: Getting the checksum of /etc/nginx/conf.d/default.conf
10-listen-on-ipv6-by-default.sh: info: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf
/docker-entrypoint.sh: Sourcing /docker-entrypoint.d/15-local-resolvers.envsh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
/docker-entrypoint.sh: Configuration complete; ready for start up
2024/03/12 22:28:26 [emerg] 7#7: host not found in upstream "my_server.railway.internal" in /etc/nginx/nginx.conf:3
nginx: [emerg] host not found in upstream "my_server.railway.internal" in /etc/nginx/nginx.conf:3
...

Dockerfile:

FROM node:14 as build
WORKDIR /client

COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx
COPY --from=build /client/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

nginx.conf

http {
  server {
    server_name my_server.railway.internal;

    location / {
      root /usr/share/nginx/html; 
    }

    location /api/ {
      proxy_pass http://my_server.railway.internal;
    }
  }
}
events {}

From what I can tell from the docs and other support tickets something like this should be possible. Just not sure what I'm missing.

Thank you for any help!

85 Replies

2 years ago

cc7cfdf3-8735-4236-8e74-0d7398ca6dc3


2 years ago

create react app?


2 years ago

Not sure I understand the question sorry. Yes, the front end is React


2 years ago

was it made with create react app?


2 years ago

or react scripts, however you wanna call it


2 years ago

Ahhh, I beleve so. It's been a while since I initialized it.

Probably something like

npx create-react-app my-app --template typescript


2 years ago

does the api endpoint have to live on the same domain as the frontend?


2 years ago

No, but it's preferred.

I can do something like api.my_domain.com if I have to, but I'd prefer my_domain.com/api


2 years ago

okay fair enough


2 years ago

okay so let's get started


2 years ago

show me a screenshot of your railway project so I know what we are working with


2 years ago

Just this?

1217480700991639600


2 years ago

yep that's it


2 years ago

can I see a screenshot of the frontend project in github?


2 years ago

just the files and stuff


2 years ago

1217481812272615400


2 years ago

looking good


2 years ago

I'm gathering information so I can work out the best course of action


2 years ago

does the client have a public domain?


2 years ago

You mean like here? Not yet, but I do have a domain I will use

1217482410967695400


2 years ago

generate one, just for testing



2 years ago

delete the Dockerfile and nginx.conf from your repo.

copy the nixpacks.toml and Caddyfile from this repo into yours.

if you have any custom build or start commands set in the clients service settings, please remove them.


2 years ago

after that, let me know the outcome


2 years ago

if that works the next step will be to join the frontend and backend under one domain, but one step at a time


2 years ago

Build failed

ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1
Error: Docker build failed

I'm assuming it's because there's a few warnings that I have not cleaned up yet.

#19 77.49 Treating warnings as errors because [process.env.CI](process.env.CI) = true.

I'm new to Caddyfile, is there somewhere I can update this so it ignores warnings for now?


2 years ago

Caddyfile has nothing to do with building your site.

set a service variable CI to false


2 years ago

Ahhh okay, will let that build.


2 years ago

side note, please use this for sending me your build logs

the log snippet you sent didn't have any useful information.


2 years ago

Okay, looks like the build worked and the app is live via the url I sent above.


2 years ago

awesome, send another screenshot of the project please


2 years ago

do you have a PORT service variable set on the server service?


2 years ago

do you have a PORT service variable set on the server service?

In railway? no

1217487774676947000


2 years ago

can you show me the server code that starts listening?


2 years ago

err = http.ListenAndServe(appConfig.Application.SERVER_DOMAIN, r)
if err != nil {
    log.Fatal(err)
}

2 years ago

what is the server domain set to


2 years ago

Just the domain I want to use for the application


2 years ago

please show me


2 years ago

Show you how?

I have an env variable set up in railway that it picks up.


2 years ago

screenshot please


2 years ago

1217489251067887600


2 years ago

show me the value


2 years ago

on second thought, please use this code instead of what you currently have, that way we know it's correct

func main() {
  // ...
  // Use `PORT` provided in environment or default to 3001
  var port = envPortOr("3001")

  log.Fatal(http.ListenAndServe(port, handler))
  // ...
}

// Returns PORT from environment if found, defaults to
// value in `port` parameter otherwise. The returned port
// is prefixed with a `:`, e.g. `":3001"`.
func envPortOr(port string) string {
  // If `PORT` variable in environment exists, return it
  if envPort := os.Getenv("PORT"); envPort != "" {
    return ":" + envPort
  }
  // Otherwise, return the value of `port` variable from function argument
  return ":" + port
}

2 years ago

I'm not going to need a domain on that?


2 years ago

nope


2 years ago

a domain isn't applicable here, and if you say it worked on railway I will be shocked


2 years ago

but then again, for some reason, you never did tell me what you had it set to


2 years ago

I had it set to my domain (with no port).


2 years ago

again, that's not telling me what it's set to


2 years ago

I don't understand the secrecy, but either way, please use the code I provided instead


2 years ago

Just not a domain I wanted to share. I'm not sure why knowing the exact domain matters. Could be my_domain.com and it wouldn't really make a difference.


2 years ago

Updated the code. Waiting for it to build


2 years ago

I understand that but details matter when dealing with these things, omitting details has dramatically increased the time it takes to resolve this and other help threads


2 years ago

Okay, server built and is active.


2 years ago

does it work?


2 years ago

Do you mean does the client call it? No


2 years ago

no, just the backend, does it work on its own?



2 years ago

on the client service, set a PORT service variable to 3000
on the server service, set a PORT service variable to 3001


2 years ago

Okay that's done

1217497129128427500


2 years ago

go ahead and deploy the reverse proxy template into your project.

for the FRONTEND_HOST variable, use http://${{Client.RAILWAY_PRIVATE_DOMAIN}}:${{Client.PORT}}

for the BACKEND_HOST variable, use http://${{Server.RAILWAY_PRIVATE_DOMAIN}}:${{Server.PORT}}


2 years ago

Deploying

What does the ENABLE_ALPINE_PRIVATE_NETWORKING env variable do? I'm not seeing it referenced in the reverse proxy code


2 years ago

there was a hyperlink under it that linked to docs explaining what it does


2 years ago

but for the end user, you can ignore it


2 years ago

so now you can remove the public domains from the server and client services because they will no longer be accessed publicly. you now use the domain on the proxy service


2 years ago

So I would just add my custom domain to the proxy service then? Instead of the client?


2 years ago

correct


2 years ago

Is this generally the expected deploy time for the proxy?

1217508805777166300


2 years ago

not at all


2 years ago

did you missconfigure something?


2 years ago

Let me double check


2 years ago

I noticed I was missing the http:// on the env variables. I added that, but it seems the health check is still failing on the server

1217515543897313300
1217515544467734500


2 years ago

full screenshot of your project please


2 years ago

1217518112597868800


2 years ago

why is the health check failing



2 years ago

you might need to make changes to the Caddyfile, please have a read of the comments in the Caddyfile


2 years ago

This is the correct health check plan? It was what it was set to when I created the template.

1217525840833675300


2 years ago

your backend does have an /api/ path right?


2 years ago

No, just figured this out. I updated it to /api/ping. That fixed it.


2 years ago

sorry but that's not the correct path you want to use


2 years ago

okay now that's good


2 years ago

so we in business?


2 years ago

We are good!

Thank you so much for your help! Greatly appriciated!


2 years ago

happy to help!


Loading...