R
Railwayβ€’14mo ago
Mason

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
Percyβ€’14mo ago
Project ID: 2818bb01-9898-4d1c-8065-06e6404b3ed8
Mason
MasonOPβ€’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
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
MasonOPβ€’14mo ago
I see, that makes sense. Thanks Brody, I'll give it a try.
Brody
Brodyβ€’14mo ago
sounds good
Mason
MasonOPβ€’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
Brodyβ€’14mo ago
are you trying to call the internal url from a client side app?
Mason
MasonOPβ€’14mo ago
Yes
Brody
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
MasonOPβ€’14mo ago
Sure, will do. Just need some way of restricting access to the public URL then, but I'll look into that.
Floris
Florisβ€’14mo ago
bearer tokens if thats an option
Mason
MasonOPβ€’14mo ago
Rather, to the service at the public url*
Floris
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
Brodyβ€’14mo ago
remember what i said about not overcomplicating things KISS (google it)
Floris
Florisβ€’14mo ago
is a bearer over complicating it
Mason
MasonOPβ€’14mo ago
πŸ˜… All good, thank you guys
Floris
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
MasonOPβ€’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
Brodyβ€’14mo ago
can you send a link to your site where i can see this error take place?
Mason
MasonOPβ€’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
Brodyβ€’14mo ago
yo that sounds like a super cool product btw hmmm i can connect to it with postman just fine
Mason
MasonOPβ€’14mo ago
Oh, interesting, I don't have an issue
No description
Brody
Brodyβ€’14mo ago
damn it what a typo what kind of frontend app is this?
Mason
MasonOPβ€’14mo ago
What kind? Javascript, React, uses an Express backend server, was set up with create-react-app
Brody
Brodyβ€’14mo ago
send me your package.json?
Mason
MasonOPβ€’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
Brodyβ€’14mo ago
do you have a caddyfile
Mason
MasonOPβ€’14mo ago
Based on what Google tells me that is I do not πŸ˜…
Brody
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
MasonOPβ€’14mo ago
Ok, done. Do you suspect this is an issue with react-scripts?
Brody
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
MasonOPβ€’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
Brodyβ€’14mo ago
they should work out of the box with your project though wouldn't hurt to read the readme.md
Mason
MasonOPβ€’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
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
MasonOPβ€’14mo ago
Sent you an invite on gh
Brody
Brodyβ€’14mo ago
do you have two services in your railway project?
Mason
MasonOPβ€’14mo ago
3 - the main app is /frontend and /backend (1 service), then /nlp-api and /transcription-server are 2 separate services
Brody
Brodyβ€’14mo ago
okay perfect
Mason
MasonOPβ€’14mo ago
Branch for nonprod deployment is nonprod btw (sorry if obvious)
Brody
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
MasonOPβ€’14mo ago
By setting the root folder to /frontend, aren't I cutting out the /backend stuff (Express server) completely?
Brody
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
MasonOPβ€’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
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
MasonOPβ€’14mo ago
Sure thing!
Brody
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
MasonOPβ€’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
Brodyβ€’14mo ago
can you link me the repo i lost the link lol
Mason
MasonOPβ€’14mo ago
https://github.com/masoncusack/relevant - working branch is fix/breakup-frontend-backend
Brody
Brodyβ€’14mo ago
that error above, its coming from the frontend?
Mason
MasonOPβ€’14mo ago
Yes
Brody
Brodyβ€’14mo ago
also build and deploy logs for the frontend please you have the log downloader right?
Mason
MasonOPβ€’14mo ago
Log downloader?
Brody
Brodyβ€’14mo ago
sorry, thought i gave this to you https://bookmarklets.up.railway.app/log-downloader/
Brody
Brodyβ€’14mo ago
delete the dockerfile from the frontend
Mason
MasonOPβ€’14mo ago
Working πŸ‘ I'll try and wire up the networking again
Brody
Brodyβ€’14mo ago
sounds good
Mason
MasonOPβ€’14mo ago
All looks to be working, thanks very much πŸ‘
Brody
Brodyβ€’14mo ago
awsome! happy to help
Want results from more Discord servers?
Add your server