Configuring sandboxes

Sandboxes are a core part of Instruqt Labs. They enable you to run your software inside of Instruqt. In this section we will configure a simple NGINX service, and learn how we can connect to them from our UI.

Concepts we will learn about in this section:

• Container

• Service

• Tab

Adding a container to your lab

Let's start by defining what kind of container we would like to display in our lab. As mentioned above, we will use the example of an NGINX web server.

Create a sandbox & network

Start by creating a sandbox.hcl file, then add the following two resources to the contents of the file.

resource "network" "main" {
  subnet = "10.0.5.0/24"
}

resource "container" "nginx" {
  image {
    name = "nginx"
  }

  port {
    local = 80
    host  = 80
  }

  network {
    id = resource.network.main.meta.id
  }
}

To configure the container resource, we start by defining an image block. The name field in the block is the name of a Docker image. We use nginx here for our example. As this is a service we want to expose to the lab, we also must specify the port bindings. We simply map port 80 on the host machine to port 80 on the local machine, to forward the port to our web service.

For more information on how to configure containers, please see the Container reference page.

We don't need to dive too deeply into what networking is in this guide, but if you want to understand how networks function in more details, visit the Network reference page.

Create a service resource

Before we can add the container to the lab, we should first specify a service resource. The service resource configures how we interact with the container. The service resource let's us connect directly to a web service in our lab.

Create a file called tabs.hcl, and define your service. (we prefer tabs.hcl to keep all tabs collocated, but at the end of the day, you can use any name you want.)

resource "service" "nginx" {
  title = "Web Page"

  target = resource.container.nginx
  scheme = "http"
  port   = 80
  path   = "/"
}

(Explain the fields briefly.)

For more information on configuring services, see the Service reference page.

Adding the service to a tab

(Explain tabs briefly)

(Explain adding a new column to our layout, rename to two_columns)

resource "layout" "two_column" {
  column "main" {}

  column "secondary" {
    width = 33
  }
}

resource "lab" "main" {
  ...
  layout "two_columns" {
    tab "nginx" {
      panel = "main"
      target = resource.service.nginx
    }

    instructions {
      panel = "secondary"
    }
  }
}

(Explain required tab fields)

Preview your changes

(Guide, and screenshot of how our lab looks at this stage.)