Simple Serverless Deployment with Zeit

Now 2.0 by Zeit is "A new era of serverless deployments". It is a serverless application deployment service that makes it as easy as typing now in a terminal...

a year ago

Latest Post Automatic Offline Backup With a Raspberry Pi by Tyler Moon

Now 2.0 by Zeit is "A new era of serverless deployments". It is a serverless application deployment service that makes it as easy as typing now in a terminal to deploy code. Now is the simplest cloud infrastructure system out there right now by a long shot. And with its built in GitHub integrations, Now can make creating a CI / CD pipeline simple as well!

While there are many different things that can be deployed with Now, lets start with a simple website example. We are going to deploy two static HTML pages, a Node.js serverless function, and throw in some redirect routing for fun.

Prerequisites

For an explanation of a cross-platform development tool setup check out my other article here

Project Setup

The first thing we will need to do is setup our project by creating a new directory and the needed files. The touch command creates an empty file with the given name and we will fill in the details later.

Project Setup
// Create directory
mkdir zeit-demo 

// Change to the new directory
cd zeit-demo

// Create needed project files
touch index.html // Home page
touch about.html // Secondary page
touch date.js    // Example Node.js function
touch now.json   // Now config file
touch .nowignore // Now ignore file

Next we will need to install the Now CLI in order to deploy our project. Using the Node Package Manager (NPM) makes it simple to install.

Install Now
npm install -g now // Use -g to install the package globally

Fill out files

Now that we have our project structure with empty files we need to add some content. For this simple example we are just going to use the Bootstrap styling by a CDN.

Index.html

Add the following HTML to the index.html file

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Simple Bootstrap Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Zeit Demo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="date.js">Date.js</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/redirect">Redirect</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
        </ul>
      </div>
    </nav>
    <br>

    <!-- Example content -->
    <div class="container">
      <h1>Hello, world!</h1>
      <p>This is an example site deployed with <a href="http://zeit.co">Zeit</a>!</p>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

About.html

Add the following HTML to the about.html file

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Simple bootstrap navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Zeit Demo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="date.js">Date.js</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/redirect">Redirect</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="about.html">About <span class="sr-only">(current)</span></a>
          </li>
        </ul>
      </div>
    </nav>
    <br>

    <!-- Example content -->
    <div class="container">
      <h1>About Page</h1>
      <p>This is an example about page!</p>
    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Date.js

Add the following Node.js code to the date.js file. This code will be run as a serverless function by Now.

module.exports = (req, res) => {
  res.end(`The date is ${Date.now()}! This is and example of a Node.js serverless function.`);
};

Now.json

Add the following JSON content to the now.json file. This file configures the Now deployments. For more information checkout the Zeit Docs. In the builds section you define the "builders" which tells Now which NPM package to use in deploying and running code for each file. The *. wildcard syntax takes any file that ends with that extension. The routes section allows you to define specific routes. The default routes to each file is the filename (eg. /about.html goes to the about file).

{
  "version": 2,
  "builds": [
    { "src": "*.js", "use": "@now/node" },
    { "src": "*.html", "use": "@now/static" }
  ],
  "routes": [
    { "src": "/redirect", "status": 301, "headers": { "Location": "https://zeit.co/" } }
  ],
  "env": {
    "DATABASE_NAME": "test"
  },
  "regions": ["iad1"]
}

.nowignore

A .nowignore file acts the same as a .gitignore file in that it specifies which files / directories to not upload on deployment. This can be useful to slim down how long deployments take by not uploading unneeded files.

.git

Deploy Project

Now that we have our project setup its time to deploy it! And this is where the power of Now comes into effect. The following 3 character command is all thats needed!

Deploy Project to Zeit
now

And after a minute the site should be live at the returned URL.

You can view my example here

View Website

After the deployment finishes it returns the URL for that specific version. Each deployment will get a different URL so that you can review different versions easily. You can also specify a domain name to deploy it with a consistent URL.

Check out the Date.js link in the navigation to see the Node.js serverless function in action. The redirect link should redirect to the Zeit homepage and the about link should show the second html page.

Summary

So with a few files and NPM commands we can see how easy and quickly deploying code to Zeit can be. The Now system makes it quite easy.

Tyler Moon

Published a year ago

Comments?

Leave us your opinion.