Скачать или смотреть Serving Static Assets to a Node Server with Nginx

Learn how to serve static assets, like HTML files, to a Node server running on Nginx. This guide provides a step-by-step approach to correctly configure Nginx for your React app and backend server.
---
This video is based on the question https://stackoverflow.com/q/65417838/ asked by the user 'NHeinDev' ( https://stackoverflow.com/u/12874486/ ) and on the answer https://stackoverflow.com/a/65420541/ provided by the user 'abhishek rana' ( https://stackoverflow.com/u/13607556/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How do I serve static assets (html) to a node server running with nginx?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Serving Static Assets to a Node Server with Nginx: A Comprehensive Guide

When running a Node.js application with Nginx as a reverse proxy, you may encounter issues when trying to serve static assets for your front-end applications, particularly with frameworks like React. One common challenge is receiving a CANNOT GET / error when leading the server to serve these static files effectively. In this guide, we will explore how to properly configure your Nginx server to serve static assets while still enabling your Node server to handle API requests smoothly.

The Problem

You've set up a Node.js server using PM2 and are trying to serve your React app through Nginx. You want your application to point to a domain and for the Node server to only respond to client requests. After setting everything up, visiting your domain yields a CANNOT GET / error, indicating a misconfiguration in your Nginx setup.

Understanding the Nginx Configuration

Your current Nginx configuration might contain both the static file serving and backend API proxying aspects, potentially leading to conflicts. Below is the configuration you were trying to implement:

[[See Video to Reveal this Text or Code Snippet]]

This configuration attempts to serve static files from /var/www/html/, but the way it’s currently written can cause issues with the expected routing for your application.

The Solution

To fix the problem, we recommend rearranging your Nginx configuration. It’s important to specify your API routes before your asset routes to ensure that the Nginx server correctly matches the incoming requests. Here is a revised version of your Nginx configuration:

[[See Video to Reveal this Text or Code Snippet]]

Key Changes Made

Order of Location Blocks: The /graphql location block has been defined before the / location block. This ensures that API requests are correctly routed to the backend before Nginx tries to serve static files.

Timeout Adjustments: Increased timeout settings for read and send operations. This can help avoid timeout errors for larger requests or responses.

Root Directive: The root directive remains necessary for serving the static files, indicating where Nginx should look for those files on the server.

Why This Works

By structuring your Nginx configuration in this way, we allow the server to first evaluate requests meant for the API and then handle static files separately. The try_files directive is particularly important. It attempts to serve the requested file, and if it doesn’t exist, it falls back to serving the index.html file, allowing your React app to take over client-side routing. This is a critical feature for Single Page Applications (SPAs) like those built with React.

Conclusion

In summary, serving static assets effectively through Nginx while managing API requests is crucial for a smooth web application experience. By adjusting the structure of your Nginx configuration, you can ensure your application runs without those frustrating errors. Remember, the key is to prioritize your API routes before static file routes to provide the necessary functionality.

By following this guide, you'll be on your way to successfully deploying your React app combined with a robust backend service. Happy coding!