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!
Related
I am developing a website with React.js for the frontend and have 2 separate apps for the users and the admins. The users will be under example.com and the admins under example.com/admin.
I am developing both apps behind an nginx server as a reverse proxy. I have had no issue developing a single app behind nginx, but I cannot use hot reload for the 2nd app. The app is served properly, with the only exception that the hot reload does not work.
I have HTTPS=true on both my .env files of the React.js apps. The main app's hot reload works fine, but the /admin app's hot reload fails with the error Firefox can’t establish a connection to the server at wss://192.168.1.2/adminws (developing through local network, so I can test the apps on my phone as well, but the hot reload won't work on the localhost either).
The main app is hosted under port 3000, the admin app is hosted under port 4000.
This is what my main app's .env looks like:
HTTPS=true
WDS_SOCKET_PORT=443
FAST_REFRESH=true
This is what my admin app's .env looks like:
HTTPS=true
WDS_SOCKET_PORT=443
WDS_SOCKET_PATH=/adminws
FAST_REFRESH=true
This is what my nginx configuration file looks like:
server {
# listen 80 default_server;
# listen [::]:80 default_server;
# SSL configuration
#
listen 443 ssl http2 default_server;
listen [::]:443 ssl default_server;
ssl on;
ssl_certificate /etc/nginx/ssl/localhost.crt;
ssl_certificate_key /etc/nginx/ssl/localhost.key;
gzip on;
gzip_types text/plain application/xml application/json;
gzip_proxied any;
gzip_min_length 1000;
gunzip on;
gzip_static on;
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name _;
location /ws {
proxy_pass https://127.0.0.1:3000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
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 /adminws {
proxy_pass https://127.0.0.1:4000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
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 /api {
proxy_pass http://127.0.0.1:3200;
}
location /admin {
proxy_pass https://127.0.0.1:4000;
}
location / {
proxy_pass https://127.0.0.1:3000;
}
}
I should note that the admin app's hot reload works properly when I remove both WDS_SOCKET_PORT and WDS_SOCKET_PATH from the .env file and run it on https://localhost:4000/admin, but this way I would not be able to test it behind nginx.
I removed both WDS_SOCKET_PORT and WDS_SOCKET_PATH from the admin app's .env file and it now seems to be working properly. Everything else seems to be ok.
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
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,