Railway•14mo ago

Using internal networking to communicate with Websocket

Project ID: 2818bb01-9898-4d1c-8065-06e6404b3ed8 Hi folks, suspect I'm doing something particularly silly, but I have a React app hosted on Railway which connects to a websocket server deployed in the same environment as follows:

let socket = new Websocket("wss://...")

let socket = new Websocket("wss://...")

I notice that when I use the internal networking URL to connect to the websocket server, e.g.

wss://my-websocket-server.railway.internal

wss://my-websocket-server.railway.internal

Intialization fails:

WebSocket connection to 'wss://relevant-transcription-server.railway.internal:8080/' failed:

WebSocket connection to 'wss://relevant-transcription-server.railway.internal:8080/' failed:

Should this be possible? At least locally, if I use the Railway generated public URL of the Websocket server, the Websocket initialization and connection works fine.

61 Replies

Percy•14mo ago

Project ID: 2818bb01-9898-4d1c-8065-06e6404b3ed8

Mason•14mo ago

Apologies, but as I don't seem to be able to edit this post, I have to make clear. I don't any longer explicitly add the port to the Websocket URL, this was something I was trying but doesn't make a difference. Now I'm targeting wss://relevant-transcription-server.railway.internal

Brody•14mo ago

ws://relevant-transcription-server.railway.internal:<the port your service runs on> ws because this is a local network, ssl is not involved you need a port, since this is a local network

Mason•14mo ago

I see, that makes sense. Thanks Brody, I'll give it a try.

Brody•14mo ago

sounds good

Mason•14mo ago

Interesting, I'm now seeing:

Mixed Content: The page at 'https://page-url' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://relevant-transcription-server.railway.internal:8080/'. This request has been blocked; this endpoint must be available over WSS.

Mixed Content: The page at 'https://page-url' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://relevant-transcription-server.railway.internal:8080/'. This request has been blocked; this endpoint must be available over WSS.

Uncaught (in promise) DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

Uncaught (in promise) DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

Brody•14mo ago

are you trying to call the internal url from a client side app?

Mason•14mo ago

Yes

Brody•14mo ago

thats not quite how it works, its an internal url, only other services from within in the project can call it, a users browser cant call a private address, wouldnt be very private if that where the case youd need to use the public domain, and in that case you do need to use wss and dont specify a port

Mason•14mo ago

Sure, will do. Just need some way of restricting access to the public URL then, but I'll look into that.

Floris•14mo ago

bearer tokens if thats an option

Mason•14mo ago

Rather, to the service at the public url*

Floris•14mo ago

no clue what youre trying to host on the url yeah i mean the service is only public on the endpoints you specify yourself

Brody•14mo ago

remember what i said about not overcomplicating things KISS (google it)

Floris•14mo ago

is a bearer over complicating it

Mason•14mo ago

😅 All good, thank you guys

Floris•14mo ago

im gonna work on this thanks for the critic i havent been helping around in tickets for as long as u have so you have an advantage 🛶🛶🛶🛶🛶

Mason•14mo ago

Hi , I am noticing the socket doesn't initialise with the wss:// url within the React app deployed on Railway, yet it does if I use this URL locally. Any intuition as to why this could be?

Brody•14mo ago

can you send a link to your site where i can see this error take place?

Mason•14mo ago

If I use the URL locally in the context of my app or in e.g. Postman, the connection is initialised immediately and no issues

Brody•14mo ago

yo that sounds like a super cool product btw hmmm i can connect to it with postman just fine

Mason•14mo ago

Oh, interesting, I don't have an issue

Brody•14mo ago

damn it what a typo what kind of frontend app is this?

Mason•14mo ago

What kind? Javascript, React, uses an Express backend server, was set up with create-react-app

Brody•14mo ago

send me your package.json?

Mason•14mo ago

{
    "name": "frontend",
    "version": "0.0.1",
    "description": "Frontend of Relevant",
    "main": "index.js",
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "author": "Mason Cusack",
    "license": "",
    "dependencies": {
        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
        "@pdfme/common": "^2.1.0",
        "@pdfme/generator": "^2.1.0",
        "microphone-stream": "^6.0.1",
        "process": "^0.11.10",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.10.0",
        "react-scripts": "^5.0.1",
        "web-vitals": "^3.3.1"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "proxy": "http://localhost:3000",
    "devDependencies": {
        "buffer": "^6.0.3"
    }
}

{
    "name": "frontend",
    "version": "0.0.1",
    "description": "Frontend of Relevant",
    "main": "index.js",
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "author": "Mason Cusack",
    "license": "",
    "dependencies": {
        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
        "@pdfme/common": "^2.1.0",
        "@pdfme/generator": "^2.1.0",
        "microphone-stream": "^6.0.1",
        "process": "^0.11.10",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.10.0",
        "react-scripts": "^5.0.1",
        "web-vitals": "^3.3.1"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "proxy": "http://localhost:3000",
    "devDependencies": {
        "buffer": "^6.0.3"
    }
}

Brody•14mo ago

do you have a caddyfile

Mason•14mo ago

Based on what Google tells me that is I do not 😅

Brody•14mo ago

okay lets get you one then https://github.com/brody192/create-react-app-starter copy the nixpacks.toml and Caddyfile from that repo into yours

Mason•14mo ago

Ok, done. Do you suspect this is an issue with react-scripts?

Brody•14mo ago

i do, react-scripts start starts a dev server, and you wouldn't belive how strange this can behave when deploy to railway like that

Mason•14mo ago

Can I redeploy with those files as they are or should I read through the repo and try to adapt to my project?

Brody•14mo ago

they should work out of the box with your project though wouldn't hurt to read the readme.md

Mason•14mo ago

Giving it a shot, seems like I should add that the way I serve is I build the frontend part of the repo and then have the backend express server serve the build folder The higher level package.json (above the frontend and backend in the repo) is

{
    "scripts": {
        "start": "cd ./backend && node server.js",
        "build": "cd ./frontend && yarn run build",
        "install": "cd ./frontend && yarn install && cd ../backend && yarn install"
    }
}

{
    "scripts": {
        "start": "cd ./backend && node server.js",
        "build": "cd ./frontend && yarn run build",
        "install": "cd ./frontend && yarn install && cd ../backend && yarn install"
    }
}

I serve the frontend from express like this:

app.use(express.static(path.resolve(__dirname, "../frontend/build")))

app.use(express.static(path.resolve(__dirname, "../frontend/build")))

Not sure that we are starting a react-scripts development server in this case?

Brody•14mo ago

oh my bad I thought these where separate services, you definitely don't want to serve your app from express like that do you think you could share your repo?

Mason•14mo ago

Sent you an invite on gh

Brody•14mo ago

do you have two services in your railway project?

Mason•14mo ago

3 - the main app is /frontend and /backend (1 service), then /nlp-api and /transcription-server are 2 separate services

Brody•14mo ago

okay perfect

Mason•14mo ago

Branch for nonprod deployment is nonprod btw (sorry if obvious)

Brody•14mo ago

put the nixpacks.toml and Caddyfile into the frontend folder, then in the service settings for the frontend set the root directory to /frontend thank you, I'm very new to github

Mason•14mo ago

By setting the root folder to /frontend, aren't I cutting out the /backend stuff (Express server) completely?

Brody•14mo ago

you said you had 3 services in your railway project right? one for the frontend, one for the backend, and another for nlp-api the service for the backend would be express, and it's root directory would be set to /backend

Mason•14mo ago

No, the frontend build is served via the backend in 1 Railway service, then the nlp-api and transcription-server are served in 2 other services. I could set things up as you suggested.

Brody•14mo ago

it would be best to set things up as I suggested, doing it your way can be prone to issues, plus it's much neater and easier to maintain this way

Mason•14mo ago

Sure thing!

Brody•14mo ago

that means you can also remove the app.use static thing from your backend but let me know when you have that setup or if you run into any problems!

Mason•14mo ago

Will do, thanks very much for your help Hi, I separated the frontend and backend into separate services and have them working locally. I created a new service for the frontend pulling from my dev branch and am now getting this error during the deployment process.

The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.

The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.

Checking the metrics for memory usage it seems to be at max 2MB, I don't see it peaking out. I added the Caddyfile and nixpacks.toml to frontend but it's still starting the development server. This must be because the services are containerised, my run command is yarn start, and the start script in package.json is react-scripts start. Wonder if this could have something to do with it? Should I change the startup command?

Brody•14mo ago

can you link me the repo i lost the link lol

Mason•14mo ago

https://github.com/masoncusack/relevant - working branch is fix/breakup-frontend-backend

Brody•14mo ago

that error above, its coming from the frontend?

Mason•14mo ago

Yes

Brody•14mo ago

also build and deploy logs for the frontend please you have the log downloader right?

Mason•14mo ago

Log downloader?

Brody•14mo ago

sorry, thought i gave this to you https://bookmarklets.up.railway.app/log-downloader/

Mason•14mo ago

build_logs_relevant_...

deployment_logs_rele...

Brody•14mo ago

delete the dockerfile from the frontend

Mason•14mo ago

Working 👍 I'll try and wire up the networking again

Brody•14mo ago

sounds good

Mason•14mo ago

All looks to be working, thanks very much 👍

Brody•14mo ago

awsome! happy to help

Gaming

Programming

Using internal networking to communicate with Websocket