Serve Angular Application With NginX

Question

I have an angular application with the following Structure. I usually serve angular apps using an express server, but I need to deploy this one with nginx on a digitalocean instance. I'm new to nginx and don't really understand how this will work. I have an initial structure which looks something like this:

Nginx Config

server {
        listen 80;

        root /var/www/webclient.com/dist;

        index index.html;

        server_name domain.com www.domain.com;

        location / {
                proxy_pass http://134.435.11.92: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;
        }
}
server {
        listen 80;

        server_name api.domain.com;

        location / {
                proxy_pass http://134.435.11.92:8080;
                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;
        }
}

Directory Structure (dist folder)

├── 404.html
├── cloudwave.css
├── cloudwave.js
├── favicon.ico
├── fonts
│   ├── FontAwesome.otf
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── ufonts.com_tw-cen-mt.ttf
├── images
│   ├── blog
│   │   ├── blog-bg.jpg
│   │   ├── blog-img-1.jpg
│   │   ├── blog-img-2.jpg
│   │   ├── blog-img-3.jpg
│   │   ├── blog-img-4.jpg
│   │   ├── blog-img-5.jpg
│   │   ├── blog-img-6.jpg
│   │   ├── blog-img-thumb-1.jpg
│   │   └── blog-img-thumb-2.jpg
│   ├── cooker-img.png
│   ├── fashion_room.jpg
│   ├── header.jpg
│   ├── logo-orig.png
│   ├── logo.png
│   ├── overlay-pattern.png
│   ├── overlay-pattern2.png
│   ├── photo
│   │   ├── photo-1.jpg
│   │   ├── photo-2.jpg
│   │   ├── photo-3.jpg
│   │   └── photo-4.jpg
│   ├── slider
│   │   ├── slider-img-1.jpg
│   │   ├── slider-img-2.jpg
│   │   ├── slider-img-3.jpg
│   │   └── slider-img-4.jpg
│   ├── subscribe-bg.jpg
│   └── top_bg.jpg
├── index.html
├── robots.txt
├── scripts.js
└── templates.js

The second server block runs a node server and I've got that working. But the first server is where the problem is. How can I configure nginx to serve the contents in the directory structure presented? Thanks :)

Answer 1

You need to remove the whole location block in the first server block. This is for proxying and is not what you want. Then you want to set root to the path of the root directory of the files you want served.

It looks like this is already what you want. So going to www.domain.com/images/logo.png should serve the file /var/www/webclient.com/dist/images/logo.png.