Saturday, 14 November 2015

Codetainer - A Docker Container In Your Browser


codetainer  allows you to create code 'sandboxes' you can embed in your web applications (think of it like an OSS clone of codepicnic.com  ). 


Codetainer runs as a webservice and provides APIs to create, view, and attach to the sandbox along with a nifty HTML terminal you can interact with the sandbox in realtime. It uses Docker and its introspection APIs to provide the majority of this functionality. 


Codetainer is written in Go. For more information, see the slides from a talk introduction  .

Build & Installation 

Requirements

  • Docker >=1.8 (required for file upload API) 
  • Go >=1.4 
  • godep  


Building & Installing From Source 


# set your $GOPATH
go get github.com/codetainerapp/codetainer  
# you may get errors about not compiling due to Asset missing, it's ok. bindata.go needs to be created
# by `go generate` first.
cd $GOPATH/src/github.com/codetainerapp/codetainer
# make install_deps  # if you need the dependencies like godep
make

This will create ./bin/codetainer. 

Configuring Docker 

You must configure Docker to listen on a TCP port. 

DOCKER_OPTS="-H tcp://127.0.0.1:4500 -H unix:///var/run/docker.sock"

Configuring codetainer 

See ~/.codetainer/config.toml. This file will get auto-generated the first time you run codetainer, please edit defaults as appropriate. 

# Docker API server and port
DockerServer = "localhost"
DockerPort = 4500
# Enable TLS support (optional, if you access to Docker API over HTTPS)
# DockerServerUseHttps = true
# Certificate directory path (optional)
#   e.g. if you use Docker Machine: "~/.docker/machine/certs"
# DockerCertPath = "/path/to/certs"
# Database path (optional, default is ~/.codetainer/codetainer.db)
# DatabasePath = "/path/to/codetainer.db"

Running an example codetainer 

$ sudo docker pull ubuntu:14.04
$ codetainer image register ubuntu:14.04
$ codetainer create ubuntu:14.04 my-codetainer-name
$ codetainer server  # to start the API server on port 3000

Embedding a codetainer in your web app 

  • Include codetainer.js  and jquery  in your web page. Create a div to house the codetainer terminal iframe (it's #terminal  in the example below). 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>lsof tutorial</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="/javascripts/codetainer.js"></script>
  <script src="/javascripts/lsof.js"></script>
</head>
<body>
   <div id="terminal" data-container="YOUR CODETAINER ID HERE"> 
</body>
</html> 

  • Run the javascript to load the codetainer iframe from the codetainer API server (supply data-container  as the id of codetainer on the div, or supply codetainer  in the constructor options). 


 $('#terminal').codetainer({
     terminalOnly: false,                 // set to true to show only a terminal window 
     url: "http://127.0.0.1:3000",        // replace with codetainer server URL
     container: "YOUR CONTAINER ID HERE",
     width: "100%",
     height: "100%",
  });

No comments:

Post a Comment