I've been trying almost one day with no luck to configure nginx as proxy reverse for apache.
I expect that nginx will serve all static file, and the rest is passed to apache.
It's not hard to achieve this if the site resides on the root domain name.
For example, I've successfully set:
www.mydomain.com
location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml|rss|txt)$ {
root /path/to/mysite;
}
location / {
proxy_pass 127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
}
now the problem arises as I want to configure site within alias
for example:
www.mydomain.com/site1
Does anybody know how to achieve the same purpose?
I tried below configuration doesn't work:
location /site1 {
location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml|rss|txt)$ {
root /path/to/anothersite1;
}
proxy_pass apache:8080;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
}
the problem is that the 'root' directive doesn't replace the /site1 URI.
For example, a request to
www.mydomain.com/site1/folder/pic.jpg
will be handled by opening file:
/path/to/anothersite1/site1/folder/pic.jpg;
instead of:
/path/to/anothersite1/folder/pic.jpg
I really appreciate any help on this.
I've tried to replace 'root' directive with 'alias' but still no luck.
Thanks beforehand,
Related
I am trying to make it so that a request at path https://example.com/projects/pixelstacker/demo will serve static files that are located at /services/pixelstacker.web.net/wwwroot/dist. I want it to be located there so that I can keep related files closer together in the deployment system and file trees. It just makes it easier to manage. I'm having troubles getting this done in plesk because plesk does not allow you to make custom directives at the root / level for nginx.
The nginx configuration for my .net core app looks like this:
location /projects/pixelstacker/ {
proxy_pass http://localhost:5005/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Real-IP $remote_addr; # remote IP addr again?
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # remote IP addr
proxy_set_header X-Forwarded-Proto $scheme;
proxy_redirect off;
}
And then my configuration for my react app can do a basic proxy that WILL work, but only if the files for my react project are deployed to a publicly accessible folder. I'm trying to get this to work but for a folder that is located outside of the httpdocs directory instead. The public folder would be located at /httpdocs/projects/pixelstacker.web.react
# React
# https://stackoverflow.com/questions/53207059/react-nginx-routing-to-subdirectory
location ^~ /projects/pixelstacker/demo {
alias /var/www/vhosts/example.com/httpdocs/projects/pixelstacker.web.react;
try_files $uri $uri/ /projects/pixelstacker.web.react/index.html;
}
Any tips or advice? Thanks!
So my website has two parts:
1- /api, /oauth and /assets locations are redirected to a laravel app and using a simple proxy_pass to their docker port
2- the web app, which is a react app. We make an image of the web app(so no files are transferred to the server) and run it on a port, say 3000.
This is a summary of my Nginx configuration:
server {
server_name mywebsite.com;
location /api {
proxy_pass http://localhost:8080/api;
proxy_set_header Host $host;
} //the same with other Laravel paths
location / {
proxy_pass http://localhost:3000/;
proxy_set_header Host $host;
proxy_redirect off;
}
}
The problem is if the user goes to a page, say site.com/profile and refreshes it, they get a 404 error. Googling a lot resulted to use try_files .. index.html which works with local files, but not when using proxy_pass and docker images.
More googling had me find a solution that actually worked:
server {
server_name mywebsite.com;
location /api {
proxy_pass http://localhost:8080/api;
proxy_set_header Host $host;
} //the same with other Laravel paths
location / {
proxy_pass http://localhost:3000/;
proxy_set_header Host $host;
proxy_redirect off;
proxy_intercept_errors on;
recursive_error_pages on;
error_page 404 = #rewrite_proxy;
}
location #rewrite_proxy {
rewrite ^/(.*)$ /index.html?$1 break;
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
}
}
It's brilliant and works like a charm. Now the problem is, I'm looking for a solution to give control of ACTUAL 404 errors to the web app, so it can react in different ways depending on the URL. Any suggestions?
Check out this, hope this will help you out
server {
listen 80;
location /api {
proxy_pass http://backend/api;
proxy_redirect off;
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 X-Forwarded-Host $server_name;
}
location / {
proxy_pass http://frontend;
proxy_redirect off;
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 X-Forwarded-Host $server_name;
try_files $uri $uri/ /index.html #backend;
error_page 405 #backend;
}
location #backend {
proxy_pass http://frontend;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
}
}
I have 3 AngularJS application each having their own ExpressJS backend. How do you deploy all 3 applications in this manner:
http://myapp.com/<app1>
http://myapp.com/<app2>
http://myapp.com/<app3>
Additional Information:
- I'm deploying the application in AWS EC2 Instance
- I tried merging the application in a single ExpressJS app. While this works, I still want to know if the case above is possible
Sure it's possible. You'll just need NGINX or Apche running as a reverse proxy for you.
Assuming your node apps are running on local ports 3000, 3001, and 3002, you'd setup a .conf file with those as upstream servers for the location tags like so:
. . .
location /app1 {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
. . .
location /app2 {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Read up on more details here: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04
server {
listen 80;
server_name es.domain.com;
location /app1 {
rewrite ^/(.*) /$1 break;
proxy_ignore_client_abort on;
proxy_pass http://localhost:3001;
proxy_redirect http://localhost:3001 https://es.domain.com/appw;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
auth_basic "Elasticsearch Authentication";
auth_basic_user_file /etc/elasticsearch/user.pwd;
}
location /app2 {
rewrite ^/(.*) /$1 break;
proxy_ignore_client_abort on;
proxy_pass http://localhost:3002;
proxy_redirect http://localhost:3002 https://es.domain.com/app2;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
auth_basic "Elasticsearch Authentication";
auth_basic_user_file /etc/elasticsearch/user.pwd;
}
}
Please refer this link
http://www.minvolai.com/blog/2014/08/Setting-up-a-Secure-Single-Node-Elasticsearch-server-behind-Nginx/Setting-up-a-Secure-Single-Node-Elasticsearch-server-behind-Nginx/
You can setup AWS CloudFront and setup each application as Origins. It provides flexibility to route from single domain(Setup for CloudFront) to different Express Apps and also allows to cache Static content paths at Edge locations.
I have been working on JSON API written in Elixir using the phoenix framework, and I successfully deployed yesterday. However, the API is not that useful with out a web frontend, which I wrote one as well using React.js.
I'm deploying the phoenix API using a combination of distillery and gatling, and everything appears to be working when I test it using Postman.
Then I edited the nginx configuration file to loook like the following,
/etc/nginx/sites-available/kegcopr_api
server {
listen 80;
server_name kegcopr.chrisrjones.com;
root /opt/Code/react/kegcopr-frontend/build;
index index.html index.htm;
access_log /home/deploy/deployments/kegcopr_api/nginx.access.log;
error_log /home/deploy/deployments/kegcopr_api/nginx.error.log;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://localhost:33725;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
I then created a .env file in the root of React.js project with the following line,
REACT_APP_API_URL=http://localhost:33725/api
Any help on how to get this configured would greatly be appreciated.
UPDATE
I changed the .env file to,
REACT_APP_API_URL=http://kegcopr.chrisrjones.com/api
and ran the below command,
npm run build
but I am still not seeing the React.js frontend display in the browser.
You have set the root directory, but you're sending all requests unconditionally to localhost:33725. If you want to serve static files from the root directory and pass all other requests to the proxy_pass, you can use try_files like this:
location / {
try_files $uri #proxy;
}
location #proxy {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://localhost:33725;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
try_files will try to locate the file within root with the same name as the URL, and if it fails to find a file, it'll pass the request to #proxy, which will pass it to the Phoenix app running on localhost:33725.
I have two different application one acts as a backend panel whereas one app is client facing site.
I have set the client site on the default 80 port and backend panel app is on say port number 8000.
I am facing issue when i try to bind wwww.abc.com:8000 to www.abc.com/admin. On opening of the link, text do gets displayed but css and js is not getting loaded. I found in console that its says CSS and javascript files are not found. Also, the address it specifies for css and javascript is of the root folder and not of the backend panel folder.
Here is the code I have written to setup nginx to bind the route is here
server {
listen 80;
server_name abc.com
include /etc/nginx/mime.types;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:1337;
}
location ^~ /admin {
root /root/workspace/lexcarts-admin-panel;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:8000;
proxy_redirect on;
}
}
Client app is accessible from default www.abc.com .
Please guide me where i am going wrong.
TIA