CODEWITHSUNDEEP
nginxserverdevopsnginx-config
Restir
Restir

Reputation: 149

How to configure nginx properly to show SPA application?

I'm setting up a new server and I want to use Nginx to deploy my application which is written in Angular. How the nginx config should look like?

This is a new VPS OVH server. I already installed Nginx on this server then I tried to configure Nginx to display even static index.html when I came into "my-app.com". Unfortunately, I always get an error that "This page is unreachable".

I'm passing there my configs:

nginx-conf:


user root;
worker_processes 1;

error_log /var/log/nginx/error.log warn;
pid   /var/run/nginx.pid;

events {

}

http {
    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"';

    access_log /var/log/nginx/access.log main;

    sendfile on;
    keepalive_timeout 65;

    include /etc/nginx/conf.d/*.conf;


}

Then I got 2 additional configs in conf.d:

default.conf

server {
    listen         [::]:80;
    server_name    my-api.com www.my-api.com;
    root           /var/www/html;
    index          index.html;
    try_files $uri  $uri/ /index.html;
}

Okay, and the last one:

my-app.com.conf

server {
    listen      [::]:80;
    server_name    my-api.com www.my-api.com;
    root           /var/www/html;
    index          index.html;
    try_files $uri /index.html;
}

And after commands: nginx -T (tests are okay), then I'm stopping Nginx by "sudo service nginx stop" command and starting it again. After getting to the browser and pass link "my-app.com" still the error is there. My expected result is just come to this page "my-app.com" and see my application. Even static HTML - that would show me that I'm making something correct.

Thank you for your help!

Upvotes: 0

Views: 6452

Answers (1)

anderio Moga
anderio Moga

Reputation: 434

Your two additional configs are the same, and you only need one of those. That said, you have your NGINX configured with server_name my-api.com www.my-api.com;. This means that only if your request URI is my-api.com or www.my-api.com NGINX will attempt to use this configuration. You can remove the server_name line to make NGINX use this configuration for every url it receives. (eg. http://{serverip}/ or http://{domain}/)

The domain you are using (I'm assuming it isn't literally my-api.com) probably isn't configured to your webserver. Your domain should have an A record pointing to your werbserver's external IP address, and your webserver's firewall should have port 80 TCP open.

Also, you have listen [::]:80;, I'm not 100% sure, but I think this implies the usage of ipv6. Try just using listen 80;

Try checking your domain's DNS settings, to make sure they are correct and change your config to

server {
    listen      80;
    root           /var/www/html;
    index          index.html;
    try_files $uri /index.html;
}

Be sure to have the build version of your Angular application in the /var/www/html folder of the server.

Upvotes: 1

Related Questions