Containerizing a Web Application with Vue.js and Java

Containerizing a Web Application with Vue.js and Java

• 1.
  Jadson Santos Containerizing aWeb Application with Vue.js and Java
• 2.
  Container • Seaports beforecontainer were a mess 27/09/2021 Docker 2
• 3.
  Container • After container,load a ship became faster 27/09/2021 Docker 3
• 4.
  Container • How setupthe execution environment • 1o Install directly in SO: Very complex, several different configurations • 2o Use virtual machines like VMWare, Virtual Box: memory and processing consumption is too high • 3o Use a container: it's possible to run an application with all the required settings (environment variables, packages, etc.) with minimal impact 27/09/2021 Docker 4
• 5.
  Container • Containers isolatemicroservice processes and applications into smaller instances that utilize only the virtualized operating system rather than the full virtual machine and the entire complement of abstracted hardware that VM includes • For containers, they operate more as fully isolated sandboxes, with only the minimal kernel of the operating system present for each container. 27/09/2021 Docker 5
• 6.
  Container 27/09/2021 Docker 6
• 7.
  Installation 27/09/2021 Docker 7
• 8.
  Docker • Docker isa set of platform-as-a-service products that use operating system- level virtualization to deliver software in packages called containers. • Docker do not create the container technology, but was the first tool to let is popular and and relatively easy to use. 27/09/2021 Docker 8 Registry Docker Daemon Containers Images Client docker run docker build docker pull
• 9.
  Docker • Client: Clientreceiving and executes the commands of users • Docker Daemon: Who manages the containers • Registry: Where the images are stored 27/09/2021 Docker 9
• 10.
  Installation • Linux • First,install some prerequisite packages that let apt use packages over HTTPS: • sudo apt update sudo apt install apt-transport-https ca-certificates curl software- properties-common • Add the GPG key to the official Docker repository on your system: curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - • Add the Docker repository to the APT sources: sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable" 27/09/2021 Docker 10
• 11.
  Installation • Linux • Thenupdate the database with the Docker packages from the newly added repository: • sudo apt update • Now, install the Docker • sudo apt install docker-ce • Add your username to the docker group: • sudo usermod -aG docker “user” 27/09/2021 Docker 11
• 12.
  Installation • Mac OS •Go to https://hub.docker.com/ • Download Docker Desktop for Mac • Docker is native for Linux, to run on Windows and MacOS we need the Docker Desktop 27/09/2021 Docker 12
• 13.
  Installation • Mac OS •Type docker version 27/09/2021 Docker 13
• 14.
  Docker Introduction • HelloWorld docker container run hello-world 27/09/2021 Docker 14 image name
• 15.
  Docker Introduction • HelloWorld • There is an image “hello-world” locally? 27/09/2021 Docker 15 Registry Docker Daemon Containers Images Client docker run
• 16.
  Docker Introduction • HelloWorld • Download from registry (https://hub.docker.com/) 27/09/2021 Docker 16 Registry Docker Daemon Containers Images Client docker run
• 17.
  Docker Introduction • HelloWorld • Run the container that is an instance of “hello-world” image 27/09/2021 Docker 17 Registry Docker Daemon Containers Images Client docker run
• 18.
  Docker Introduction • Dockerhub • Docker hub is the default docker registry • It has unlimited public repositories 27/09/2021 Docker 18
• 19.
  Docker Introduction • Dockerhub • You can search for images • Give preference to official images 27/09/2021 Docker 19
• 20.
  Docker Introduction • Dockerhub • Each image has several tags • Choose the image that best fits your application requirements 27/09/2021 Docker 20
• 21.
  Docker Introduction • Dockerhub • You can install local registry to your company. 27/09/2021 Docker 21
• 22.
  Docker Introduction • Listthe containers running • docker container ls • List all containers • docker container ls -a 27/09/2021 Docker 22
• 23.
  Docker Introduction • Givea name to the container • docker container run -–name my_hello_container hello-world 27/09/2021 Docker 23
• 24.
  Docker Introduction • Removinga container • docker container rm <ID or NAME> • Restarting the container • docker container restart <ID or NAME> • Stopping the container • docker container stop <ID or NAME> 27/09/2021 Docker 24
• 25.
  Docker Introduction • Accessingthe container • Download the “ubuntu” image, run the container using this image and give me access the /bin/bash application inside de container • docker container run -it ubuntu /bin/bash • Accessing the container when it is running • docker container exec -it ubuntu /bin/bash 27/09/2021 Docker 25 In this case, the application argument stay after image name, in the other cases, image name is always the last argument of command
• 26.
  Docker Port Binding •To have access an application running inside the container, it is necessary to define a port from the port bind. In the format HOST : CONTAINER • docker container run -p 27017:27017 mongo 27/09/2021 Docker 26 Bing the mongo DB 27017 port (mongo db goes up inside de container) to the 27017 HOST port HOST : Mongo DB
• 27.
  Docker Images • Dockerimages act as a template to build a Docker container. • Docker images contains layers that install libraries, tools, dependences, files needed to make your application run. • Docker images layers increase reusability, decrease disk usage, and speed up docker build by allowing each step to be cached. • We need to create an image containing our application to run it on a Docker 27/09/2021 Docker 27 Image Layer 01 Layer 02 Layer 03 Layer 04 Layer N
• 28.
  Docker Images • Theeasiest way to create an image is via the Dockerfile file • Example of Dockerfile of a simple Node application 27/09/2021 Docker 28
• 29.
  Docker Images • Theeasiest way to create an image is via the Dockerfile file • Example of Dockerfile of a simple Node application 27/09/2021 Docker 29
• 30.
  Docker Images • Theeasiest way to create an image is via the Dockerfile file • Starting downloading a node image • Create a working directory (WORKDIR == “mkdir /app” and “cd /app”) • Copies the .package.json and .package-lock.json file • Run “npm install” to download and install node dependencies • Copy the other files of project • When the container goes up, execute the command “node app.js" 27/09/2021 Docker 30
• 31.
  Docker Images • Builda image with your node application • docker build . -t jadsonjs/appnode:v1 27/09/2021 Docker 31 Image name (name space + repository + tag)
• 32.
  Docker Images • Listthe images docker image ls 27/09/2021 Docker 32
• 33.
  Docker Images • Executeyour node application inside the docker docker container run –d –p 8080:8081 -–name my_appnode_container jadsonjs/appnode:v1 docker container ls 27/09/2021 Docker 33 Image name Container name Run in background Bind the 8081 NODE application port to 8080 HOST port
• 34.
  Docker Images • Executeyour node application inside the docker 27/09/2021 Docker 34
• 35.
  Docker Images • Publishimage to docker hub • Publish the image to my account do docker hub as a public image that other people can use. docker login docker push jadsonjs/appnode:v1 27/09/2021 Docker 35
• 36.
  Docker Images • Publishimage to docker hub • Publish the image to my account do docker hub as a public image that other people can use. 27/09/2021 Docker 36
• 37.
  Docker Networks • Ifyou are going to run 2 or more applications in 2 or more separate containers and need them to communicate. Must create a network between these containers docker network create my-app-net docker container run -–name api –d -p 8080:8080 -–network=my-app-net jadsonjs/appnode:v1 docker container run -–name mongodb -d -p 27017:27017 -e USER=user -e PASS=1234 -–network=my-app-net mongo:5.0.3 27/09/2021 Docker 37
• 38.
  Docker Volumes • Usedto save data if you kill and upload the container again. Example: Container of a database. • Link container file system with the host file system • This can be done via directory bind. In the format HOST : CONTAINER, similar with port bind docker container run -–name bancoDeDadosMongo -d -p 27017:27017 -e USER=user -e PASS=1234 -–network=api-net -v “/usr/local/mongodb:/data/db” mongo:5.0.3 27/09/2021 Docker 38 Bind the /data/db mongo db directory with /usr/local/mongodb HOST directory In other words, the data will be save in /usr/local/mongodb HOST directory
• 39.
  Docker Volumes • Creatinga volume docker volume create mongodb_vol docker container run -–name mongodb -d -p 27017:27017 -e USER=user -e PASS=1234 -–network=my-app-net -v “mongodb_vol:/data/db” mongo:5.0.3 27/09/2021 Docker 39 Bind the /data/db mongo db directory with a mongodb_vol create by the container mongodb_vol is a directory in HOST machine created and managed by container
• 40.
  Docker Volumes • Creatinga volume docker volume ls docker volume inspect mongo_db_vol 27/09/2021 Docker 40
• 41.
  Vue JS Applicationon Docker 27/09/2021 Docker 41
• 42.
  Vue JS Applicationon Docker • Let’s create a simple VUE calculator application with de command • vue create calculator-front-end • The application will be a simple calculator that will call a back-end application written in Java. • The front end application will be deployed using nginx server. • The back end application will be deployed in another Docker container. 27/09/2021 Docker 42
• 43.
  Vue JS Applicationon Docker • Let’s create a simple VUE calculator application • We create a nginx.conf file in the project root that configure your “calculator” application • When somebody type “/calculator” on url, the nginx serve should execute the /calculator/index.html of a VUE Single Page Application project • This file will be copy into the container file system. 27/09/2021 Docker 43
• 44.
  Vue JS Applicationon Docker • Let’s create a simple VUE calculator application • For the vue app work inside nginx server, we have to define a context to VUE application when execute on Docker, we make this in the vue.config.js file. 27/09/2021 Docker 44
• 45.
  Vue JS Applicationon Docker • In the dockerfile file, we define some steps to build our image • Build Steps: • Download a “node” image • Create a temp directory “app” and copy package*.json files to it • Install all Vue dependences • Copy the other files and make the build of project • Execution Steps: • Now, download a image of nginx • Copy the vue “dist” directory content to nginx default directory: /usr/share/nginx renaming it. • And copy the nginx.conf file (in the root of the project) to nginx default configuration directory: /etc/nginx/ 27/09/2021 Docker 45
• 46.
  Vue JS Applicationon Docker • Now, we need to build the image • docker build . -t calculator-front-end • After that, we create a network and run the docker container • This same network will be used by the back end container • docker network create calculator-net • docker run -d -p 8080:8080 –network=calculator-net calculator-front-end 27/09/2021 Docker 46
• 47.
  Vue JS Applicationon Docker • When the container goes up, the ningx server will goes up also and make deploy of our application following the nginx.conf files • We can access the application on address: http://localhost:8080/calculator/ 27/09/2021 Docker 47
• 48.
  Java Application onDocker 27/09/2021 Docker 48
• 49.
  Java Application onDocker • We will create a simple Java spring boot back-end application for our calculator • We will use Gradle as a build tool. 27/09/2021 Docker 49
• 50.
  Java Application onDocker • Now we will configure dockerfile file to create a docker image • Build Steps: • Download the gradle image • Create a workdir • Copy all files to this workdir • Run the gradle build • Executions steps: • Download JDK 11 image • Copy and rename the application jar • Expose the back end port • Execute the Java application when container goes up 27/09/2021 Docker 50
• 51.
  Java Application onDocker • We can build the Java back end image with this command • docker build . -t calculator-back-end 27/09/2021 Docker 51
• 52.
  Java Application onDocker • Now we can run the back end Java application with this command • PS.: The front end application should be already running (previous slides) • docker run -d -p 8081:8081 –network=calculator-net calculator-back-end 27/09/2021 Docker 52
• 53.
  Java Application onDocker • If everything was ok, now we have a front end VUE.js application run with nginx server on a Docker calling a back end Java application run on Docker also. 27/09/2021 Docker 53
• 54.
  Source Code • https://github.com/jadsonjs/containers 27/09/2021Docker 54
• 55.
  27/09/2021 Docker 55
• 56.
  Docker Compose • DockerCompose is a tool for defining and running multi-container Docker applications. With Compose, you can use a YAML file to configure and start several docker applications. • So, create a docker-compose.yaml file with the follow content 27/09/2021 Docker 56
• 57.
  Docker Compose • Firstwe define the version and the networks of our containers • We define a new network to the docker compose create it 27/09/2021 Docker 57
• 58.
  Docker Compose • Now,we need to define our services (containers) • The first one is the VUE js front end application. • It uses the calculator-front-end image in port 8080:8080, using the calculator-net2 network and should starts after back-end container 27/09/2021 Docker 58
• 59.
  Docker Compose • Now,we need to define our services (containers) • The second one is the Java back end application. • It uses the calculator-back-end image in port 8081:8081, using the same calculator- net2 network. 27/09/2021 Docker 59
• 60.
  Docker Compose • Now,just execute the follow command: • docker compose up -d • This command will replace the follow two commands and simplify the docker execution • docker run -d -p 8080:8080 –network=calculator-net calculator-front-end • docker run -d -p 8081:8081 –network=calculator-net calculator-back-end • To stop the execution of containers, type: • docker compose down 27/09/2021 Docker 60
• 61.
  References • https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on- ubuntu-20-04 • https://cli.vuejs.org/guide/deployment.html#docker-nginx •https://medium.com/bb-tutorials-and-thoughts/how-to-serve-vue-js-application-with-nginx- and-docker-d8a872a02ea8 • https://www.baeldung.com/dockerizing-spring-boot-application • https://docs.docker.com/language/java/build-images/ 27/09/2021 Docker 63
• 62.
  References • https://medium.com/swlh/spring-boot-with-docker-2467db187fa2 • https://dzone.com/articles/docker-with-spring-boot-how-to •https://docs.docker.com/compose/ 27/09/2021 Docker 64
• 63.
  27/09/2021 Docker 65