Working with Nginx + Node.js Web Containers

Nginx + Nodejs Web Containers are designed to concentrate and simplify your application configuration in a single Container.

This article explains how to setting up an Nginx + NodeJS Web Container then customize it to run a Next.js based website. The overall process is:

1. Create a Container running the Nginx + NodeJS image.
2. Connect to the Container via SSH and install Next.js.
3. Adjust the Container configuration to automatically build and start the Next.js application on boot.
4. Test the application.

The Container needs to have an [SSH/SFTP User]/docs/containers/ssh-sftp/overview/) associated with it. You can create this user when you create the container, or add a new SSH/SFTP User to an existing container.

Installing Next.js

Next.js has a well-documented Automatic Installation process that we’re going to use.

To install in your Container:

1. SSH into the Container.
2. Remove the default example application.
3. Browse to the /container/application directory.
4. Use yarn to install Next.js. You ought to be prompted for a project name.

# ssh myuser@123.123.123.123
$ rm -r /container/application/*
$ cd /container/application/
$ yarn create next-app

In this example, we’ll use project as the project name. This name will be used in the directory, /container/application/project, which will be created for project files.

Configuring the Container

Once the application is installed, configure Supervisor to build and start up your application on boot. The supervisord.conf configuration file has a section named [program:nodejs] which you can use.

$ nano /container/config/supervisord.conf

Comment out or remove the nodejs default program and add a new program named nextjs. Here is what the last few lines of the configuration file should look like with the example commented out:

;[program:nodejs]
;environment=HOME=/container/application ; $HOME variable is used by npm for logging and caching
;command=/usr/local/bin/node /container/application/app.js
;stdout_logfile=/container/logs/supervisor/%(program_name)s-stdout.log
;stderr_logfile=/container/logs/supervisor/%(program_name)s-stderr.log
;user=www-data

[program:nextjs]
environment=HOME=/container/application/
directory=/container/application/project/
command=/bin/bash -c "yarn build && yarn start"
stdout_logfile=/container/logs/supervisor/%(program_name)s-stdout.log
stderr_logfile=/container/logs/supervisor/%(program_name)s-stderr.log
user=www-data

Next, review the Nginx default host configuration file. Next.js applications listen on port 3000 by default. If your application is set to listen on a different port, check out the upstream configuration block and make adjustments.

$ nano /container/config/nginx/sites-available/default

A simplified version of the Nginx host configuration file would look like this:

upstream service {
        server localhost:3000;
}

server {
    listen 80;

    location / {
        proxy_pass http://service/;
        proxy_connect_timeout 3s;
        proxy_send_timeout   5s;
        proxy_read_timeout   5s;
        proxy_pass_header Set-Cookie;
    }
}

Enforcing HTTPS

If you have an SSL certificate installed, you can enfore HTTPS by adding a few lines to the server block. For more about switching on SSL, and about the rule for Nginx Web Containers, see SSL Certificates and HTTPS

server {
    listen 80;

    if ($http_x_forwarded_proto != 'https') {
        rewrite ^ https://$host$request_uri? permanent;
    }

    location / {
        proxy_pass http://service/;
        proxy_connect_timeout 3s;
        proxy_send_timeout   5s;
        proxy_read_timeout   5s;
        proxy_pass_header Set-Cookie;
    }
}

Apply and Test Your Changes

To apply your configuration changes, reboot the Container.

Once the Container has restarted, check your website on a browser.

You can also follow the nextjs program logs through your SSH session.

tail -f /container/logs/supervisor/nextjs-std*

If you need to make any changes, remember to reboot the Container each time.