Nginx with my web application

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
...
/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
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 {}
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!
66 Replies
Percy
Percy3mo ago
Project ID: cc7cfdf3-8735-4236-8e74-0d7398ca6dc3
𝐗-𝐥𝐞𝐦
cc7cfdf3-8735-4236-8e74-0d7398ca6dc3
Brody
Brody3mo ago
create react app?
𝐗-𝐥𝐞𝐦
Not sure I understand the question sorry. Yes, the front end is React
Brody
Brody3mo ago
was it made with create react app? or react scripts, however you wanna call it
𝐗-𝐥𝐞𝐦
Ahhh, I beleve so. It's been a while since I initialized it. Probably something like npx create-react-app my-app --template typescript
Brody
Brody3mo ago
does the api endpoint have to live on the same domain as the frontend?
𝐗-𝐥𝐞𝐦
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
Brody
Brody3mo ago
okay fair enough okay so let's get started show me a screenshot of your railway project so I know what we are working with
𝐗-𝐥𝐞𝐦
Just this?
No description
Brody
Brody3mo ago
yep that's it can I see a screenshot of the frontend project in github? just the files and stuff
Brody
Brody3mo ago
looking good I'm gathering information so I can work out the best course of action does the client have a public domain?
𝐗-𝐥𝐞𝐦
You mean like here? Not yet, but I do have a domain I will use
No description
Brody
Brody3mo ago
generate one, just for testing
𝐗-𝐥𝐞𝐦
client-staging-13a0.up.railway.app
Brody
Brody3mo ago
delete the Dockerfile and nginx.conf from your repo. https://github.com/brody192/create-react-app-starter 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. after that, let me know the outcome if that works the next step will be to join the frontend and backend under one domain, but one step at a time
𝐗-𝐥𝐞𝐦
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
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 = true. I'm new to Caddyfile, is there somewhere I can update this so it ignores warnings for now?
Brody
Brody3mo ago
Caddyfile has nothing to do with building your site. set a service variable CI to false
𝐗-𝐥𝐞𝐦
Ahhh okay, will let that build.
Brody
Brody3mo ago
side note, please use this for sending me your build logs https://bookmarklets.up.railway.app/log-downloader/ the log snippet you sent didn't have any useful information.
𝐗-𝐥𝐞𝐦
Okay, looks like the build worked and the app is live via the url I sent above.
Brody
Brody3mo ago
awesome, send another screenshot of the project please do you have a PORT service variable set on the server service?
𝐗-𝐥𝐞𝐦
do you have a PORT service variable set on the server service?
In railway? no
No description
Brody
Brody3mo ago
can you show me the server code that starts listening?
𝐗-𝐥𝐞𝐦
err = http.ListenAndServe(appConfig.Application.SERVER_DOMAIN, r)
if err != nil {
log.Fatal(err)
}
err = http.ListenAndServe(appConfig.Application.SERVER_DOMAIN, r)
if err != nil {
log.Fatal(err)
}
Brody
Brody3mo ago
what is the server domain set to
𝐗-𝐥𝐞𝐦
Just the domain I want to use for the application
Brody
Brody3mo ago
please show me
𝐗-𝐥𝐞𝐦
Show you how? I have an env variable set up in railway that it picks up.
Brody
Brody3mo ago
screenshot please
Brody
Brody3mo ago
show me the value 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
}
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
}
𝐗-𝐥𝐞𝐦
I'm not going to need a domain on that?
Brody
Brody3mo ago
nope a domain isn't applicable here, and if you say it worked on railway I will be shocked but then again, for some reason, you never did tell me what you had it set to
𝐗-𝐥𝐞𝐦
I had it set to my domain (with no port).
Brody
Brody3mo ago
again, that's not telling me what it's set to I don't understand the secrecy, but either way, please use the code I provided instead
𝐗-𝐥𝐞𝐦
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. Updated the code. Waiting for it to build
Brody
Brody3mo 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
𝐗-𝐥𝐞𝐦
Okay, server built and is active.
Brody
Brody3mo ago
does it work?
𝐗-𝐥𝐞𝐦
Do you mean does the client call it? No
Brody
Brody3mo ago
no, just the backend, does it work on its own?
Brody
Brody3mo ago
on the client service, set a PORT service variable to 3000 on the server service, set a PORT service variable to 3001
𝐗-𝐥𝐞𝐦
Okay that's done
No description
Brody
Brody3mo 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}}
𝐗-𝐥𝐞𝐦
Deploying What does the ENABLE_ALPINE_PRIVATE_NETWORKING env variable do? I'm not seeing it referenced in the reverse proxy code
Brody
Brody3mo ago
there was a hyperlink under it that linked to docs explaining what it does but for the end user, you can ignore it 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
𝐗-𝐥𝐞𝐦
So I would just add my custom domain to the proxy service then? Instead of the client?
Brody
Brody3mo ago
correct
𝐗-𝐥𝐞𝐦
Is this generally the expected deploy time for the proxy?
No description
Brody
Brody3mo ago
not at all did you missconfigure something?
𝐗-𝐥𝐞𝐦
Let me double check
𝐗-𝐥𝐞𝐦
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
No description
No description
Brody
Brody3mo ago
full screenshot of your project please
Brody
Brody3mo ago
why is the health check failing
Brody
Brody3mo ago
you might need to make changes to the Caddyfile, please have a read of the comments in the Caddyfile
𝐗-𝐥𝐞𝐦
This is the correct health check plan? It was what it was set to when I created the template.
No description
Brody
Brody3mo ago
your backend does have an /api/ path right?
𝐗-𝐥𝐞𝐦
No, just figured this out. I updated it to /api/ping. That fixed it.
Brody
Brody3mo ago
okay now that's good so we in business?
𝐗-𝐥𝐞𝐦
We are good! Thank you so much for your help! Greatly appriciated!
Brody
Brody3mo ago
happy to help!