Forem: Hayley van Waas

Deploying a Node.js site to Vultr

Hayley van Waas — Fri, 04 Sep 2020 05:51:03 +0000

There are plenty of different tools and services that you can use to deploy your projects these days. Lately I've been heading into Heroku and AWS territory, but a service I really like using for simple projects is Vultr.

So what is Vultr?

Vultr is a server hosting platform, but let's put that into context. I assume you got to this blog post because you are trying to work out how to deploy a Node.js project. So at the moment, you type something like npm start and your server starts running and you can view your project. Vultr is a company that has many physical computers lying in wait for you to use. You "upload" your project onto one (or more) of those computers, tell them how to start the server, and bam, you can see your project running on the internets, rather than just locally on your machine.

What's the difference between Vultr and other cloud hosting services? ☁️

Look, basically nothing. On a surface level you could pick anyone of the major competitors (Digital Ocean, AWS, Azure, Google Cloud) and probably get done what you want to get done. The question though is do you need the extra bells and whistles? For my portfolio website I don't want or need anything fancy, e.g. I don't need it to auto scale to use more resources when it's busy, because at most there are only ever 2 people on my site anyway 🤷‍♀️. What I do need is the bare bones, and clear documentation on how to set that up. I might also consider Digital Ocean, because they are basically interchangeable in my eyes (in fact the first time I set a project up on Vultr, I was flicking between both Vultr and Digital Ocean documentation).

However the reason I would use Vultr rather than Heroku for this kind of site, is because Heroku has a bit of magic that takes care of a lot of steps for you, but with Vultr you have to set up and configure everything. You might be thinking, "🤔 Huh? Why is that a good thing?" This is usually where someone says "oh because it gives you lots of control over every step", what does that mean? Yea I didn't know either, but now that I have been using Vultr for a number of years, I get it.

For the longest time I just couldn't understand how the process of deploying things works. "Put it on the cloud"....ok. "Dynamically spins up servers"....cool story. "Set up https"...all right.... When I started deploying this on Vultr I suddenly understood what all those things mean, what talks to what, and more importantly when I inevitably screw something up (or it just breaks all by itself, because that happens) I now actually know what part is broken and what to frantically Google to fix it.

I'm convinced, let's do this! 👊

Hurrah!

Prerequisites

Have a Node.js website in a Git repository and ready to go.
Have a domain name purchased and ready to use.

Step 1

Create an account with Vultr. Preferably you'll use this link so that I can get $10 credit from you signing up (come on, you're reading this for free, so help a peep out!).

Step 2

Once you are signed up, logged in and on your dashboard, go to the Products page and find the button that says "Deploy New Server".

This will take you to a page that looks something like this:

Now there are obviously a lot of options here (recall the rambling earlier), so pick what is suitable for you, or just follow me if you have no idea what that is. There will be different commands for different operating systems, so I suggest you pick the same option as me for that (Ubuntu).

I'm going to select the following settings:

Cloud Compute
Sydney (pick the option that is closest to you)
64 bit OS
Ubuntu 20.04x64 (latest at time of writing)
25 GB - this is the smallest. If you don't know what you need, just pick this one since it is the cheapest, and if it turns out that's not enough then it is easy to upgrade it later.
Leave the next few fields blank, up to server hostname. Give it a name that is meaningful to your and your project, for example, for my portfolio site mine is called "personal-website"

Click "Deploy Now" and it will take you back to your dashboard where you will see the new server is busy being installed.

Wait for it to finish installing (a few minutes at most).

Step 3

Click on the server that you just created, it will take you to an overview page for that server. Copy the IP address for the server.

Then open up terminal and type the following to log into the server as the root user, (replacing <ip address> with the IP address that you copied:



$ ssh root@<ip address>

You'll be prompted for a password, use the password provided on the overview page in Vultr.

Step 4

Create a new user. This is the username and password that you'll use to log into the server from here on in, so make sure to pick something sensible (and even better, store it in your password manager if you use one).



$ adduser <my-new-user>

After entering your password you can leave the other prompts blank.

Step 5

Add the new user to a group and give sudo access:



$ usermod -aG sudo <my-new-user>

Logout and log back in as the new user:



$ logout
$ ssh <my-new-user>@<ip address>

Step 6

Update any package info on the server then install Nginx:



$ sudo apt-get update
$ sudo apt-get install nginx

Nginx is what is going to do the heavy lifting for getting people to your site. Every time someone comes to your site, Nginx is going to intercept that request, then talk to your Node.js server to work out what to send back. (The term to look up for more information is "reverse proxy"). There are a few other things it is going to do to, but that's the main task that we are interested in for the scope of this tutorial.

Step 7

Next we're going to tweak the configuration of the firewall on the Ubuntu server so that Nginx can do it's thing, and so that you can SSH back into your server:



$ sudo ufw allow 'Nginx HTTP'
$ sudo ufw allow 'OpenSSH'
$ sudo ufw enable
$ systemctl status nginx

The last command will give a few lines of output, you just need to check that it says active (running) in there somewhere.

If you have any issues with Nginx in the next few steps, here are some handy commands to stop, start, restart and reload Nginx:



$ sudo systemctl stop nginx
$ sudo systemctl start nginx
$ sudo systemctl restart nginx
$ sudo systemctl reload nginx

Step 8 🔒

This is the step where we set up SSL certificates, i.e. this is where we'll make a connection between your domain name and your server, and also set it up to use HTTPS.

First, install certbot:



$ sudo apt install certbot python3-certbot-nginx
$ sudo nano /etc/nginx/sites-available/default

This will open a file in the nano text editor. There are a lot of comments in the file, you are looking for the line that says:



server_name _;

Replace the underscore with your domain name, so your end result will look something like:



server_name mydomain.com www.mydomain.com;

Save and exit the file.

Verify the file is all good and reload:



$ sudo nginx -t
$ sudo systemctl reload nginx

Modify the Nginx configuration:



$ sudo ufw allow 'Nginx Full'
$ sudo ufw delete allow 'Nginx HTTP'

At this point you will need to set the DNS records in your domain registrar.

Set the A Record Host to @ and the Value to the IP address for your server (the one you copied way back in step 3).

Set the CNAME record Host to www and the Value to your domain name with a . suffix, e.g. mydomain.com.

Create the SSL certificate:



$ sudo certbot --nginx -d <mydomain> -d www.<mydomain>

When prompted, select 2 to set it to automatically redirect to https.

Step 9

Install Node:



$ cd ~/
$ curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh
$ sudo bash nodesource_setup.sh
$ sudo apt-get install nodejs
$ sudo apt-get install build-essential

Step 10

Clone your repository and navigate into it:



$ git clone https://github.com/<my-username>/<repo-name>.git
$ cd <repo-name>

Install your dependencies and make sure the server can run:



$ npm install
$ npm start

Step 11

Install and set up pm2. pm2 is responsible for making sure your site keeps running.



$ sudo npm install -g pm2
$ pm2 start <server file>.js
$ pm2 startup systemd

.js is the name of the file that runs your server, (commonly just server.js).



$ pm2 startup systemd

A command will be given in the output from the above command, run that command. (It will looks similar to the following)



sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u server --hp /home/server

Step 12

Back to Nginx!

Open the Nginx configuration file we were working in earlier:



$ sudo nano /etc/nginx/sites-available/default

Replace the location block with:



location / {
    proxy_pass http://localhost:<your port (probably 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;
}

Test all is well and restart:



$ sudo nginx -t
$ sudo systemctl restart nginx

Step 13 🎉

Done! You should now be able to go to your domain in any web browser and see your site!

Debugging

If you have any issues, then I highly recommend the tutorials from Vultr (here) and DigitalOcean (here).

Updating

When you want to update your website in future, all you need to do is pull the latest changes from git and then restart pm2:



$ git pull
$ pm2 restart <app name>

Deploying a Strapi project on Heroku

Hayley van Waas — Fri, 22 May 2020 09:53:59 +0000

Prerequisites:

Have an account with Heroku
Have a Strapi project, which uses a Postgres database, in a git repository

Strapi runs on a Node server and has a database (I chose Postgres). This tutorial focuses on Strapi in particular, but this really could apply to any other Node + Postgres project.

I don't know about you, but as I get further along in my career as a developer I am finding that there are more and more things that I want/need to know. For me, I have a massive blind spot when it comes to deploying anything. It makes me terribly impatient and I hate it.

I used to absolutely despise cooking, so one summer I decided that I was going to get good at it. My theory was that maybe if I was good at it, I wouldn't hate it so much. That theory turned out to be absolutely true, and not only do I love cooking now, but I also combined that love with coding and have my own recipe site! (It's called Hayley's Health Foods, if you're interested). Anyway, a couple of months ago I decided that maybe it was time to take the same approach with deployment. Maybe if it wasn't so hard, it wouldn't be such a chore. So here we are, one of the best ways to learn how to do something is to teach someone else, so welcome to this tutorial of how to deploy a Strapi application on Heroku, with the Heroku Postgres add-on.

Step 1: Create a strapi project

Hopefully you have already done this. Otherwise either:

hop over to https://hayley.codes/blog/using-strapi-to-create-a-blog to learn about Strapi, or
use yarn create strapi-app my-project (and selecting Postgres as the database type for this tutorial).

Step 2: Configure the production database settings

In config > environments > production > database.json set the client, host, port, database, username and password settings.

{
  "defaultConnection": "default",
  "connections": {
    "default": {
      "connector": "bookshelf",
      "settings": {
        "client": "postgres",
        "host": "${process.env.DATABASE_HOST}",
        "port": "${process.env.DATABASE_PORT}",
        "database": "${process.env.DATABASE_NAME}",
        "username": "${process.env.DATABASE_USERNAME}",
        "password": "${process.env.DATABASE_PASSWORD}",
      },
      "options": {}
    }
  }
}

If these process.env.variable lines are new to you, what we are doing is accessing environment variables that we will set in Heroku. This is a way to avoid posting sensitive credentials directly in git where everyone can see it. Even if your repository is private, it's definitely not good practice to commit credentials.

Step 3: Set up Heroku

If you haven't already done so, head over to https://signup.heroku.com/ to make a free account.

Download and install the Heroku CLI for your operating system. I'm using Homebrew:

brew tap heroku/brew && brew install heroku

Or go to Heroku for instructions specific to your OS.

Once you've got an account and have the CLI installed, use the following command to log in:

heroku login

Create a new project on Heroku:

heroku create your-project-name

Add the Heroku Postgres add-on:

heroku addons:create heroku-postgresql:hobby-dev

The addon comes with a free tier which includes up to 10,000 rows in the database, perfect if you're setting up something small.

The add-on automatically exposes the database credentials into a single environment variable accessible by your app. View them using the following:

heroku config

This will produce a long string for all of the variables, which can be read like so:

postgres:// USERNAME : PASSWORD @ HOST : PORT / DATABASE_NAME

Use these variables to set each of the following environment variables for your strapi project:

DATABASE_USERNAME
DATABASE_PASSWORD
DATABASE_HOST
DATABASE_PORT
DATABASE_NAME

Using the following command for each:

heroku config:set VARIABLE_NAME=variable_value

e.g.

heroku config:set DATABASE_PORT=5432

If you did not originally install Strapi with PostgresSQL you will need to install the pg module now:

npm install pg

Deploy🤞

Deploy the project:

git push heroku master

Once it has completed deployment you can open your project using

heroku open

You did it! 🎉

...hopefully.

Troubleshooting

One of the reasons I hate deploying stuff is it never seems to work first time. So if you've followed this tutorial and something didn't work out right, there a couple things to do first:

Confirm you can run the app locally. If it doesn't work locally, there's no way it's going to work on production.
Check you have correctly set all the environment variables in heroku. You can do this by going to https://dashboard.heroku.com/, clicking your app, then head to Settings where you will find a button labelled "Reveal Config Vars" - make sure they match what you can see in the terminal (recall heroku config).
Read the logs. You can see the most recent logs using heroku logs --tail There's a lot of junk in there, but more often than not there is a single line with an error message you can Google.
Google it.
Ask the community. Stack Overflow and Twitter are the places to be for us developers 😊

Using Strapi to create a blog

Hayley van Waas — Sat, 16 May 2020 06:54:18 +0000

I decided to make a blog on my personal site (so original, I know), but I also had two other pretty major side projects going on at the time (and basically always). So whatever time I could find to work on it, I wanted to be dedicated to the actual blog posts, rather than implementation. This meant that I needed something fast and easy to set up to handle the database side of things. In other words, I needed a CMS that I could add to my existing website.

What is a CMS?

CMS = Content Management System.

A CMS is an interface for adding/editing/deleting content on a website. WordPress is a very commonly used CMS.

Since I wanted a CMS that I could add to an existing site, I wanted to find a headless CMS. This is a CMS that separates the front end from the back end. You build your front end, and then talk to the back end via a REST API. I had my front end ready to go, so the back end was all I needed.

Enter strapi.

Strapi

There were no shortage of results for headless CMS', but a lot of them are paid and definitely aimed at users rather than developers. Strapi is a free, self hosted, open source CMS.

Free has pros and cons. On the one hand, I saved $$$, on the other hand, it means that I don't get support. But as a developer, this isn't so much of an issue because I can debug problems myself with the help of the internet.

I hate anything to do with deployment, so while self hosted sounds more difficult, for me it is a lot easier. I know how to deploy a Node.js application already, so Strapi just fits right in to my tried and tested deployment steps (although I ended up throwing that all out the window and learning something new anyway 🤷‍♀️) . It also means I save $$$ again by eliminating the middle-person.

Strapi also has lots of plugins (or you can create your own) which means it only comes with what you need and you can add whatever extras you want.

Open Source means that anyone can contribute to the project, so it is built for the community by the community.

Basically, right out of the box it had everything I needed, and I will be able to adapt it to my needs overtime.

Using Strapi

Let's walk through the steps to get a project up and running with strapi.

Also I will note here that the Strapi documentation is excellent, and they have a handy tutorial for installation and creating your first project.

Set up

Installation using yarn:



yarn create strapi-app my-project

Or npm:



npm create-strapi-app my-project --quickstart

This creates a new Strapi app called my-project using an interactive command line interface for you to choose your settings.

(You can add a --quickstart flag, which will create the project with the default settings. The default settings use an sqlite database, but I wanted to use postgres).

For the manual install with postgres, choose your database name and username and use the default values for host and port. For work on your local machine, a blank password is totally fine (or at least, I haven't had any disasters yet!) and I disabled SSL connection.

Going through these settings should give you something that ends up looking like this:



? Choose your installation type Custom (manual settings)
? Choose your default database client postgres
? Database name: dbname
? Host: 127.0.0.1
? Port: 5432
? Username: username
? Password:
? Enable SSL connection: No

And just like that, your project is set up and ready to go!

Use the following command to start your project:



yarn develop

And then head to http://localhost:1337/admin in a web browser, and set up an admin user.

Once you've done that you will be presented with a page that looks something like this:

The first thing I did was create my tables for the database. Click on Content Type Builder on the left menu bar, then Create New Content Type. Create the first table:

Then click continue. Create some fields (e.g. for a blog, Title and Content seem like a good starting point) then click Save on the top left.

The image above shows my blog table, with the two fields.

Now, I can go to Blogs under Content Types in the left menu bar and create a new blog post:

(Notice that Strapi automatically adds created_at and updated_at fields for every table).

Usage

Cool! We now have our headless CMS set up, complete with a database for the blog. The next step is fetching that data on the front end.

First, let's test if we can actually see the data. Open a new tab in your web browser and go to http://localhost:1337/blogs (where blogs is whatever you called your table). Hmmm 🤔, something seems wrong:

We get an error message! That is because we haven't actually told Strapi that it is ok for outsiders to fetch data, no problem, we can fix this!

Head back to your admin panel in Strapi and navigate to Roles and Permissions. Click Public. Allow public users to find and findone:

Click Save in the top right, and go and refresh your other tab.

Hurrah, our blog is there!

This means that we can now get the blog data on the front end using fetch:



fetch('http://mystrapi.com/some-slug/')

    .then((response) => {

        return response;

    });

Conclusion

So at the moment I am pretty happy with Strapi. I'll revisit this later down the track once I've played with it a bit more. But if you are a beginner and/or want something fast and easy for creating dynamic content on your site, I would definitely recommend this solution. And if you're curious as to how mine all turned out, you can check it out here :)