How to configure Beanstalk Nodejs Nginx server to serve a nodejs app and also other static apps built using Angular?

0

Hi, I am using AWS Beanstalk to run a Nodejs 18 nginx server using a Procfile and it is working.
I tried to configure it using Nginx config files to show other static files and also single-page apps built using Angular but the server can't return them.

These are my nginx conf files.

in nginx.conf

#Elastic Beanstalk Nginx Configuration File

user                    nginx;
error_log               /var/log/nginx/error.log warn;
pid                     /var/run/nginx.pid;
worker_processes        auto;
worker_rlimit_nofile    31486;

events {
    worker_connections  1024;
}

http {
    server_tokens off;

    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    include       conf.d/*.conf;

    map $http_upgrade $connection_upgrade {
        default     "upgrade";
    }

    server {
        listen        80 default_server;
        access_log    /var/log/nginx/access.log main;

        client_header_timeout 60;
        client_body_timeout   60;
        keepalive_timeout     60;
        gzip                  off;
        gzip_comp_level       4;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        # Include the Elastic Beanstalk generated locations
        include conf.d/elasticbeanstalk/*.conf;
    }
}

in conf.d/elasticbeanstalk/application.conf

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

location /singlePageApp/ {
  if (!-e $request_filename){
    rewrite ^/singlePageApp/(.*)$ /singlePageApp/index.html break;
  }
}

location /nodeApp/ {
    # Proxy requests to Node.js app running on port 8080
    proxy_pass          http://127.0.0.1:8080;
    proxy_http_version  1.1;

    proxy_set_header    Connection          $connection_upgrade;
    proxy_set_header    Upgrade             $http_upgrade;
    proxy_set_header    Host                $host;
    proxy_set_header    X-Real-IP           $remote_addr;
    proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
}
asked a year ago861 views
1 Answer
0
Accepted Answer

Hi from what you were writing I understand, that you want to bypass the nodejs server to serve your static files for the single page app.

To do so you have to point nginx to the right folder in the file system where Elastic Beanstalk deployed your app to. You do so with the root element, e.g. root /var/www/main;. For more detailed information see https://www.nginx.com/blog/creating-nginx-rewrite-rules/ and https://www.digitalocean.com/community/tutorials/understanding-nginx-server-and-location-block-selection-algorithms.

If runtime/performance is not an issue it might be easier to configure your nodejs server to serve the static files for the single page app, too and proxy_pass the location /singlePageApp/ accordingly, too.

AWS
Norman
answered a year ago
profile picture
EXPERT
reviewed 3 days ago
  • Thank you, I figured it out after reading the digital ocean document. I wasn't trying to bypass the nodejs server to serve my static files for the single page app but the nodejs server was built using Angular Universal which is a standalone nodejs app so it doesn't have access to the other files by default.

    Btw, the root for Elastic Beanstalk is root /var/app/current;

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions