Docker : NodeJS and MySQL app with React in a docker

bogotobogo.com site search:

Getting started

The app consists of a client using React.js frontend, Node.js is used as a backend server with Express for REST APIs and MySQL db.

The React client sends HTTP Requests and retrieves HTTP Responses using Axios, consume data on the components. React Router is used for navigating to pages. The Node.js Express exports REST APIs and interacts with MySQL Database.

Picture source: Building Data Science Web Application with React, NodeJS, and MySQL

To run our app, we have to do the following:

install node, for mac, brew install node
clone a repo
install packages under server directory, npm install
docker-compose up

Let's start!

Clone repo:

$ git clone https://github.com/Einsteinish/react-nodejs-mysql-docker-compose.git    

$ cd react-nodejs-mysql-docker-compose

Install the dependencies:

$ npm version
{
  'web-samples': '1.0.0',
  npm: '6.14.5',
  ares: '1.16.0',
  brotli: '1.0.7',
  cldr: '37.0',
  icu: '67.1',
  llhttp: '2.0.4',
  modules: '83',
  napi: '6',
  nghttp2: '1.41.0',
  node: '14.5.0',
  openssl: '1.1.1g',
  tz: '2019c',
  unicode: '13.0',
  uv: '1.38.0',
  v8: '8.3.110.9-node.23',
  zlib: '1.2.11'
}

$ cd server 

$ npm install

The npm (node package manager) is a dependency/package manager we get out of the box when we install Node.js. It provides a way for developers to install packages both globally and locally.

Note that npm by itself doesn't run any packages. If we want to run a package using npm, we must specify that package in our package.json file.

When executables are installed via npm packages, npm creates links to them:

local installs have links created at the ./node_modules/.bin/ directory.
global installs have links created from the global bin/ directory, for example: /usr/local/bin on Linux.

Services

We'll be using 4 services: mysql, phpmyadmin, server, and client:

mysql will use the extension fields declared for host, database, user and password (and a root password of its own just in case) to enable connections for the other services. The port 3306 is exposed as the default port.
phpmyadmin is to view the databases and manually edit if needed. It will depend on the mysql service so this service will run before it upon start, and it is linked to it to enable use of the credentials defined (host, database, user, password) when navigating to http://localhost:8080 to access the database. The PMA_HOST defines the address of the mysql server.
server refers to the nodeJS app. It will be built with its own Dockerfile, and it will run before the mysql service. It will expose the port 8000 and use a variable, REACT_APP_SERVER_PORT, to allow the express server to work. MYSQL_HOST_IP allows us to resolve the mysql service's host IP address to map it to the mysql connection.
client refers to the React app. Its build attribute will search for a Dockerfile inside the client folder. The NODE_PATH environment variable allows for the app to recognize its src folder as the start point for aliases to work. It also makes of the extension fields, but only to use REACT_APP_SERVER_PORT. Since the default port in a react app done with CRA is 3000 , this port will be exposed. We provide volumes for the src folder to store codes.

docker-compose

Here is our compose file, docker-compose.yml:

version: "3.4"

x-common-variables: &common-variables
  MYSQL_USER: sampleuser
  MYSQL_PASSWORD: samplepassword
  MYSQL_DATABASE: sampledb
  REACT_APP_SERVER_PORT: 8000

services:
  mysql-db:
    image: mysql:5.7
    container_name: mysql_container
    environment:
      <<: *common-variables
      MYSQL_HOST: localhost
      MYSQL_ROOT_PASSWORD: root
    ports:
      - 3306:3306
    restart: unless-stopped
    volumes:
      - ./db/sample.sql:/docker-entrypoint-initdb.d/sample.sql
  phpmyadmin:
    depends_on:
      - mysql-db
    image: phpmyadmin/phpmyadmin
    container_name: phpadmin_container
    environment:
      PMA_HOST: mysql-db
    links:
      - mysql-db:mysql-db
    ports:
      - 8080:80
    restart: always
  server:
    build: ./server
    container_name: node_server_container
    depends_on:
      - mysql-db
    environment:
      <<: *common-variables
      MYSQL_HOST_IP: mysql-db
    ports:
      - 8000:8000
    volumes:
      - ./server:/app
    links:
      - mysql-db
    command: npm start
  client:
    build: ./client
    container_name: client_container
    environment:
      <<: *common-variables
      NODE_PATH: src
    ports:
      - 3000:3000
    volumes:
      - ./client/src:/app/src
    links:
      - server
    command: npm start

build tells how we want our container built.
It can be specified either as a string containing a path to the build context (in our case)
```
server:
    build: ./server        
```
or, as an object with the path specified under context and optionally Dockerfile and args:
```
server:
    build:
      context: ./server
      dockerfile: Dockerfile
      args:
        buildno: 1  
```

ports vs expose:
port: we can either specify both ports (host:container), or just the container port (in this case, a random host port will be chosen).
The ports in docker-compose.yml will be shared among different services started by the docker-compose. So, in our case, we do not need the expose. We only need to specify the ports.
expose: exposing ports without publishing them to the host machine. They'll only be accessible to linked services. Only the internal port can be specified.

volumes:
volumes are the persistent data connected to each container. We're duplicating parts of our container and its dependencies in a way that when we throw the container away and start a new one it’ll have that cache to avoid the time of reinstalling everything.
The syntax uses the generic [SOURCE:]TARGET[:MODE] format, where SOURCE can be either a host path or volume name.
TARGET is the container path where the volume is mounted.
Standard modes are ro for read-only and rw for read-write (default).

links: we use this to make connections between containers.

environment: the variables can be either an array or a dictionary.

Run docker-compose build:

$ docker-compose build

This will skip both images for mysql and phpmyadmin, and will build the images for client and server.

Now that the images are ready, run docker-compose up -d to start the four images in detached mode:

$ docker-compose up -d   
...
Creating mysql_container ... done
Creating phpadmin_container    ... done
Creating node_server_container ... done
Creating client_container      ... done

To check which containers are running:

$ docker ps
CONTAINER ID        IMAGE                                      COMMAND                  CREATED             STATUS              PORTS                               NAMES
5b2ca502b3a6        react-nodejs-mysql-docker-compose_client   "docker-entrypoint.s…"   33 seconds ago      Up 31 seconds       0.0.0.0:3000->3000/tcp              client_container
2c6002db4499        react-nodejs-mysql-docker-compose_server   "docker-entrypoint.s…"   35 seconds ago      Up 32 seconds       0.0.0.0:8000->8000/tcp              node_server_container
3ae59b164931        phpmyadmin/phpmyadmin                      "/docker-entrypoint.…"   35 seconds ago      Up 32 seconds       0.0.0.0:8080->80/tcp                phpadmin_container
f7b1e7203fde        mysql:5.7                                  "docker-entrypoint.s…"   36 seconds ago      Up 34 seconds       0.0.0.0:3306->3306/tcp, 33060/tcp   mysql_container

Output

On the browser, navigate to http://localhost:3000 for the react app. With the developer console opened, we get the following: