I have two web apps bootstrapped from https://github.com/Swiip/generator-gulp-angular.
I want to deploy one app at http://myvps.com/app1 and other at http://myvps.com/app2.
Here is the nginx configuration that I am using for this purpose
location /app1 {
proxy_pass http://myvps.com: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;
rewrite ^/app1/(.*)$ /$1 break;
}
location /app2 {
proxy_pass http://myvps.com:5000;
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;
rewrite ^/app2/(.*)$ /$1 break;
}
I don't want to serve static content from nginx, everything should be served from nodejs server.
I have also added
<base href="/app1/">
and
<base href="/app2/">
but nothing seems to work, all the static resources give 404.
Sorry to answer my own question, I found the answer after spending a day to get it work, and since no one has answered this yet I thought I'd post my solution.
I had to serve from dist not from src, so for this purpose I had to do gulp serve:dist.
I did not had to change anything else like nginx configuration, or anything else. Hope it helps anyone else.
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!
I'm having two React applications running on the same machine. I'm using an nginx reverse proxy to handle routing requests.
The first application is running on root: '/', here is the nginx rule for it:
location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-Proto https; # for ssl
}
The other app is running on port 4000, using the following reverse proxy:
location /staging/ {
proxy_pass http://127.0.0.1:4000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-Proto https; # for ssl
}
I followed the [documentation][1] for deployment and I added the following to my package.js:
"homepage": "https:/xyz.com/staging/"
The application works using npm start. However using:
npm run build && serve -s build -l 4000
fails to load.
The request to index.html is fine however, every time the app tries to request the static content, it always responds with the index.html contents:
[![enter image description here][2]][2]
I tried setting PUBLIC_URL as well, but also failed.
Why is react failing to respond with any thing in the static directory?
Any help appreciated.
[1]: https://create-react-app.dev/docs/deployment/
[2]: https://i.stack.imgur.com/ijqx9.png
I am new to NGINX so this may be a simple fix, but i cant find any great documentation about what i am trying to do here.
So I have a website which is hosted on an ubuntu aws server by nginx and pm2. my problem is that I want to serve the website at www.mysite.com and the react app at www.mywebsite.com/app. this doesnt seem like it should be the hardest thing to do. However I have been having problems and cannot get it to work as i would like. (part of this is because i also wish to host an API server at www.mywebsite.com/api but that is a problem for after this). I was able to first just host the react app at www.mysite.com with the following nginx config:
server {
listen 80;
server_name 18.191.56.251;
root /home/ubuntu/app/src;
location / {
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_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_max_temp_file_size 0;
proxy_pass http://127.0.0.1:3000/;
proxy_redirect off;
proxy_read_timeout 240s;
}
}
But when i switch it to the sub route by altering the config as so:
server {
listen 80;
server_name x.x.x.x;
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_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 600;
proxy_send_timeout 600;
proxy_read_timeout 600;
send_timeout 600;
location /status {
return 200;
}
location /app {
proxy_pass http://127.0.0.1:3000;
}
location / {
proxy_pass http://...:3011/;
}
}
Then my base route www.mywebsite.com for the static website works fine, but www.mywebsite.com/app does not and "loads" a blank page but if you inspect you see that the app is unable to load some resources:
bundle.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
0.chunk.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
main.chunk.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
EDIT more research:
If i examine the request for the resource i see its url is www.mywebsite.com/static/js/XXX.js but the static folder is at ~/app/build/static. is this a nginx or a pm2 problem with hosting the static files?
Any help is appreciated, thanks
So I would still love a different result then this but i figured out a workaround for this, i added the following after location /app:
location /static {
proxy_pass http://127.0.0.1:3000;
}
i dont love this solution because if i end up having static content as part of other projects then it will not work, but somehow all the resources for my website are packaged within the correct proxy at /. so currently it is all working.
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.