Angular Development Server behind Nginx with Go API

You’re here because you’d like to know the nginx.conf or rather the vhost conf for nginx in order to serve an Angular dev app on your local host.
Angular listens on port 4200 with ng serve.
In my case I have a keycloak-proxy listening on port 8080.
And my api is on /api/v1/ .
My project is called “dating”.
It’s located at ~/WebstormProjects/dating/ .

So let’s make this simple.


server {
listen 80;
listen [::]:80;
server_name dating.dev.luketic;
root /home/darko/WebstormProjects/dating/src/;
index index.html;

error_log /var/log/nginx/dating.error;

location / {
proxy_pass http://localhost:4200;
proxy_read_timeout 30;
proxy_connect_timeout 30;
proxy_redirect off;
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 $scheme;
}

location /sockjs-node/ {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
rewrite ^/(.*)$ /$1 break;
proxy_set_header Host localhost;
proxy_pass http://localhost:4200/;
}

location ~ ^/api/v1/.* {
proxy_pass http://localhost:8080;
proxy_read_timeout 30;
proxy_connect_timeout 30;
proxy_redirect off;
proxy_set_header Host $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 $scheme;
}
}

So again this is for the DEVELOPMENT server. Production has different settings.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.