Railway•2w ago

How can I use nginx for two different services?

If I have two services, for backend and frontend. Frontend is displayed on the domain https://mysite.fun, and backend let's say on some default domain from railway, https://mysite.up.railway.app, but I can somehow link them so that when a request occurs some proxying and the request is sent to https://mysite.fun/api. I found one video on YouTube where the author realizes this using Docker and NGINX, but he has backend and frontend in one repository : https://github.com/artemonsh/deploy-frontend-backend. I think this is not a good approach, because if you update one small part of the code on the backend or frontend, the whole application will be redeployed. I want to understand if it is possible to do it with two services or not. I apologize in advance for possibly stupid questions. I have no experience with Docker or NGINX, so I have no idea how it all works in real projects.

68 Replies

Percy•2w ago

Project ID: N/A

Brody•2w ago

forgive me for asking, but why do you think you need the frontend and backend on different domains? what's wrong with domain.com as the frontend and api.domain.com as the backend? this in fact is exactly how railway does it

x4zxOP•2w ago

I must have explained it wrong. But I meant that backend and frontend are on different services on Railway. At the same time I would like to have one domain. But that requests are proxied not to the subdomain, but just to /api

Brody•2w ago

right I totally get that, I'm just asking why you want to have one domain

x4zxOP•2w ago

Conditionally: my site: https:/netrix.fun is where people go. and to do a search, you have to send a request to https://netrix.fun/api.

Brody•2w ago

why not api.netrix.fun

x4zxOP•2w ago

It's hard to say, I guess I thought that's how a lot of sites worked I don't really care.

Brody•2w ago

not really, like I said, railway has different domains for the frontend and backend perfect, then stick with different domains! have your frontend call the backend domain and call it a day

x4zxOP•2w ago

Sorry, I still don't understand how it works. That is, I need to keep only netrix.fun for the frontend service. And for backend service add api.netrix.fun? (On the screenshot of the frontend service settings)

Brody•2w ago

that is correct

x4zxOP•2w ago

And how will it look like in the react code? To avoid writing a full url for each request, are there any practices for this? I am currently using this config. So that requests can be organized like this:

axios.get('/api/users/me/guilds')

axios.get('/api/users/me/guilds')

import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8000',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            },

            '/discord': {
                target: 'https://discord.com/api/v10',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/discord/, ''),
                secure: false
            }
        }
    },
    resolve: {
        alias: {
            '@constants': path.resolve('./src/constants'),
            '@utils': path.resolve('./src/utils'),
            '@components': path.resolve('./src/components'),
        },
    }
})

import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8000',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            },

            '/discord': {
                target: 'https://discord.com/api/v10',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/discord/, ''),
                secure: false
            }
        }
    },
    resolve: {
        alias: {
            '@constants': path.resolve('./src/constants'),
            '@utils': path.resolve('./src/utils'),
            '@components': path.resolve('./src/components'),
        },
    }
})

Brody•2w ago

can you link me to your deployment for the frontend please

x4zxOP•2w ago

Where do I get it? I just haven't deployed the full application yet, so far I only have a mini-flask application active that outputs text to the page - it's just on this netrix.fun domain. That's why I opened this thread, to understand how to run both backend and frontend correctly

Brody•2w ago

open the deployment and copy the url oh you dont even have it deployed, then please share the repo for the frontend so i can let you know how to make it production ready

x4zxOP•2w ago

one min https://github.com/netrix-team/frontend I also sent you an invitation. Since this repository is hidden @Brody 👆🏻👆🏻👆🏻

Brody•2w ago

alright we are going to do this in steps, trust the process first, remove all the proxy stuff from the config file, just straight delete the proxy stuff

x4zxOP•2w ago

I was looking at your template for Vite + React, and was also thinking of using Canddy

Brody•2w ago

we will be using that for sure, but one step at a time

x4zxOP•2w ago

done

Brody•2w ago

i have yet to see the proxy stuff being useful in production, its only ever in the way of shipping to production you can remove the server line too do you have the backend deployed on railway and working?

x4zxOP•2w ago

No, but I can try running it now.

Brody•2w ago

yeah lets do that, your frontend is going to need something to call after all

x4zxOP•2w ago

Okay, I'll try to get it up and running as soon as possible.

Brody•2w ago

let me know if you have any troubles

x4zxOP•2w ago

Great, seems to have successfully launched https://api.netrix.fun/docs

Brody•2w ago

have you tested it?

x4zxOP•2w ago

I made a couple of requests to unsecured endpoints, all successfully returned a response

x4zxOP•2w ago

Brody•2w ago

good enough for me back to frontend well first, does the backend actual use an /api path? wdym thinking lol, you coded it right?

x4zxOP•2w ago

In the Vite configuration, I specified /api just for convenience so I don't have to write the whole url in its entirety. And so the backend is now at api.netrix.fun

Brody•2w ago

right but is the backend itself using /api as a route

x4zxOP•2w ago

Uh, no without /api, immediately starting with categories, /users, /guilds etc.

Brody•2w ago

then whereever you where calling /api replace it with an environmental variable called VITE_BACKEND_URL

x4zxOP•2w ago

so?

x4zxOP•2w ago

env*

x4zxOP•2w ago

Done. Replaced /api wherever it was

Brody•2w ago

that works, though i much prefer the + syntax

x4zxOP•2w ago

I don't know about that. In fact, I just started learning react

Brody•2w ago

"string" + "string"

x4zxOP•2w ago

got it Yeah, well, that's an option

Brody•2w ago

so how are you calling the discord api from the frontend with auth?

x4zxOP•2w ago

first user authorizes through discord bot, then special code - which we received from discord - is sent to backend where it is exchanged for access token and then it and all necessary data are entered into jwt token. Which in turn comes to the frontend and is stored in local storage

Brody•2w ago

gotcha, well go ahead and make the necessary code changes for that since you arent using a proxy anymore for that

x4zxOP•2w ago

I only use the discord api in two places on the frontend so I just copied the full path

x4zxOP•2w ago

Brody•2w ago

sounds good https://github.com/brody192/vite-react-template copy the nixpacks.toml and Caddyfile from this repo into yours

x4zxOP•2w ago

done

Brody•2w ago

do you have a service on railway already? for the frontend that is

x4zxOP•2w ago

yep

Brody•2w ago

link please

x4zxOP•2w ago

https://railway.app/project/49c5f0bc-621a-4388-8576-9a3edb59e080/service/ececc5da-5cad-47bc-92a3-b440194fc9fd/settings

Railway

Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud.

x4zxOP•2w ago

I hope I threw the right thing 😅

Brody•2w ago

now set a VITE_BACKEND_URL=https://${{backend.RAILWAY_PUBLIC_DOMAIN}} variable on the frontend service and to save it, just this once, do alt + shift + enter

x4zxOP•2w ago

all right

Brody•2w ago

oops updated do the fancy save again this time too it saves the change without triggering a deploy, you can do that whenever you are just about to deploy code, no need to make two deployments

x4zxOP•2w ago

Didn't know about this, it's very helpful. Thank you

Brody•2w ago

okay frontend domain is good, push your changes to github and now you just press the button because you do want it to redeploy

x4zxOP•2w ago

It's crashing now because there was a mini-flask app running on this service earlier. I've fixed it now

x4zxOP•2w ago

Everything is working successfully

x4zxOP•2w ago

But requests take a long time to process for some reason. I thought when I publish the application it will be much faster. I had it running locally for 150-200 milliseconds. I don't know what this has to do with

x4zxOP•2w ago

Brody•2w ago

you are now physically farther way to railways servers than you are with localhost, they are not comparable you just need to choose the railway region closest to you same with the backend, and then the database the backend uses, though preferably you would use a railway hosted database

x4zxOP•2w ago

I think I'll survive the delay, as my site was originally intended for American and European audiences Yeah, that's what I was going to do. The current database is a test database. For production, they'll be located on railway

Brody•2w ago

alright, anything else you need help with?

x4zxOP•2w ago

I guess not. Bro, you've been a big help. Thanks for your time

Brody•2w ago

no problem!

Gaming

Programming

How can I use nginx for two different services?