Skip to content

Commit

Permalink
tweaks part2
Browse files Browse the repository at this point in the history
  • Loading branch information
mluukkai committed Mar 12, 2024
1 parent 1814b0f commit 304f071
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 42 deletions.
2 changes: 1 addition & 1 deletion docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ The course is suitable for anyone interested in Docker or containerization and h
The 2024 edition of the course starts officially on 11th March. The material is currently being updated. At the time of writing (11th March) the following parts have already been updated

- Part 1
- Part 2 up to and including chapter _Docker networking_
- Part 2

You may continue already beyond the updated material but beware, there might be some outdated content!

Expand Down
10 changes: 5 additions & 5 deletions docs/part-2/section-3.md
Original file line number Diff line number Diff line change
Expand Up @@ -252,8 +252,8 @@ There is again a button (and a form!) in the frontend that you can use to ensure

Submit the docker-compose.yml

* TIP: When configuring the database, you might need to destroy the automatically created volumes. Use commands `docker volume prune`, `docker volume ls` and `docker volume rm` to remove unused volumes when testing. Make sure to remove containers that depend on them beforehand.

TIPS:
* When configuring the database, you might need to destroy the automatically created volumes. Use commands `docker volume prune`, `docker volume ls` and `docker volume rm` to remove unused volumes when testing. Make sure to remove containers that depend on them beforehand.
* `restart: unless-stopped` can help if the Postgres takes a while to get ready

![Backend, frontend, redis and a database](/img/exercises/back-front-redis-and-database.png)
Expand Down Expand Up @@ -291,9 +291,9 @@ It might be Nginx configuration problem. Ensure there is a trailing / on the bac

:::info Exercise 2.8

Add [Nginx](https://hub.docker.com/_/nginx) to the example to work as a [reverse proxy](https://en.wikipedia.org/wiki/Reverse_proxy) in front of the example app frontend and backend. According to Wikipedia
In this exercise, you shall add [Nginx](https://hub.docker.com/_/nginx) to work as a [reverse proxy](https://en.wikipedia.org/wiki/Reverse_proxy) in front of the example app frontend and backend.

_A reverse proxy is a type of proxy server that retrieves resources on behalf of a client from one or more servers. These resources are then returned to the client, appearing as if they originated from the reverse proxy server itself._
According to Wikipedia _a reverse proxy is a type of proxy server that retrieves resources on behalf of a client from one or more servers. These resources are then returned to the client, appearing as if they originated from the reverse proxy server itself._

![Backend, frontend, redis, a database and nginx](/img/exercises/back-front-redis-database-and-nginx.png)

Expand All @@ -303,7 +303,7 @@ The idea is that a browser makes _all_ requests to _http://localhost_. If the re

So, at the end, you should see that the frontend is accessible simply by going to <http://localhost>. All buttons, except the one labeled _Exercise 2.8_ may have stopped working, do not worry about them, we shall fix that later.

The following file should be set to _/etc/nginx/nginx.conf_ inside the nginx container. You can use a file bind mount where the contents of the file is the following:
The following file should be set to _/etc/nginx/nginx.conf_ inside the Nginx container. You can use a file bind mount where the contents of the file is the following:

```bash
events { worker_connections 1024; }
Expand Down
76 changes: 40 additions & 36 deletions docs/part-2/section-4.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
title: 'Containers in development'
---

Containers are not only great in production. They can be used in development environments as well and offer a number of benefits. The same _works-on-my-machine_ problem is faced often when a new developer joins the team. Not to mention the headache of switching runtime versions or a local database!
Containers are not only great in production. They can be used in development environments as well and offer several benefits. The same _works-on-my-machine_ problem is faced often when a new developer joins the team. Not to mention the headache of switching runtime versions or a local database!

For an example, a [software development team](https://toska.dev/) at the University of Helsinki has a fully [containerized development environment](https://ethesis.helsinki.fi/repository/handle/123456789/30995). The principle in all development projects is to have a setup so that a new developer only needs to install Docker and clone the project code from GitHub to get started. Not a single dependency is ever installed on to host machine, Git, Docker and the text editor of choice is only thing that is needed.
For example, a [software development team](https://toska.dev/) at the University of Helsinki has a fully [containerized development environment](https://ethesis.helsinki.fi/repository/handle/123456789/30995). The principle in all development projects is to have a setup so that a new developer only needs to install Docker and clone the project code from GitHub to get started. Not a single dependency is ever installed on to host machine, Git, Docker and the text editor of choice are the only things that are needed.

Even if your application is not completely containerized during development, containers can very helpful. For example, say you need MongoDB version 4.0.22 installed in port 5656. It's now a oneliner: "docker run -p 5656:27017 mongo:4.0.22" (MongoDB uses 27017 as default port).
Even if your application is not completely containerized during development, containers can be very helpful. For example, say you need MongoDB version 4.0.22 installed in port 5656. It's now an oneliner: "docker run -p 5656:27017 mongo:4.0.22" (MongoDB uses 27017 as the default port).

Let's containerize a NodeJS development environment. As you perhaps know [NodeJS](https://nodejs.org/en/) is a cross-platform JavaScript runtime that makes it possible to run JavaScript in your machine, servers and embedded devices, among many other platforms

The setup requires some expertise on the way how NodeJS works. Here is a simplified explanation if you're not familiar: libraries are defined in `package.json` and `package-lock.json` and installed with `npm install`. [npm](https://www.npmjs.com/) is the Node package manager.
The setup requires some expertise in the way how NodeJS works. Here is a simplified explanation if you're not familiar: libraries are defined in `package.json` and `package-lock.json` and installed with `npm install`. [npm](https://www.npmjs.com/) is the Node package manager.

To run application with the packages we have script defined in package.json that instructs Node to execute index.js, the main/entry file in this case the script is executed with `npm start`. The application already includes code to watch for changes in the filesystem and restart the application if any changes are detected.
To run the application with the packages we have a script defined in package.json that instructs Node to execute index.js, the main/entry file in this case the script is executed with `npm start`. The application already includes code to watch for changes in the filesystem and restart the application if any changes are detected.

The project "node-dev-env" is here [https://github.com/docker-hy/material-applications/tree/main/node-dev-env](https://github.com/docker-hy/material-applications/tree/main/node-dev-env). I already included a development Dockerfile and a helpful docker-compose.yml.
The project "node-dev-env" is here [https://github.com/docker-hy/material-applications/tree/main/node-dev-env](https://github.com/docker-hy/material-applications/tree/main/node-dev-env). We have already included a development Dockerfile and a helpful docker-compose.yml.

**Dockerfile**
```Dockerfile
Expand Down Expand Up @@ -50,46 +50,49 @@ And that's it. We'll use volume to copy all source code inside the volume so CMD
```console
$ docker compose up
Creating network "node-dev-env_default" with the default driver
Creating volume "node-dev-env_node_modules" with default driver
Building node-dev-env
Step 1/4 : FROM node:14
...

Attaching to node-dev-env
node-dev-env |
node-dev-env | > [email protected] start /usr/src/app
node-dev-env | > nodemon index.js
...

node-dev-env | App listening in port 3000
Attaching to node-dev-env
node-dev-env |
node-dev-env | > [email protected] start
node-dev-env | > nodemon index.js
node-dev-env |
node-dev-env | [nodemon] 2.0.7
node-dev-env | [nodemon] to restart at any time, enter `rs`
node-dev-env | [nodemon] watching path(s): *.*
node-dev-env | [nodemon] watching extensions: js,mjs,json
node-dev-env | [nodemon] starting `node index.js`
node-dev-env | App listening in port 3000
```

Great! The initial start up is a bit slow. It is a lot faster now that the image is already built. We can rebuild the whole environment whenever we want with `docker compose up --build`.
Great! The initial start-up is a bit slow. It is a lot faster now that the image is already built. We can rebuild the whole environment whenever we want with `docker compose up --build`.

Let's see if the application works. Use browser to access [http://localhost:3000](http://localhost:3000), it should do a simple plus calculation with the query params.
Let's see if the application works. Use the browser to access [http://localhost:3000](http://localhost:3000), it should do a simple plus calculation with the query params.

However, the calulation doesn't make sense! Let's fix the bug. I bet it's this line right here [https://github.com/docker-hy/material-applications/blob/main/node-dev-env/index.js#L5](https://github.com/docker-hy/material-applications/blob/main/node-dev-env/index.js#L5)
However, the calculation doesn't make sense! Let's fix the bug. I bet it's this line right here [https://github.com/docker-hy/material-applications/blob/main/node-dev-env/index.js#L5](https://github.com/docker-hy/material-applications/blob/main/node-dev-env/index.js#L5)

When I change the line, on my host machine the application instantly notices that files have changed:

```console
▶ docker compose up
Starting node-dev-env ... done
$ docker compose up

...

Attaching to node-dev-env
node-dev-env |
node-dev-env | > [email protected] start /usr/src/app
node-dev-env | > nodemon index.js
node-dev-env |
node-dev-env | [nodemon] 2.0.7
node-dev-env | [nodemon] to restart at any time, enter `rs`
node-dev-env | [nodemon] watching path(s): *.*
node-dev-env | [nodemon] watching extensions: js,mjs,json
node-dev-env | [nodemon] starting `node index.js`
node-dev-env | App listening in port 3000
node-dev-env | [nodemon] restarting due to changes...
node-dev-env | [nodemon] starting `node index.js`
node-dev-env | App listening in port 3000
node-dev-env |
node-dev-env | > [email protected] start
node-dev-env | > nodemon index.js
node-dev-env |
node-dev-env | [nodemon] 2.0.7
node-dev-env | [nodemon] to restart at any time, enter `rs`
node-dev-env | [nodemon] watching path(s): *.*
node-dev-env | [nodemon] watching extensions: js,mjs,json
node-dev-env | [nodemon] starting `node index.js`
node-dev-env | App listening in port 3000
node-dev-env | [nodemon] restarting due to changes...
node-dev-env | [nodemon] starting `node index.js`
node-dev-env | App listening in port 3000
```

And now a page refresh shows that our code change fixed the issue. The development environment works.
Expand All @@ -98,11 +101,12 @@ The next exercise can be extremely easy or extremely hard. Feel free to have fun

## Exercise 2.11


:::info Exercise 2.11

Select some of your own development projects and start utilizing containers in the development environment.

Explain what you have done. It can be anything, e.g., a support for docker-compose.yml to have services (such as databases) containerized or even a fully blown containerized development environment.
Explain what you have done. It can be anything, e.g., support for docker-compose.yml to have services (such as databases) containerized or even a fully blown containerized development environment.

:::

If you are interested in how to build a containerized development environment for a React/Node Single page web app, please have a look at the course [Full stack open](https://fullstackopen.com) which has one [chapter](https://fullstackopen.com/en/part12/basics_of_orchestration#development-in-containers) devoted to the topic.

0 comments on commit 304f071

Please sign in to comment.