6 months ago
My setup (Railway internal networking names in braces):
Symfony API backend php-fpm container, exposed default port 9000 ("capi")
nginx-alpine container ("cproxy") configured to pass requests to php-fpm, exposed default port 80
React/vite frontend ("cweb"), exposed default port 5173
Railway configuration
Frontend has a VITE_API_URL env var with value
https://cproxynginx-alpine container has a NGINX_FASTCGI_PASS env var with value
capi:9000- start.sh script takes care of interpolating this env var into the nginx conf file
Dockerfile for nginx-alpine container
```
FROM nginx:alpine
COPY default.conf.template /etc/nginx/conf.d/default.conf.template
RUN chmod +x /start.sh
```
default.conf.template:
```
server {
listen 80;
server_name localhost;
root /var/www/html/public;
index index.php index.html;
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
add_header 'Access-Control-Max-Age' 1728000 always;
add_header 'Content-Type' 'text/plain; charset=UTF-8' always;
add_header 'Content-Length' 0 always;
return 204;
}
try_files $uri $uri/ /index.php?$query_string;
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
}
location ~ \.php$ {
fastcgi_pass ${NGINX_FASTCGI_PASS};
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
# Also apply CORS headers for PHP files
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
}
error_log /var/log/nginx/project_error.log;
access_log /var/log/nginx/project_access.log;
}
```
Issues
The frontend is unable to communicate with nginx. Error in browser
Response body is not available to scripts (Reason: CORS Missing Allow Origin).If I add a public domain for the cproxy service at port 80 and browse to it, I can see the nginx welcome page. However accessing any api endpoint on the domain produces a 404.
Looking for help to get the communication working between these services. Thanks!
3 Replies
6 months ago
Hey there! We've found the following might help you get unblocked faster:
If you find the answer from one of these, please let us know by solving the thread!
6 months ago
I’ve noticed your VITE_API_URL is set to https://cproxy, which won’t work in the browser. The cproxy hostname is only resolvable inside Railway’s private network, but your React frontend runs in the user’s browser, so it can’t see that.
If you wanted to use Railway’s private networking, you’d have to use plain http protocol instead of https, since there’s no TLS cert for internal hostnames. But in this case, because the frontend is client-side, you’ll need to point VITE_API_URL to the public domain on your cproxy service.
jack
I’ve noticed your VITE_API_URL is set to https://cproxy, which won’t work in the browser. The cproxy hostname is only resolvable inside Railway’s private network, but your React frontend runs in the user’s browser, so it can’t see that.If you wanted to use Railway’s private networking, you’d have to use plain http protocol instead of https, since there’s no TLS cert for internal hostnames. But in this case, because the frontend is client-side, you’ll need to point VITE_API_URL to the public domain on your cproxy service.
6 months ago
Thank you, I missed that! I've now added a public domain to the cproxy service and pointed VITE_API_URL to that public hostname. Now, when I browse to the public hostname:
I see the nginx welcome page.
However, accessing the API endpoint directly via URL, it fails with a 404.
In the React front-end, the URL request to the API also fails with a 404 and the error
Response body is not available to scripts (Reason: CORS Missing Allow Origin)Are there specific changes needed to the nginx.conf file for Railway? These same services work fine locally when started via a docker-compose file.
Front-end: https://collector-web-production-6336.up.railway.app/ in case you would like to see it
Proxy: https://collector-proxy-production.up.railway.app/API endpoint: https://collector-proxy-production.up.railway.app/api/books/1
Attachments