Dockerを使ってReact+Flask+MariaDBの環境を構築する（第一回）

12:11

春になると勉強したくなりますね。

プログラミングの勉強をするためにReact+Flask+MariaDBの環境をつくります。

環境構築にはDockerを使用します。

似たような環境構築を検討の方はご覧ください。

環境構築の手順の流れは大きく分けて以下のとおりです。

1.React環境構築
2.Flask環境構築
3.MariaDB環境構築
4.Flask-MariaDB接続
5.React-Flask接続

第一回は「1.React環境構築」、「2.Flask環境構築」、「3.MariaDB環境構築」までの手順について紹介します。

構成について説明

今回作成する環境の構成は以下のとおりです。

React:18.1.0
Flask
MariaDB

Dockerを使って各環境を構築します。

ホストのマシンはWindows 10です。Docker Desktop for WindowsとDocker Composeのインストールの手順については省略します。

React環境構築

最初にReactの環境を構築します。

環境構築の手順は以下のとおりです。

1.ディレクトリ作成
2.Dockerfile作成
3.docker-compse.yml作成
4.Reactアプリ作成
5.React起動

ディレクトリ作成

ディレクトリを作成します。構成は以下のとおりです。

注意

Windowsでは「フォルダー」ですが、ここでは便宜上ディレクトリと表記します。

    
project/
　┣ web/
　┃  ┣ Dockerfile
　┃  ┗ src/
　┃      ┗ react-project/
　┗ docker-compose.yml

「project」は環境構築における最初のディレクトリです。

Windowsの場合は「C:\project」や「D:\work\project」がディレクトリの場所になります。

「project」の配下に「web」のディレクトリを作成します。

「web」の配下に「src」のディレクトリを作成します。

以下のファイル構成になっていれば大丈夫です。

    
project/
　┗ web/
     ┗ src/

メモ

必ずしも「web」である必要はありません。「front」や「app」などの名称でも構いません。ただし、変更する場合は後述するファイルや、ディレクトリのパス名も変更してください。

Dockerfile作成

Dockerfileを作成します。

このDockerfileにnode.jsのイメージファイルの取得内容を記載します。

「web」の配下に「Dockerfile」のファイルを作成します。

    
project/
　┗ web/
　　  ┣ Dockerfile
　　  ┗ src/

Dockerfileの内容は以下のとおりです。

    
FROM node:18-alpine
WORKDIR /usr/src

alpineサーバ、node.jsのバージョンが18のイメージを使います。

Docker内の作業用ディレクトリのパスは「/usr/src」です。

docker-compse.yml作成

docker-compse.ymlを作成します。

「project」の配下に「docker-compse.yml」のファイルを作成します。

    
project/
　┣ web/
　┃  ┣ Dockerfile
　┃  ┗ src/
　┗ docker-compose.yml

    
version: '3'

services:
  web:
    build: ./web
    volumes:
      - ./web/src:/usr/src
    command: sh -c "cd react-project && yarn start"
    ports:
      - "3000:3000"

docker-compse.ymlにはnode.jsのDockerのビルド方法や、volumes、portの設定などを記載します。

Reactアプリ作成

Reactのアプリを作成します。

docker-compose.ymlファイルがある場所で以下のコマンドを実行します。

    
docker-compose run --rm web sh -c "npm install -g create-react-app react-project"

docker-composeが実行されてDocker内にReactのアプリが作成されます。

アプリが作成されるとvolumesを設定しているので、ホスト側にもReactのアプリが作成されます。

このコマンドはReactアプリを作成後rmオプションでDockerコンテナを削除をしています。

成功すると「src/」配下に「react-project/」のディレクトリが作成されます。

    
project/
　┣ web/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ react-project/
　┗ docker-compose.yml

React起動

docker-compose upを使ってReactを起動します。

docker-compose.ymlファイルがある場所で以下のコマンドを実行します。

    
docker-compose up

起動したら以下のURLをブラウザに入力します。

http://localhost:3000

Reactの画面が表示されたら成功です。

Flask環境構築

つぎにFlaskの環境を構築します。

環境構築の手順は以下のとおりです。

1.ディレクトリ作成
2.app.py作成
3.Dockerfile作成
4.docker-compse.yml更新
5.Flask起動

ディレクトリ作成

ディレクトリを作成します。

    
project/
　┣ api/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ app.py
　┣ web/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ react-project/
　┗ docker-compose.yml

「project」の配下に「api」のディレクトリを作成します。

「api」の配下に「src」のディレクトリを作成します。

以下のファイル構成になっていれば大丈夫です。

    
project/
　┣ api/
　┃　┗ src/
　┣ web/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ react-project/
　┗ docker-compose.yml

app.py作成

「Hello World」を返却するFlaskのアプリを作成します。

「api/src」の配下に「app.py」のファイルを作成します。

    
project/
　┣ api/
　┃　┗ src/
　┃　　　┗ app.py
　┣ web/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ react-project/
　┗ docker-compose.yml

app.pyの内容は以下のとおりです。

    
from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app) 

@app.route("/", methods=["GET"])
def test():
    return "Hello World"

Dockerfile作成

Dockerfileを作成します。

「api」の配下に「Dockerfile」のファイルを作成します。

    
project/
　┣ api/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ app.py
　┣ web/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ react-project/
　┗ docker-compose.yml

Dockerfileの内容は以下のとおりです。

    
FROM python:3.10-alpine

RUN pip install flask
RUN pip install flask-cors

WORKDIR /usr/src

alpineサーバ、pythonのバージョンが3.10のイメージを使います。

pipコマンドを使って「flask」と「flask-cors」のライブラリをインストールします。

Docker内の作業用ディレクトリのパスは「/usr/src」です。

docker-compse.yml更新

docker-compse.ymlを更新します。

    
version: '3'

services:
  web:
    build: ./web
    volumes:
      - ./web/src:/usr/src
    command: sh -c "cd react-project && yarn start"
    ports:
      - "3000:3000"

  flask:
    build: api/
    volumes:
      - ./api/src:/usr/src
    command: flask run --host 0.0.0.0 --port 5000
    ports:
      - "5000:5000"

Flask起動

docker-compose upを使ってFlaskを起動します。

docker-compose.ymlファイルがある場所で以下のコマンドを実行します。

    
docker-compose up

起動したら以下のURLをブラウザに入力します。

http://localhost:5000

"Hello World"が表示されたら成功です。

MariaDB環境構築

最後にMariaDBの環境を構築します。

環境構築の手順は以下のとおりです。

1.ディレクトリ作成
2.docker-compse.yml更新
3.MariaDB起動

ディレクトリ作成

ディレクトリを作成します。

    
project/
　┣ api/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ app.py
　┣ database/
　┣ web/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ react-project/
　┗ docker-compose.yml

「project」の配下に「database」のディレクトリを作成します。

データベースのデータを格納するディレクトリです。

docker-compse.yml更新

docker-compse.ymlを更新します。

    
version: '3'

services:
  web:
    build: ./web
    volumes:
      - ./web/src:/usr/src
    command: sh -c "cd react-project && yarn start"
    ports:
      - "3000:3000"

  flask:
    build: api/
    volumes:
      - ./api/src:/usr/src
    command: flask run --host 0.0.0.0 --port 5000
    ports:
      - "5000:5000"

  db:
    image: mariadb
    volumes:
      - ./database:/var/lib/mysql
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=test
      - MYSQL_DATABASE=test
      - MYSQL_USER=test
      - MYSQL_PASSWORD=test

MariaDB起動

docker-compose upを使ってMariaDBを起動します。

docker-compose.ymlファイルがある場所で以下のコマンドを実行します。

    
docker-compose up

起動したらMariaDBのコンテナに入ってデータベースにアクセスします。

MariaDBのコンテナを調べます。

    
docker ps -a

以下のように表示されます。

    
CONTAINER ID   IMAGE                                                                        COMMAND                  CREATED         STATUS                      PORTS                                                   NAMES
fab601b3bd95   01_project_flask                                                             "flask run --host 0.…"   6 minutes ago   Up 6 minutes                0.0.0.0:5000->5000/tcp                                  01_project-flask-1
7f8ba8be3d4f   mariadb                                                                      "docker-entrypoint.s…"   6 minutes ago   Up 6 minutes                0.0.0.0:3306->3306/tcp                                  01_project-db-1

コンテナに接続します。上記コマンドに記載されているコンテナの名前でアクセスしてください。

    
docker exec -it 01_project-db-1 sh

コンテナに接続できたらmysqlにログインします。

    
mysql --user=test --password=test

以下のような表示であればログインは成功です。

    
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 5
Server version: 10.7.3-MariaDB-1:10.7.3+maria~focal mariadb.org binary distribution
Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
MariaDB [(none)]>

ログアウトは「quit」を入力します。そのあと、「exit」でコンテナからログアウトします。