I have a symfony application which offers a REST API. On another host (actually docker container) I have a frontend javascript application which is supposed to consume that API. I want to serve them from the same domain and host:
/ - should serve the frontend app
/api/ - should serve the API
I configured nginx like so:
server {
location ~ ^/api/(.*)$ {
proxy_pass http://apihost:8080/$1;
proxy_set_header Host $host;
}
location / {
root /var/www/;
}
}
That works as long as I don't use the debug toolbar and there is no exception. In that case, the URLs (images, css, js) in the page don't contain the /api/ prefix causing 404s.
How can I configure either symfony or nginx to prepend that prefix to the urls?
Related
I have a node.js project, working with nginx acting as a reverse proxy. I'm trying the configure nginx to serve static content. Both nginx and node.js are docker containers. I've tried to use the following solutions:
How do you serve static files from an nginx server acting as a reverse proxy for a nodejs server?
Serving static files with NGINX
No matter what i do, I always get the following error:
directory index of "/usr/src/app/public/" is forbidden
Here is my nginx configuration:
server {
listen 80;
server_name ~^(.+)$;
root /usr/src/app/public;
location / {
try_files $uri #nodejs;
}
location #nodejs {
default_type text/css;
proxy_set_header Accept-Encoding "";
proxy_set_header Host $host;
set $key $http_host$request_uri;
set_escape_uri $escaped_key $key;
srcache_fetch GET /redis $key;
srcache_store PUT /redis2 key=$escaped_key&exptime=120;
add_header X-Cached $srcache_fetch_status;
proxy_pass http://node;
}
# Try fetching from Redis
location = /redis {
...
}
# Storing to Redis
location = /redis2 {
...
}
include /etc/nginx/default.d/*.conf;
}
Here is my docker-compose:
services:
web:
ports:
- "127.0.0.1:80:80"
build:
context: .
dockerfile: docker/nginx/Dockerfile
volumes:
- ./docker/nginx/server.conf:/etc/nginx/conf.d/server.conf
- ./docker/nginx/nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf
links:
- node:node
node:
ports:
- "81:80"
environment:
DEVELOP: "true"
build:
context: .
dockerfile: ./docker/node/Dockerfile
As mentioned above, I get error of directory index of "/usr/src/app/public/" is forbidden.
Some more info:
Nginx has the relevant permissions (Rnning with root)
I'm able to get specific static files from the public directory. For example: /public/image.png
When i create some index.html file in the public directory, I'm able to load it. However, The expected behaviour is that nginx will pass me to my backend server using proxy_pass http://node configuration, So it seems that the proxy_pass doesn't occurring.
What could be the issue? Please advise.
Update:
I've updated nginx configuration as suggested to:
try_files $uri #nodejs;
Initially, The issue seemed to be solved and i could load my backend server. However, I order to verify that now the static content is being served from the nginx container, I've deleted the public directory from nodejs container, and now i get the following error:
Failed to lookup view "index" in views directory "/usr/src/app/public"
Does anyone know what could be the issue?
Since your node container is set to expose via port 81 in the docker-compose file, your proxy_pass has to be updated like this.
proxy_pass http://node:81;
Refer to this article to setup nginx with a nodejs reverse proxy step by step
https://medium.com/#francoisromain/setup-node-js-apache-nginx-reverse-proxy-with-docker-1f5a5cb3e71e
I have a virtuoso-opensource instance on localhost:8890
I have configured a nginx proxy to redirect at localhost/virtuoso
location /virtuoso {
proxy_pass http://localhost:8890/;
proxy_set_header Host localhost;
}
The main page of virtuoso is redirected but CSS and images are not. And when a go to /virtuoso/conductor, it redirect me to /conductor.
how can I properly configure nginx to get the right redirection?
I have a Single Page Application with regular Browser Router (without hash). Whenever someone navigates through page and hits refresh button nginx tries to find file on this path. So if someone is on mypage.com/about nginx looks for about file and responds with 404 Not Found. How to fix this issue?
I'm thinking about specifying a location with wildcard - mypage.com/* except /api tho, because every backend endpoint in this app starts with api. How to match all paths except one? This is how my config looks like:
upstream frontend {
server frontend:3000;
}
upstream backend {
server backend:8000;
}
server {
listen 80;
location /api {
proxy_pass http://backend;
proxy_set_header Host \$http_host;
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
}
location / {
proxy_pass http://frontend;
proxy_redirect default;
}
}
Why do your proxy requests for frontend app ? I assume that you are using some kind of development server to serve your frontend application. It is better to build your frontend application to static files and serve them as regular static files, without any server except the nginx.
As for your question, if you will build your frontend application into static files you may configure location in nginx like this:
root /var/www/your_site;
location / {
try_files $uri /index.html;
}
where index.html is entrypoint into your application and the root path should be configured to place where it stored.
If you still want to serve frontend application from development server through nginx you may configure nginx to handle errors from upstream and point error page to root of dev server.
In this case following directives should help you:
http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_intercept_errors
http://nginx.org/en/docs/http/ngx_http_core_module.html#error_page
I'm attempting to deploy my create-react-app SPA on a Digital Ocean droplet with Ubuntu 14.04 and Nginx. Per the static server deployment instructions, I can get it working when I run serve -s build -p 4000, but the app comes down as soon as I close the terminal. It is not clear to me from the create-react-app repo readme how to keep it running forever, similar to something like forever.
Without running serve, I get Nginx's 502 Bad Gateway error.
Nginx Conf
server {
listen 80;
server_name app.mydomain.com;
root /srv/app-name;
index index.html index.htm index.js;
access_log /var/log/nginx/node-app.access.log;
error_log /var/log/nginx/node-app.error.log;
location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm|svg)$ {
root /srv/app-name/build;
}
location / {
proxy_pass http://127.0.0.1:4000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Access-Control-Allow-Origin *;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
One of the major benefits of React (and Create React App) is that you don't need the overhead of running a Node server (or proxying to it with Nginx); you can serve the static files directly.
From the Deployment documentation you've linked to, Create React App describes what to do:
npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.
In your case, run npm run build to create the build/ directory and then make the files available in a location Nginx can access them. Your build is probably best done on your local machine and then you can securely copy the files across to your server (via SCP, SFTP etc). You could run npm run build on your server, but if you do, resist the temptation to directly serve the build/ directory as the next time you run a build, clients could receive an inconsistent set of resources whilst you're building.
Whichever build method you choose, once your build/ directory is on your server, then check its permissions to ensure Nginx can read the files and configure your nginx.conf like so:
server {
listen 80;
server_name app.mydomain.com;
root /srv/app-name;
index index.html;
# Other config you desire (TLS, logging, etc)...
location / {
try_files $uri /index.html;
}
}
This configuration is based upon your files being in /srv/app-name. In short, the try_files directive attempts to load CSS/JS/images etc first and for all other URIs, loads the index.html file in your build, displaying your app.
For note, you should be deploying using HTTPS/SSL to serve it rather than with insecure HTTP on port 80. Certbot provides automatic HTTPS for Nginx with free Let's Encrypt certificates, if the cost or process of obtaining a certificate would otherwise hold you back.
I was hosting NextJS as main app on / and wanted to host CRA on /admin route. Here is what I did:
serve CRA through custom express server
change hostname in package.json
add basename to /admin for react-router
define the following proxy pass:
location / {
proxy_pass http://localhost:3000;
}
location /admin {
proxy_pass http://localhost:3001;
}
location /admin/ {
proxy_pass http://localhost:3001/;
}
Related articles:
CRA Deployment
React-Router
Multiple SPAs
Another StackOverflow question
I'm new to nginx. I have two projects, and the one is django web app which is running localhost 8000, and another is tornado which used to provide api service and running localhost 8888.
How do I config the nginx that redirects all the url requests(from 80 port) to localhost:8000 but /api requests to localhost:8888(tornado app)?
Edit your nginx config file. Add a server block and use proxy_pass in location blocks to proxy (redirect) the request.
server {
listen 80;
location / {
proxy_pass http://127.0.0.1:8000;
}
location /api {
proxy_pass http://127.0.0.1:8888;
}
}
Save it, and reload nginx.
nginx -s reload
https://gist.github.com/soheilhy/8b94347ff8336d971ad0