CODEWITHSUNDEEP
angularnginxangular-routingangular-resourcenginx-reverse-proxy
Mishi
Mishi

Reputation: 676

Unable to set href in angular 4 on nginx server

Please bear with me as it's a long question but I am stuck badly.

Objective

I want to ran my ssl configured build on my linux based server on Nginx and I want to access it on my domain https://dev.server.nl with resources /ggmd/webconsole i.e https://dev.server.nl/ggmd/webconsole

Steps I followed

I have deployed my angular 4 build on my linux server machine in webconsole folder. Path is something like /opt/web/dev/ggmd/webconsole and all my build files are inside it.

webconsole

I have ran build on nginx server by doing configuration in default file.

server {
    listen 4200 default_server;
    root /opt/web/dev/ggmd/webconsole;
    index index.html index.htm;
    server_name localhost;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

And my base href is set to <base href="/ggmd/webconsole/">

<!doctype html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <meta charset="utf-8"> 
    <title>GGMD Console</title>
    <base href="/ggmd/webconsole/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

My mapping configurations to access URl on domain is following:

location /ggmd/webconsole {
        proxy_pass http://13.26.100.155:4200;
        proxy_redirect http://13.26.100.155:4200 https://dev.w-integrate.nl/ggmd/webconsole;

        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

Problem Statement

  1. I am unable to access it via IP on https but when I try to access via HTTP http://13.26.100.155:4200/ggmd/webconsole/

I redirected to 404 page of my angular application that I defined and made in my angular router code.

  1. When I tried to access with redirect proxy then I am unable to access it on http but When I try https on https://dev.w-integrate.nl/ggmd/web/console

I get following error in browser console.

Refused to execute script from inline.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

enter image description here

When I remove "/ggmd/webconsole/" from my base href and redirect configuration like following

<base href="/"> and my redirect configurations to following 

location / {
            proxy_pass http://13.26.100.155:4200;
            proxy_redirect http://13.26.100.155:4200 https://dev.w-integrate.nl/;

            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    }

Then I am able to access my project on following

https://dev.server.nl/

http://13.26.100.155:4200 (NOT on HTTPS)

But I want to ran it on https and with /ggmd/webconsole resource https://dev.server.nl/ggmd/webconsole

How can I do this? Please forgive in case of any typing mistake.

EDIT : SOLUTION

port 443 was already in use with some other certificates under server tag server { //configurations }

I added my configurations in server tag below the server tag where port is 443 and Base href is "/"

My configurations are below: 

server {
    listen 4200 ssl;

        ssl_certificate /opt/web/dev/ggmd/webconsole/devcom.crt;
        ssl_certificate_key /opt/web/dev/ggmd/webconsole/devcom.key;

    root /opt/web/dev/ggmd/webconsole;
    index index.html index.htm;
    server_name dev.w-integrate.nl;

        location /ggmd/webconsole(.*)$ {
        proxy_pass https://83.96.205.55:4200;
        proxy_redirect https://83.96.205.55:4200 https://dev.w-integrate.nl/ggmd/webconsole;

        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        }
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Now I am able to access https but following is happening:

Via IP https://13.26.100.155:4200/ggmd/webconsole

I am routed to 404 page of my angular application via angular route and

Via reverse proxy https://dev.server.nl/ggmd/webconsole/

I am routed to 404 page of nginx

What is wrong now?

Upvotes: 2

Views: 3980

Answers (1)

Nitish Phanse
Nitish Phanse

Reputation: 562

Can you see if this file works

server {
        listen 443 ssl;

        server_name <YOUR_DOMAIN_NAME eg www.example.com>;

        ssl_certificate /path/to/rapid_ssl.crt;
        ssl_certificate_key /path/tp/cert/rapid_ssl.key;

        location /ggmd/webconsole(.*)$ {
        proxy_pass http://13.26.100.155:4200;
        proxy_redirect http://13.26.100.155:4200 https://dev.w-integrate.nl/ggmd/webconsole;

        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        }

        location / {
                try_files $uri $uri/ /index.html;
        }
}

Upvotes: 1

Related Questions