Learning how to deploy Node.js apps on web-servers like Apache is surprisingly confusing. Here's how you can host your Node.js apps on a standard Apache server.

The problem with Node.js and Apache

If you've tried to run a Node.js app on a more standard web-server that uses Apache or Nginx, you may have noticed that the process of putting your app online isn't as simple as you thought.

Starting the app is easy as you have access to your server's terminal, but soon you'll realise that your app is being shown on your domain together with the port it's running on. Something like this: example.com:3000.

It's pretty ugly, and not very professional, so how do we get around this?

Deploy your Node app to Apache

Removing that ugly port number is actually really easy if you know where to look! Unfortunately Apache's documentation is impossible to read through, so finding any answers is actually quite hard.

All the changes you'll have to do will happen in your Apache config files.

If you have a single website hosted on your server, this file will be located at /etc/apache2/sites-available/000-default.conf. If you have Virtual Hosts enabled then it will be in one of the other config files inside /etc/apache2/sites-available/.

Once you've opened your config file you should see something like this:

<VirtualHost *:80>
    # A bunch of settings
</VirtualHost>

Inside those VirtualHost tags you simply need to add:

    <Location / >
        ProxyPass http://127.0.0.1:<your-port-number>/
        ProxyPassReverse http://127.0.0.1:<your-port-number>/
    </Location>

The final result will look something like this:

<VirtualHost *:80>

        ServerAdmin email@example.com
        ServerName example.com

       DocumentRoot <your-folder>
        <Directory />
        Options -Indexes +FollowSymlinks
        AllowOverride None
        Require all granted
        </Directory>

       ProxyRequests Off
        ProxyPreserveHost On
        ProxyVia Full
        <Proxy *>
        Require all granted
        </Proxy>

        <Location />
            ProxyPass http://127.0.0.1:8080/
            ProxyPassReverse http://127.0.0.1:8080/
        </Location>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

What we've added here is a Reverse Proxy, and it's actually really simple.

All we do is specify the port our app is running on (http://127.0.0.1:8080/) as well as where we want to redirect the traffic (<Location />, the "/" next to location), and Apache will know to show anything under that specific port at the specified location.

To actually make these changes live, simply run:

sudo systemctl reload apache2

This will scour your config files and apply the changes you've made. You'll then be able to view your app at example.com.

And that's you done!

Wondering how to automate your app's deployment process in Ubuntu? Follow our Github to Ubuntu CI/CD pipeline guide!