Node to Google Cloud Compute Engine in 25 Minutes

Overview

• Introduction
• Setting Up Compute Engine
• Node in Production
• Closing Remarks + Next Steps

Introduction

I’m going to show you how to configure Google’s Compute Engine server to run your Node.js project in production in less than 30 minutes.

Prerequisites:

• A google cloud platform account (Free credits for Students https://cloud.google.com/edu/)
• Basic Knowledge of Node.js

Things I won’t be demonstrating:

• how to setup your node / react project
• Gulp

For this tutorial, I’ll be working with my starter kit. It has react + express + es6 already configured.

https://github.com/ColeMurray/react-express-starter-kit.git

Setting up Compute Engine

To get started, let’s create a new project on compute engine.

navigate to: https://console.cloud.google.com/iam-admin/projects

and click Create a New Project

After creating your project, navigate to Compute Engine in the Menu.

Here, we’ll create our VM.

Configuration:

Sweet! We have our VM configured ready for our project.

Install Node

For this tutorial, I’ll be using the web ssh client.

We need to install Node.js and Npm to setup and run our project. SSH into our machine and enter these commands:

$ sudo apt-get -y update

$ sudo apt-get install -y nodejs npm

$ sudo ln -s /usr/bin/nodejs /usr/bin/node

After installing, confirm everything installed correctly. You should see output similar to below.

Clone and Setup Our Project:

We need to download our source code and task runner for our project.

$ git clone https://github.com/ColeMurray/react-express-starter-kit.git

$ cd react-express-starter-kit

$ npm install

$ sudo npm install -g gulp

After a minute or two, we’ll have all our dependencies and task runner, gulp, installed. Gulp is our task running we will be using to create our builds. Read more here https://github.com/gulpjs/gulp

Configure Nginx

Nginx will serve as our reverse proxy. This allows our node application to be accessed from port 80

$ sudo apt-get install -y nginx

we can test that it installed correctly by doing

$ curl localhost

We now need to configure nginx to serve as our reverse proxy for our node server.

Navigate to Nginx’s sites-available folder. This folder contains configurations for nginx and will be where we create our new configuration.

$ cd /etc/nginx/sites-available

Optional: Backup your current default file

$ sudo mv default default.bak

Create our new default file:

$ sudo touch default

Now within our default file (/etc/nginx/sites-available/default):

Restart nginx

$ sudo service nginx restart

Great, now we’ve got nginx configured. Our next step is to setup node for production.

Node in Production

We want our node application to be able to handle any crashes and restart in the event of one. For this we’ll configure PM2. PM2 is a process manager that will allow our application to live forever.

Navigate back to our project:

$ cd ~/react-express-starter-kit

Install PM2:

$ sudo npm install -g pm2

We’ll be using our pm2config to start our Node project. Note the production and production port.

react-express-starter-kit/pm2config.json:

Final Step:

We’ve setup nginx, setup our dependencies, created a config file for pm2. Our final step: build and start up node app.

$ npm run build-prod

$ pm2 start pm2config.json

Navigate to the IP Address of your server found here:

Navigating to the YOUR_SERVER_IP_Address above in our browser, we load our Hello World example.:

Now you may be wondering, “Pm2 will restart my process if my node server crashes, but what if my compute engine instance crashes?”

We’ll enter two more commands that will allow our server to restart in the event of a reboot:

$ pm2 startup

$ pm2 save

That’s it! We’re done. Our server is now in production and will survive through any crashes / restarts. To confirm, let’s test it:

$ sudo shutdown -r now

After our server reboots, we should be able to navigate back to our IP address and see our node server up and running.

Clean Up

To avoid billing charges, let’s clean up this example project.

Navigate to our menu bar and click Manage All Projects:

Select our project and delete it:

Closing Remarks:

In this tutorial we learned how to deploy a node application to production. We’ve used Nginx to reverse proxy our node server and PM2 to ensure it survives any crashes / restarts.

This is a great starting point into building a scalable production-ready application.

Potential Next Steps from Here:

Create Todo List App and Deploy it:

React & Flux In ES6! (Pt 1/2)

Setup a Database:

MongoDB for GIANT Ideas

Secure our production App:

SSL: https://www.digitalocean.com/community/tutorials/how-to-create-an-ssl-certificate-on-nginx-for-ubuntu-14-04

Helmet: An node module to secure our Http Headers: https://github.com/helmetjs/helmet

Redux:

Usage with React

If you enjoyed this tutorial, please recommend, share, or comment below! As always, feel free to contact me on Twitter for problems, suggestions, chit-chat.

Cole Murray (@_ColeMurray) | Twitter