Nginx Redirect to EC2 Instance

Question

I had angular (version: 7) site which was deployed on S3 bucket, but for SEO purposes, recently I integrated Angular Universal.

Now I moved site/frontend from S3 bucket to EC2 instance. I am trying to deploy my angular universal application on Nginx (version: nginx/1.14.1) on my EC2 instance (CentOS).

The flow goes something like domain-name(example.com/www.example.com) is registered on godaddy which points out to Cloud Front which sends/forward my request to EC2 instance (Nginx server).

Issue

Whenever I try to hit the urls https://example.com or https://www.example.com, they got redirected to EC2 instance address like https://ec2-xx-xxx-xxx-xx.region-x.compute.amazonaws.com/ .

Someone figured out that it is due to server configuration, as stated here

Be sure, when you connect through CloudFront, that the server doesn't redirect you back to the EC2 hostname or IP (the address bar in the browser will change, if it does, and you'll want to fix your web server's config if that happens).

So it seems like I have nginx configuration issue. Following are the confurations I used.

EC2 Security Group Settings

nginx.conf

upstream nrc_frontend_nodejs {
    server 127.0.0.1:4000;
}

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name _;
        return 301 https://$host$request_uri;
}

server {
    listen       443 ssl http2 default_server;
    listen       [::]:443 ssl http2 default_server;
    server_name  example.com www.example.com;

    ssl_certificate ssl/example.chained.crt;
    ssl_certificate_key ssl/example.key;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'CEMDH+ATSGCM:EDH+AESGCG:AES256+EECDH:AES256+EDH';

    root /home/ec2-user/nginx/dist; # <-- Static Resources

   # Load configuration files for the default server block.
   include /etc/nginx/default.d/*.conf;

   location / {
        try_files $uri $uri @backend; # <--- This looks for requests (statics i.e js/css/fonts)
                                      # in /ssr/dist folder. If nothing found, calls @backend (running at 127.0.0.1:4000)
    }

    location @backend {
        proxy_pass http://nrc_frontend_nodejs;
        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_http_version 1.1;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass_request_headers on;
    }
}

Its been couple of days, I have tried many different ways to configure the nginx, but no luck so far. Can anyone help ?

Does it make any difference if you whitelist HOST header on CloudFront in cache based on Selected header configuration ? — James Dean, Apr 23 '19 at 11:20
@JamesDean, I have added HOST header to whitelist header list on CloudFront Distribution, but no luck. — Junaid, Apr 23 '19 at 12:03

score 0 · Answer 1 · answered Apr 23 '19 at 07:34

server {
    listen 80;
    listen [::]:80;

    server_name yourdomaim.com;

    location / {
                proxy_pass http://localhost:5200;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $remote_addr;
                proxy_set_header  X-Real-IP  $remote_addr;
                proxy_cache_bypass $http_upgrade;
        }
}

You should run your angular universal project on port 5200, using tools like pm2 if you are using nodeJS. And the about settings should work in nginx

1) What's the reason for port 5200? 2) And what will be value for `root` (folder)? — Junaid, Apr 23 '19 at 08:29

Nginx Redirect to EC2 Instance

1 Answers1