carolalvarezm / DSI8

dsi-p8-docker-alu0100944723 created by GitHub Classroom
0 stars 0 forks source link

Práctica 13 - Docker

Instalando Docker

$ sudo apt-get install \ apt-transport-https \ ca-certificates \ curl \ gnupg-agent \ software-properties-common

* Añadimos los repositorios para instalar docker:
```bash
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"

Version del Docker

Creando la aplicación de Node

server.js

const app = require("express")();

app.get("/", (req, res) => { res.send(API VERSION ${VERSION}); });

app.get("/api/", (req, res) => { const data = require('./data.json') res.json(data); });

app.listen(PORT, HOST); console.log(Running NODE on http://localhost:${PORT} (private));

* Lo primero que hacemos es definir unas variables con el puerto, el host y la versión:
```javascript
const PORT = 8081;
const HOST = "0.0.0.0";
const VERSION = "1.0";

app.get("/api/", (req, res) => { const data = require('./data.json') res.json(data); });

* Finalmente ponemos un listener a escuchar las peticiones en el puerto y host que hemos definido arriba:
```javascript
app.listen(PORT, HOST);
console.log(`Running NODE on http://localhost:${PORT} (private)`);

Aplicación node

Dockerizando la aplicación node

Para dockerizar la aplicación node lo primero que hacemos es hacer en nuestra carpeta de backend un Dockerfile, el mio quedaría así:

FROM node:12.12.0-buster-slim
WORKDIR /app
COPY data.json .
COPY package.json .
COPY server.js .
RUN npm install
CMD ["node", "server.js"]

Run.sh

Creando la web frontend

dsi-p8-docker-alu0100944723

En el html lo único que hacemos es linkear el css y el js y un div con clase *container*.
### index.js
* En el index.js lo primero que hacemos un fetch a nuestra aplicación de node para que nos devuelva el data.json con información sobre los personajes y cuando nos haya respondido utilizaremos la función *create_personaje* para cada personaje:
```javascript
const datos = fetch('/api/')
datos.then(function(response) {
    return response.json();
}).then(personajes => personajes.forEach(personaje => {
    create_personaje(personaje)
}));
function create_personaje(personaje) {
    const container = document.querySelector(".container");
    const div = document.createElement("div");
    const character = document.createElement("p");
    const name = document.createElemejavascripteElement("p");

    div.classList.add("elemento");
    div.classList.add("shadow");
    div.classList.add("round");
    div.style.setProperty("--color", `${personaje.color}`);

    character.textContent = personaje.character;

    var click = 0
    div.addEventListener("mouseover", function() {
        name.textContent = personaje.name;
        level.textContent = personaje.level;
        genre.textContent = personaje.genre;
        specie.textContent = personaje.specie;
    });
    div.addEventListener("mouseout", function() {
        name.textContent = '';
        level.textContent = '';
        genre.textContent = '';
        specie.textContent = '';
    });

    div.appendChild(character);
    div.appendChild(name);
    div.appendChild(level);
    div.appendChild(genre);
    div.appendChild(specie);
    container.appendChild(div);
}

index.css

.container { display: grid; grid-template-columns: repeat(8, 200px); grid-template-rows: repeat(2, 450px); grid-gap: 10px 10px; }

.round { border-radius: 5%; }

.shadow { box-shadow: 5px 5px 10px 4px gray; }

.elemento { display: flex; justify-content: center; align-items: center; flex-direction: column; background-image: linear-gradient(180deg, white 15%, var(--color)); text-align: center; }

p { text-transform: capitjavascript Dockerfile multi-stage para construir los archivos de producción con parcel y después copiarlos al contenedor de nginx para desplegarlo:

 FROM node:12.12.0-buster-slim as build
WORKDIR /app
COPY package.json .
RUN npm install -g parcel-bundler
COPY src/ src/
RUN parcel build src/index.html -d dist

FROM nginx:1.17.6
COPY --from=build /app/dist /usr/share/nginx/html
COPY default.conf etc/nginx/conf.d/
CMD ["nginx", "-g", "daemon off;"]

Configurando nginx

 * Lo primero que indicamos es el puerto en el que estará escuchando que en nuestro caso será el 8081 del contenedor.
 * Le ponemos como server_name localhost para que escuche en el local.
 * Después tenemos donde se guardarán los logs.
 * Finalmente definimos que nos devolverá cuando entremos en las siguientes rutas:
    * */* nos llevará a nuestra página principal.
    * */api/* se lo pasará a node que a su vez devolverá el data.json.
    * */api/version* se lo pasará también a nuestro backend que delvolverá la versión.
* Una vez hecho esto ya tenemos nuestro servidor nginx configurado.

## Uniendo backend y frontend con docker-compose
* Lo primero para poder utilizarlo es instalarlo para ello hacemos:
 ```bash
    $ sudo curl -L
    "https://github.com/docker/compose/releases/downlo
    ad/1.25.0/docker-compose-$(uname -s)-$(uname -m)"
    -o /usr/local/bin/docker-compose
    $ sudo chmod +x /usr/local/bin/docker-compose
    $ docker-compose --version

docker-compose version