I have the following nginx configuration that works fine. I have an API (Expressjs) on /api location and a Frontend Development (Vuejs) in /:
server {
server_name example.com www.example.com;
root /var/www/domain.com/public_html;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html =404;
}
location /api {
proxy_set_header 'Access-Control-Allow-Origin' 'https://example.com';
proxy_set_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
proxy_set_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-type,Origin';
proxy_pass http://127.0.0.1:8000;
proxy_redirect off;
proxy_buffering on;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header origin 'https://example.com';
}
In my API I have a public folder (public/storage/) where I can store images. But when trying to access that folder I'm having 404 error. How can I configure my nginx server to giving access to the storage folder?
Please note when the request URI is:
http://example.com/api/public/storage/image.jpg
Then the request for the proxy will be the same as well. e.g
http://127.0.0.1:8000/api/public/storage/image.jpg
If you would like to change that, you should add URI to the directive proxy_pass itself. e.g
proxy_pass http://127.0.0.1:8000/public/;.
which will map requests to :
http://127.0.0.1:8000/public/public/storage/image.jpg
(there is double public intentionally.)