Browse Source

Techweek/docker (#7)

* add techweek docker talk

* add techweek
gh-pages
Cian Butler 4 years ago
committed by GitHub
parent
commit
5877c96a70
6 changed files with 196 additions and 1 deletions
  1. +6
    -0
      README.md
  2. +30
    -0
      docker-compose.yml
  3. +0
    -1
      gulpfile.js
  4. BIN
      slides/images/docker-cat.png
  5. BIN
      slides/images/what_is_a_container.png
  6. +160
    -0
      slides/techweek-docker.html

+ 6
- 0
README.md View File

@@ -7,6 +7,12 @@ Reveal.js slide decks for Redbrick
- Make slides in `/slides` by copying template.html
- Do presentation

## Docker
- To install dependencies run `docker-compose up install`
- To build slides run `docker-compose up build-slides`
- To run a local server for slides run `docker-compose up server`
```

## Talks
- [intro 2016](https://redbrick.github.io/reveal-slides/slides/intro2016.html)
- [Using Redbrick](https://redbrick.github.io/reveal-slides/slides/how_to_redbrick.html)

+ 30
- 0
docker-compose.yml View File

@@ -0,0 +1,30 @@
version: "3"

services:
install:
image: node:boron
container_name: slides-install
command: npm install
working_dir: /usr/src/app
volumes:
- $PWD:/usr/src/app

build-slides:
image: node:boron
container_name: slides-build
command: npm run build
working_dir: /usr/src/app
volumes:
- $PWD:/usr/src/app

server:
image: node:boron
container_name: slides-server
command: npm start
working_dir: /usr/src/app
tty: true
ports:
- "8000:8000"
- "35729:35729"
volumes:
- $PWD:/usr/src/app

+ 0
- 1
gulpfile.js View File

@@ -47,7 +47,6 @@ gulp.task('compress', () => gulp
gulp.task('serve', ['default'], () => {
connect.server({
port : 8000,
root : '.',
livereload: true,
});
});


BIN
slides/images/docker-cat.png View File

Before After
Width: 1080  |  Height: 1920  |  Size: 1.5 MiB

BIN
slides/images/what_is_a_container.png View File

Before After
Width: 890  |  Height: 726  |  Size: 167 KiB

+ 160
- 0
slides/techweek-docker.html View File

@@ -0,0 +1,160 @@
<html>
<head>
<meta charset="utf-8">
<title>Docker: A Better Way for Dependencies</title>
<link rel="stylesheet" href="../dist/css/redbrick.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '../dist/css/pdf.css' : '../dist/css/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body data-bg-text="Pictures are being taken to be used on social media">
<div class="reveal">
<div class="slides">
<section>
<h3>Docker: A Better Way for Dependencies</h3>
</section>
<section id="fragments">
<h3>What I want to talk about</h3>
<ul>
<li class="fragment">What is Docker</li>
<li class="fragment">What it gives you as a developer</li>
<li class="fragment">And a Demo</li>
</ul>
</section>
<section>
<section data-markdown>
<script type='text/template'>
### What is Docker
The complicated part!
</script>
</section>
<section data-markdown>
<script type='text/template'>
> A container image is a lightweight, stand-alone, executable package of a piece of software that includes everything needed to run it: code, runtime, system tools, system libraries, settings.
Note:
This is long winded
Show dont tell
</script>
</section>
<section>
<img alt"Docker Visulisation" src="./images/what_is_a_container.png" style="height: 16em;">
<aside class="notes">
This is a computer
<br>
Each section is independent of each other
<br>
THESE ARE NOT VM
</aside>
</section>
</section>
<section>
<section data-markdown>
<script type='text/template'>
### Why you should Care
</script>
</section>
<section data-markdown>
<script type='text/template'>
#### Docker
- Don't need to install anything on your machine
- Can use conflicting versions
- No Clean Up
- Simple Script to build custom images
</script>
</section>
<section data-markdown>
<script type='text/template'>
#### Docker Compose
- Scriptable Enviroments
- Easily shared
- Easily changed
- Simple commands
</script>
</section>
</section>
<section>
<section data-markdown>
<script type='text/template'>
## Demo
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Dcoker Command
```
docker run -it --rm --name redbrick\
SECRET_API_TOKEN='somethingThatMustChange'\
RECAPTCHA_SITE_KEY='redbrickIsGreat'\
RECAPTCHA_SECRET_KEY='totalySecretKey'\
LOG_ROTATE='24h'\
-p 3000:3000 redbrick/site
```
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Docker Compose
``` yaml
version: "3"
services:
redbrick:
image: 'redbrick/site:latest'
restart: 'always'
ports:
- '3000:3000'
environment:
SECRET_API_TOKEN: 'somethingThatMustChange'
RECAPTCHA_SITE_KEY: 'redbrickIsGreat'
RECAPTCHA_SECRET_KEY: 'totalySecretKey'
LOG_ROTATE: '24h'
```
</script>
</section>
<section data-markdown>
<script type='text/template'>
#### Try it live?
</script>
</section>
</section>
<section>
<section data-markdown>
<script type='text/template'>
## Further Reading
- [docs.docker.com/compose/compose-file](https://docs.docker.com/compose/compose-file/)
- [hub.docker.com](https://hub.docker.com/)
- [docs.docker.com/engine/tutorials](https://docs.docker.com/engine/tutorials/)
- [video.fosdem.org](https://video.fosdem.org)
</script>
</section>
<section>
<h4>Questions?</h4>
<img alt"End with a cat" src="./images/docker-cat.png" style="height: 16em;">
</section>
</section>
</div>
</div>
<script src="../dist/js/reveal.js"></script>
<script src="../dist/js/head.min.js"></script>
<script type="text/javascript" src="//use.typekit.net/nts0xzw.js"></script>
<script>
Reveal.initialize({
controls: true,
history: true,
mouseWheel: true,
dependencies: [
{ src: '../dist/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: '../dist/js/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../dist/js/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../dist/js/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: '../dist/js/zoom.js', async: true },
{ src: '../dist/js/notes.js', async: true }
]
});
</script>
</body>
</html>

Loading…
Cancel
Save