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

web

DockerをつかってReact+Flask+MariaDBの環境をつくります。

今回は第二回目になります。

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

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

第二回では「4.Flask-MariaDB接続」、「5.React-Flask接続」の手順について紹介します。

前回の内容は以下を参照してください。

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

目次

  1. Flask-MariaDB接続
    1. MariaDBのディレクトリ再作成
    2. MariaDBのDockerfile作成
    3. init.sqlの作成
    4. MariaDBのdocker-compse.yml更新
    5. FlaskのDockerfile更新
    6. Flaskのapp.py更新
    7. Flaskのdocker-compse.yml更新
    8. docker-compse起動
  2. React-Flask接続
    1. axiosインストール
    2. Reactのapp.js更新
    3. Reactのdocker-compse.yml更新
    4. docker-compse起動
  3. まとめ

Flask-MariaDB接続

Flask-MariaDB接続設定を行います。

設定の手順は以下のとおりです。

  • 1.MariaDBのディレクトリ再作成
  • 2.MariaDBのDockerfile作成
  • 3.init.sqlの作成
  • 4.MariaDBのdocker-compse.yml更新
  • 5.FlaskのDockerfile更新
  • 6.Flaskのapp.py更新
  • 7.Flaskのdocker-compse.yml更新
  • 8.docker-compse起動

MariaDBのディレクトリ再作成

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

再作成前にdocker-composeを停止します。

    
docker-compose down

docker-composeを停止したあと、「database」ディレクトリを削除します。

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

「db」の配下に「init」「dabatbase」のディレクトリを作成します。

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

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

MariaDBのDockerfile作成

MariaDBはDockerfileを使用せずに使っていましたが、今回はDockerfileを使用します。

このDockerfileの中ででMariaDBが起動時に初期データを登録できるようにinitファイルをコピーしておきます。

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

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

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

    
FROM mariadb
COPY ./init/init.sql /docker-entrypoint-initdb.d/

後述するinit.sqlに初期データベースの作成、テーブルの作成、データの作成を行うSQLを記載します。

COPYコマンドで /docker-entrypoint-initdb.d/にinit.sqlファイルに配置します。

コンテナ起動時にinit.sqlのファイルがよみこまれてSQLが実行されます。

これにより、Databaseやテーブルが起動時に作成されます。

init.sqlの作成

init.sqlを作成します。

「db/init/」の配下に「init.sql」のファイルを作成します。

    
project/
　┣ api/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ app.py
　┣ db/
　┃　┣ Dockerfile
　┃　┣ init/
　┃　┃　┗ init.sql
　┃　┗ database/
　┣ web/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ react-project/
　┗ docker-compose.yml
    
  
    
CREATE DATABASE IF NOT EXISTS test;

CREATE TABLE IF NOT EXISTS test.user (id int, name varchar(10));

REPLACE INTO test.user  VALUES (1, 'TAROU');

testのデーターベースにuserのテーブルを作成します。また、1件データを登録しておきます。

MariaDBのdocker-compse.yml更新

MariaDBの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:
    container_name: db
    build: ./db
    volumes:
      - ./db/database:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=test
      - MYSQL_DATABASE=test
      - MYSQL_USER=test
      - MYSQL_PASSWORD=test
    ports:
      - "3306:3306"

「container_name: db」を追加しました。

FlaskがDBを参照する際にコンテナ名を使います。明示的にdbと記載します。

「build: ./db」とDockerfileを参照するように変更しています。

ここまでで、MariaDBの設定は完了です。

FlaskのDockerfile更新

FlaskのDockerfileの内容を更新します。

DBと接続するためのライブラリをインストールします。

PyMySQLを使用します。

pip installの記述をします。

    
FROM python:3.10-alpine

RUN pip install flask
RUN pip install flask-cors
RUN pip install PyMySQL

WORKDIR /usr/src
メモ
  • requirements.txtをつかった書き方もありますが、ここでは紹介しません。

Flaskのapp.py更新

Flaskのapp.pyファイルを更新します

    
import os

from flask import Flask, request
from flask_cors import CORS

import pymysql.cursors

app = Flask(__name__)
CORS(app) 

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


@app.route('/mariadb')
def mariadb():
    conn = pymysql.connect(
        host='db',
        port=3306,
        user=os.environ.get('MYSQL_USER'),
        password=os.environ.get('MYSQL_PASSWORD'),
        db=os.environ.get('MYSQL_DATABASE'),
        cursorclass=pymysql.cursors.DictCursor
    )

    with conn.cursor() as cur:
        sql = "SELECT * FROM user"
        cur.execute(sql)
        results = cur.fetchall()

    return results[0]

「/mariadb」のURLを指定した時にSELECT文を発行してデータを取得し、その内容を返却するようにしました。

Flaskのdocker-compse.yml更新

Flaskの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:
    container_name: api
    build: api/
    volumes:
      - ./api/src:/usr/src
    command: flask run --host 0.0.0.0 --port 5000
    ports:
      - "5000:5000"
    environment:
      - MYSQL_ROOT_PASSWORD=test
      - MYSQL_DATABASE=test
      - MYSQL_USER=test
      - MYSQL_PASSWORD=test
    depends_on:
      - db

  db:
    container_name: db
    build: ./db
    volumes:
      - ./db/database:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=test
      - MYSQL_DATABASE=test
      - MYSQL_USER=test
      - MYSQL_PASSWORD=test
    ports:
      - "3306:3306"

「container_name: api」を追加しました。

MaruaDBと同様にコンテナ名を使います。明示的にapiと記載します。

「environment」でDB接続に関する環境変数を追加しています。

docker-compse起動

docker-compose upを使って各コンテナを起動します。

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

    
docker-compose up

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

http://localhost:5000

"Hello World"が表示されます。

次に、FlaskとMariaDBの接続を確認します。

http://localhost:5000/mariadb

「{"id":1,"name":"TAROU"}」が表示されたら成功です。

注意
  • 各コンポーネントの起動には時間がかかります。少し時間をおいてからブラウザのアクセスを確認してください。

ここまでが、FlaskとMariaDBの接続設定になります。

React-Flask接続

React-Flask接続の設定を行います。

設定の手順は以下のとおりです。

  • 1.axiosインストール
  • 2.Reactのapp.js更新
  • 3.Reactのdocker-compse.yml更新
  • 4.docker-compse起動

axiosインストール

axiosをインストール。

インストール前にdocker-composeを停止します。

    
docker-compose down

インストールを行います。cd コマンドでnode.jsで作成したアプリのディレクトリに移動します。そのあとnpmインストールを使ってパッケージをインストールします。

    
docker-compose run --rm web sh -c "cd react-project && npm install axios"

Reactのapp.js更新

Reactのapp.jsの内容を更新します。

更新するファイルは以下のファイルです。

    
project/
　┗ web/
　　　┣ Dockerfile
　　　┗ src/
　　　　　┗ react-project/
　　　　　　　┗ src/
　　　　　　　　┗ app.js

下記のように書き換えます。

    

import {useState, useEffect} from 'react' 
import axios from 'axios'

function App() {

  const [getData, setGetData] = useState([])

  useEffect(() => {
    axios.get('http://localhost:5000/mariadb')
      .then(res => {
        console.log(res.data)
        setGetData(res.data)

      })
  }, [])

  return (
    

    {getData.name}
    

  );
}

export default App;

Reactのdocker-compse.yml更新

Ractのdocker-compse.ymlの内容を更新します。

    
version: '3'

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

  flask:
    container_name: api
    build: api/
    volumes:
      - ./api/src:/usr/src
    command: flask run --host 0.0.0.0 --port 5000
    ports:
      - "5000:5000"
    environment:
      - MYSQL_ROOT_PASSWORD=test
      - MYSQL_DATABASE=test
      - MYSQL_USER=test
      - MYSQL_PASSWORD=test
    depends_on:
      - db

  db:
    container_name: db
    build: ./db
    volumes:
      - ./db/database:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=test
      - MYSQL_DATABASE=test
      - MYSQL_USER=test
      - MYSQL_PASSWORD=test
    ports:
      - "3306:3306"

「container_name: web」を追加します。

docker-compse起動

docker-compose upを使って各コンテナを起動します。

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

    
docker-compose up

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

http://localhost:3000

"TAROU"が表示されます。

メモ
  • ここでも各コンポーネントの起動には時間がかかります。docker-compose restart webなど特定のコンポーネントのみを再起動できる方法もあります。

まとめ

今回は「4.Flask-MariaDB接続」、「5.React-Flask接続」の手順を紹介したことで「Dockerを使ってReact+Flask+MariaDBの環境を構築する」手順の紹介は終わりです。

今後はこの環境を使ってアプリをつくっていきたいと思います。

コメント

0 件のコメント:

コメントを投稿

コメントをお待ちしています。

このブログを検索