Configuring Nuxt.js Application with Nginx

Below is an example configuration showing how to set up Nginx. This configuration assumes that your Nuxt.js application is running on localhost:3000.

server {
    listen 80;
    server_name yourdomain.com; 

    location / {
        proxy_pass http://localhost: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: This section defines the server configuration. The listen directive specifies which port Nginx should listen on.
• server_name: Defines your domain name, helping Nginx determine which requests to respond to.
• location /: Specifies how to handle incoming requests.
• proxy_pass: Forwards incoming requests to http://localhost:3000, where your Nuxt.js application is running.
• proxy_http_version: Sets the HTTP version to 1.1, which is necessary for features like WebSocket.
• proxy_set_header: These directives modify the request headers. They are necessary for some features, such as WebSocket updates, to function properly.
• proxy_cache_bypass: Allows bypassing the cache, ensuring that dynamic content like WebSocket updates remains fresh.

Starting Your Nuxt.js Application

To start your Nuxt.js application, navigate to your project’s root directory and run:

npm run start

This command will start your Nuxt.js application on the specified port (3000).