Dockerizing Javascript web app

#docker  

#javascript  

#node  

Tue Sep 05 2017

After the implementation of my web app for Raspberry Sense Hat with ReactJs, I decided to dockerize it so maybe later I run it on AWS ECS (Amazon EC2 Container Service).

First I want to use DockerHub to push my image and later I can pull from it wherever I want to (Apparently it is GitHub for docker images). Therefore, I created an account on Docker Hub and I created a repository named “sensehat-react”. Later when I create my docker image I’ll push it to this repository. Let’s see what I have: I have a Node web app that uses webpack as a loader and “npm to install my needed modules and I run it. This is my exact package.json:

{
  "name": "sensehat-react",
  "version": "1.0.0",
  "description": "Dashboard for SenseHat",
  "main": "index.js",
  "scripts": {
    "production": "webpack -p",
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/farminf/sensehat-react.git"
  },
  "keywords": ["SenseHat", "reactjs", "bootstrap", "dashboard"],
  "author": "IoTGuy <iotdemos16@gmail.com> (https://iotdemos.wordpress.com)",
  "license": "Apache-2.0",
  "bugs": {
    "url": "https://github.com/farminf/sensehat-react/issues"
  },
  "homepage": "https://github.com/farminf/sensehat-react#readme",
  "dependencies": {
    "axios": "^0.15.3",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-bootstrap-switch": "^15.5.0",
    "react-d3-basic": "^1.6.11",
    "react-d3-core": "^1.3.9",
    "react-dom": "^15.4.2",
    "react-fontawesome": "^1.5.0",
    "react-icons": "^2.2.3",
    "react-router": "^3.0.2",
    "react-rt-chart": "^1.3.0"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.28.0",
    "image-webpack-loader": "^3.3.0",
    "install": "^0.8.7",
    "npm": "^4.3.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

I need to build my Dockerfile based on my settings:

  • My node project folder doesn’t have node_module folder(because it is clean: just cloned from GitHub)
  • I need to do “npm install” to download my libraries in node_module folder
  • Then for Running I need to run “npm start”
  • Unfortunately, I am behind the proxy so I should think about that too (Damn proxy which makes everything complicated)

I have written my Dockerfile and put it in the root folder:

FROM node:6.10

RUN mkdir /sensehat-react-app
COPY . /sensehat-react-app
WORKDIR /sensehat-react-app

RUN npm config set proxy http://proxy-ip:proxy-port
RUN npm config set https-proxy http://proxy-ip:proxy-port
#If there is some dependency that uses not npm proxy but system one
#you need to export the proxy here too

RUN npm install

EXPOSE 8080

CMD [ "npm", "start" ]

Great, I have everythings ready to build my docker image and run it locally so I can be sure that it is working. After installation of Docker (Ubuntu installation) I go to terminal and my root folder. I build my docker image:

sudo docker build -t $docker_hub_username/$repository_name:$tag .

then I run it in the way that I can browse it on http://localhost:69160

sudo docker run -d -p 49160:8080 $docker_hub_username/$repository_name:$tag

I test it and I browse to ‘http://localhost:69160‘ and surprisingly I get “Connection reset error” 😦

Then I remember that in my package.json file, in the start script I haven’t indicated that Webpack web-server should be accessible from the network. I change the start script to:

webpack-dev-server --port 8080 --host 0.0.0.0

and save it… but the thing is I update my local code and not my Docker container so I have 2 ways to do that, I can copy just this file to my docker using ‘docker cp’ command or I can stop the current image, remove it and re-do the build part. I choose second one:

docker ps
#to see my dockers running
docker stop $Container ID
docker images
#See images id
Docker rmi -f $Image ID

and re-do the build and run with new tag. Perfect now I can browse to my web app. I am happy 🙂

ok let’s put the docker on the Docker Hub using the properties of my Docker hub account then:

docker tag $image_id $userID/$RepositoryName:$tag
sudo docker push $userID/$RepositoryName:$tag

The first time I got the error: ‘denied: requested access to the resource is denied’ but then I did

docker login
#It asks you for username and password of Docker Hub

And again push, and It uploads it on my Docker Hub 🙂

Perfect, so I have my web app image there and wherever it has docker running I can run my app, I just need to pull it and run it, no need to set up anything or install anything. At some point, I'm gonna try to run it on my AWS ECS service…

© Copyright 2022 Farmin Farzin