Configuration Boilerplate for SPA with Nginx

January 5, 2023

Some times I need to deploy SPA (create-react-app, Vue, Angular) with nginx on my server. And here is the boilerplate for nginx configuration that allows you to modify it according to your requirements.

OPERATION-AND-MAINTENANCE

server {
    listen 80;
    server_name your.server.name;

    root /path/to/your/server/name;
    index index.html;

    # For some static files that should return with http-status-code
    location ~* \.(?:manifest|appcache|html?|xml|json|md)$ {
        expires -1;
    }

    # For some necessary static files
    location ~* \.(?:css|js)$ {
        try_files $uri =404;
        expires -1;
        access_log off;
        add_header Cache-Control "public";
    }

    # If you set backend services such as nodejs, you can do local proxy here.
    # For example, the following code will lead http://your.server.name/api/your-api to http://localhost:3000/your-api
    location /api/ {
      proxy_pass http://localhost:3000/;
    }

    # location ~ ^.+\..+$ {
    #   try_files $uri =404;
    # }

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

    # PHP service here.
    # location ~ \.php$ {
    #     include snippets/fastcgi-php.conf;
    #     fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    # }
}

For https deployment please refer to This blog.

NOTE & BLOG