SiteHost

Working with Node.js Web Containers

Deploying a Node.js web application is super easy with the Nginx + NodeJS Cloud Container images. We designed these to concentrate and simplify your application configuration in a single Container.

In this article, we will cover setting up an Nginx + NodeJS Web Container and customize it to run a Next.js based website. The overall process is:

  1. Provision the Nginx + NodeJS Web Container through the SiteHost Control Panel
  2. Connect to the Container created and install Next.js
  3. Adjust the Container configuration to automatically build and start the Next.js application on boot
  4. Test the application

Provisioning

We have an article on Creating a Container available if you are not familiar with this step. The process is the same for any Web Container. Please specify an SSH Username and SSH Password or associate an existing SFTP user with the Container once it's created. While creating the Web Container, you can also create a MySQL database if you plan to use it.

Installing Next.js

For this exercise, we'll follow the Automatic Setup method described on the Next.js documentation. The installation is simple:

  1. Log in to the Container through SSH
  2. Remove the existing example application
  3. Browse to the /container/application directory
  4. Use yarn to install Next.js: you should be prompted for a project name
# ssh myuser@123.123.123.123
$ rm -r /container/application/*
$ cd /container/application/
$ yarn create next-app

For this exercise, we use project as the project name, this means a directory with this name should have been created and the project files should be under /container/application/project.

Configuring the Container

Once the application is installed, we can go ahead and configure Supervisor to build and start-up our application on boot. The supervisord.conf configuration file has a section named [program:nodejs] we can use it as a reference.

$ nano /container/config/supervisord.conf

We'll need to 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:

;[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, we'll need to 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 any required adjustments.

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

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

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;
    }
}

If you have an SSL certificate installed already and wish to force HTTPS, that's also possible. All you need to do is add a few lines to the server block, it's the same rule we add for any Nginx Web Containers. Your final server block forcing HTTPS would look similar to the below:

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 the changes and test

To apply all these changes, we must reboot the Container, all we need to do is click a few buttons on the SiteHost Control Panel.

Once the Container starts up again, check the website on a browser. You can also follow the nextjs program logs through your SSH session.

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

After editing the project files, you can easily rebuild the project and check the changes by restarting the Container through the SiteHost Control Panel.