0

I'm trying to deploy my angular application on my EC2. I already have a Different app running on port 3000. now i'm trying to deploy my angular app on port 3030. but when i access it via the IP:3030 it works fine, but after configuring it with nginx it returns black page and with some 404 error on the Network tab.

server {
     listen 443 ssl;

     server_name <ABC.DOMAIN.COM>;

     ssl_certificate /etc/letsencrypt/live/<ABC.DOMAIN.COM>/fullchain.pem;
     ssl_certificate_key /etc/letsencrypt/live/<ABC.DOMAIN.COM>/privkey.pem;
     ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
     ssl_prefer_server_ciphers on;
     ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

     root /usr/share/nginx/html;
     index index.html index.htm;

     # Make site accessible from http://localhost/
     server_name localhost;

     location / {
         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 $http_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-Proto http;
         proxy_set_header X-Nginx-Proxy true;
         proxy_redirect off;
     }
      location /goalmate{
        rewrite /goalmate/(.*)$ /$1 break;
        proxy_pass http://localhost:3030/;
    }
}
 }

 server {
     listen 80;

     server_name <ABC.DOMAIN.COM>;

     return 301 https://$host$request_uri;
 }

Error Showing in the Networktab

can someone help me.? should'nt the requeston the networkTab show domain.com/goalmate/assets/ other than domain.com/assests

Thorin
  • 73
  • 2
  • 7
  • You should rebuild your angular app according to your URL prefix, check [this](https://stackoverflow.com/questions/38112891/angular-2-4-5-set-base-href-dynamically) Q/A. – Ivan Shatsky Oct 12 '20 at 17:54
  • And after that you shouldn't do any rewrites or change an URI with `proxy_pass` directive. Check [this](https://stackoverflow.com/questions/62759181/nginx-run-multiple-application-on-same-port-with-different-route-path) one Q/A too. – Ivan Shatsky Oct 12 '20 at 17:58
  • @IvanShatsky I'm using a express server to serve my Angular app on Port 3030, I still shouldn't use `rewrite`? – Thorin Oct 12 '20 at 17:59
  • If you don't rebuild your app using `/goalmate/` base href prefix, all the assets links would be generated as `/some/path` instead of `/goalmate/some/path` and therefore would be served by `location / { ... }` block leading to 404 errors. After rebuilding the app you wouldn't need any rewrites. – Ivan Shatsky Oct 12 '20 at 18:04
  • @IvanShatsky Thank You soo much mate! it worked.! i've a small doubt too! right now on my app, i'm calling the api like `domain.com/api` is there anyway fro me to call it like `localhost:8086`. i'e tried changing it to localhost, but then on my networktab all request goes to `localhost:8086` not my api endpoint! – Thorin Oct 12 '20 at 18:16
  • I'm not sure I understand your question correctly, but `localhost` always resolved as `127.0.0.1` pointing to a local computer. You can't refer `localhost` at user side javascript, those requests would go to the user's computer where nothing listens on a 8086 port. – Ivan Shatsky Oct 12 '20 at 19:21

0 Answers0