Browse Source

[+Ina] Adds Docker Spike

Camilla 2 years ago
parent
commit
17217cdc60

+ 1 - 0
.gitignore

@@ -1 +1,2 @@
1 1
 *.db
2
+node_modules/

+ 95 - 0
docker/README.md

@@ -0,0 +1,95 @@
1
+# Docker Spike
2
+
3
+## Useful commands
4
+
5
+```
6
+docker version
7
+```
8
+
9
+- List images
10
+```
11
+docker images
12
+```
13
+
14
+- List containers
15
+```
16
+docker ps -a
17
+```
18
+
19
+- Build the image
20
+```
21
+cd [folder-with-dockerfile]/
22
+docker build -t image-tag .
23
+```
24
+
25
+- Run Image
26
+```
27
+docker run [image-tag]
28
+```
29
+
30
+- Add a new image from a tag
31
+```
32
+docker tag [tag-id] [new name]
33
+```
34
+
35
+- Remove image
36
+```
37
+docker rmi -f [image-name-or-id]
38
+```
39
+or
40
+```
41
+docker image rm -f [image-name-or-id]
42
+```
43
+
44
+- Remove container (removes associated volumes as well)
45
+```
46
+docker rm -f [container-id]
47
+```
48
+
49
+## Create your own image
50
+
51
+```
52
+mkdir image-name
53
+cd image-name
54
+touch Dockerfile
55
+```
56
+
57
+- In the `Dockerfile`:
58
+```
59
+FROM docker/whalesay:latest
60
+RUN apt-get -y update && apt-get install -y fortunes
61
+CMD /usr/games/fortune -a | cowsay
62
+```
63
+
64
+- Build the image
65
+```
66
+cd image-name/
67
+docker build -t image-tag .
68
+```
69
+
70
+- Run the container
71
+```
72
+docker run image-tag
73
+```
74
+
75
+## Docker Compose
76
+
77
+It is used to define and run multi-container Docker applications (with different services). By writing a `docker-compose.yml` file you can specify these services.
78
+Then, using a single command, you create and start all the services from your configuration.
79
+
80
+### Useful commands
81
+
82
+- Start docker compose
83
+```
84
+docker-compose up
85
+```
86
+
87
+- See logs from one docker-compose service
88
+```
89
+docker-compose logs -f [service]
90
+```
91
+
92
+## Resources
93
+- [Create-react-app and Docker](http://start.jcolemorrison.com/no-eject-create-react-app-with-sass-storybook-and-yarn-in-a-docker-environment/)
94
+- [Webpack and Docker](https://medium.com/@andyccs/webpack-and-docker-for-development-and-deployment-ae0e73243db4)
95
+- [Docker Volumes](http://container-solutions.com/understanding-volumes-docker/)

+ 15 - 0
docker/create-react-app-docker/Dockerfile

@@ -0,0 +1,15 @@
1
+# Start with Node
2
+FROM node:6.9.4
3
+
4
+# Install Yarn, because lolnpm
5
+RUN curl -o- -L https://yarnpkg.com/install.sh | bash
6
+
7
+# Make yarn available to SH, and thus your compose file
8
+ENV PATH="/root/.yarn/bin:${PATH}"
9
+
10
+# Add CRA and Storybook to your Dev Image
11
+RUN yarn global add create-react-app
12
+
13
+# All operations that are run from on this image will assume
14
+# this to be the directory the commands are run from
15
+WORKDIR /usr/src/app/

+ 18 - 0
docker/create-react-app-docker/app/.gitignore

@@ -0,0 +1,18 @@
1
+# See https://help.github.com/ignore-files/ for more about ignoring files.
2
+
3
+# dependencies
4
+/node_modules
5
+
6
+# testing
7
+/coverage
8
+
9
+# production
10
+/build
11
+
12
+# misc
13
+.DS_Store
14
+.env
15
+npm-debug.log*
16
+yarn-debug.log*
17
+yarn-error.log*
18
+

File diff suppressed because it is too large
+ 1623 - 0
docker/create-react-app-docker/app/README.md


+ 18 - 0
docker/create-react-app-docker/app/package.json

@@ -0,0 +1,18 @@
1
+{
2
+  "name": "app",
3
+  "version": "0.1.0",
4
+  "private": true,
5
+  "dependencies": {
6
+    "react": "^15.5.4",
7
+    "react-dom": "^15.5.4"
8
+  },
9
+  "devDependencies": {
10
+    "react-scripts": "0.9.5"
11
+  },
12
+  "scripts": {
13
+    "start": "react-scripts start",
14
+    "build": "react-scripts build",
15
+    "test": "react-scripts test --env=jsdom",
16
+    "eject": "react-scripts eject"
17
+  }
18
+}

BIN
docker/create-react-app-docker/app/public/favicon.ico


+ 31 - 0
docker/create-react-app-docker/app/public/index.html

@@ -0,0 +1,31 @@
1
+<!doctype html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8">
5
+    <meta name="viewport" content="width=device-width, initial-scale=1">
6
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7
+    <!--
8
+      Notice the use of %PUBLIC_URL% in the tag above.
9
+      It will be replaced with the URL of the `public` folder during the build.
10
+      Only files inside the `public` folder can be referenced from the HTML.
11
+
12
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13
+      work correctly both with client-side routing and a non-root public URL.
14
+      Learn how to configure a non-root public URL by running `npm run build`.
15
+    -->
16
+    <title>React App</title>
17
+  </head>
18
+  <body>
19
+    <div id="root"></div>
20
+    <!--
21
+      This HTML file is a template.
22
+      If you open it directly in the browser, you will see an empty page.
23
+
24
+      You can add webfonts, meta tags, or analytics to this file.
25
+      The build step will place the bundled scripts into the <body> tag.
26
+
27
+      To begin the development, run `npm start`.
28
+      To create a production bundle, use `npm run build`.
29
+    -->
30
+  </body>
31
+</html>

+ 24 - 0
docker/create-react-app-docker/app/src/App.css

@@ -0,0 +1,24 @@
1
+.App {
2
+  text-align: center;
3
+}
4
+
5
+.App-logo {
6
+  animation: App-logo-spin infinite 20s linear;
7
+  height: 80px;
8
+}
9
+
10
+.App-header {
11
+  background-color: #222;
12
+  height: 150px;
13
+  padding: 20px;
14
+  color: green;
15
+}
16
+
17
+.App-intro {
18
+  font-size: large;
19
+}
20
+
21
+@keyframes App-logo-spin {
22
+  from { transform: rotate(0deg); }
23
+  to { transform: rotate(360deg); }
24
+}

+ 21 - 0
docker/create-react-app-docker/app/src/App.js

@@ -0,0 +1,21 @@
1
+import React, { Component } from 'react';
2
+import logo from './logo.svg';
3
+import './App.css';
4
+
5
+class App extends Component {
6
+  render() {
7
+    return (
8
+      <div className="App">
9
+        <div className="App-header">
10
+          <img src={logo} className="App-logo" alt="logo" />
11
+          <h2>Hey to React</h2>
12
+        </div>
13
+        <p className="App-intro">
14
+          To get started, edit <code>src/App.js</code> and save to reload.
15
+        </p>
16
+      </div>
17
+    );
18
+  }
19
+}
20
+
21
+export default App;

+ 8 - 0
docker/create-react-app-docker/app/src/App.test.js

@@ -0,0 +1,8 @@
1
+import React from 'react';
2
+import ReactDOM from 'react-dom';
3
+import App from './App';
4
+
5
+it('renders without crashing', () => {
6
+  const div = document.createElement('div');
7
+  ReactDOM.render(<App />, div);
8
+});

+ 5 - 0
docker/create-react-app-docker/app/src/index.css

@@ -0,0 +1,5 @@
1
+body {
2
+  margin: 0;
3
+  padding: 0;
4
+  font-family: sans-serif;
5
+}

+ 9 - 0
docker/create-react-app-docker/app/src/index.js

@@ -0,0 +1,9 @@
1
+import React from 'react';
2
+import ReactDOM from 'react-dom';
3
+import App from './App';
4
+import './index.css';
5
+
6
+ReactDOM.render(
7
+  <App />,
8
+  document.getElementById('root')
9
+);

File diff suppressed because it is too large
+ 7 - 0
docker/create-react-app-docker/app/src/logo.svg


File diff suppressed because it is too large
+ 5302 - 0
docker/create-react-app-docker/app/yarn.lock


+ 14 - 0
docker/create-react-app-docker/docker-compose.yml

@@ -0,0 +1,14 @@
1
+version: '2'
2
+
3
+services:
4
+  # the name of our service that will run the CRA, docker-compose will reference it as web
5
+  web:
6
+    environment:
7
+      NODE_ENV: development
8
+    image: react-app # the image used for the service
9
+    ports:
10
+      - 3001:3000 # app will be at 3001
11
+    volumes:
12
+      - ./app:/usr/src/app # map our app directory to the volumes app working directory
13
+    command: yarn start # command to run when starting the service
14
+    

+ 3 - 0
docker/dockertutorial/Dockerfile

@@ -0,0 +1,3 @@
1
+FROM docker/whalesay:latest
2
+RUN apt-get -y update && apt-get install -y fortunes
3
+CMD /usr/games/fortune -a | cowsay