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の内容は以下のとおりです。

  1.     
  2. FROM mariadb
  3. COPY ./init/init.sql /docker-entrypoint-initdb.d/
  4.     
  5.

後述する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
    
  
  1.     
  2. CREATE DATABASE IF NOT EXISTS test;
  4. CREATE TABLE IF NOT EXISTS test.user (id int, name varchar(10));
  6. REPLACE INTO test.user  VALUES (1, 'TAROU');
  7.     
  8.

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

MariaDBのdocker-compse.yml更新

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

  1.     
  2. version: '3'
  4. services:
  5.   web:
  6.     build: ./web
  7.     volumes:
  8.       - ./web/src:/usr/src
  9.     command: sh -c "cd react-project && yarn start"
  10.     ports:
  11.       - "3000:3000"
  13.   flask:
  14.     build: api/
  15.     volumes:
  16.       - ./api/src:/usr/src
  17.     command: flask run --host 0.0.0.0 --port 5000
  18.     ports:
  19.       - "5000:5000"
  21.   db:
  22.     container_name: db
  23.     build: ./db
  24.     volumes:
  25.       - ./db/database:/var/lib/mysql
  26.     environment:
  27.       - MYSQL_ROOT_PASSWORD=test
  28.       - MYSQL_DATABASE=test
  29.       - MYSQL_USER=test
  30.       - MYSQL_PASSWORD=test
  31.     ports:
  32.       - "3306:3306"
  33.     
  34.

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

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

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

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

FlaskのDockerfile更新

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

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

PyMySQLを使用します。

pip installの記述をします。

  1.     
  2. FROM python:3.10-alpine
  4. RUN pip install flask
  5. RUN pip install flask-cors
  6. RUN pip install PyMySQL
  8. WORKDIR /usr/src
  10.     
  11.
メモ
  • 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ファイルがある場所で以下のコマンドを実行します。

  1.     
  2. docker-compose up
  3.     
  4.

起動したら以下の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

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

  1.     
  3. import {useState, useEffect} from 'react' 
  4. import axios from 'axios'
  6. function App() {
  8.   const [getData, setGetData] = useState([])
  10.   useEffect(() => {
  11.     axios.get('http://localhost:5000/mariadb')
  12.       .then(res => {
  13.         console.log(res.data)
  14.         setGetData(res.data)
  16.       })
  17.   }, [])
  19.   return (
  20.     
  21.     {getData.name}
  22.     
  23.   );
  24. }
  26. export default App;
  27.     
  28.

Reactのdocker-compse.yml更新

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

  1.     
  2. version: '3'
  4. services:
  5.   web:
  6.     container_name: web
  7.     build: ./web
  8.     volumes:
  9.       - ./web/src:/usr/src
  10.     command: sh -c "cd react-project && yarn start"
  11.     ports:
  12.       - "3000:3000"
  14.   flask:
  15.     container_name: api
  16.     build: api/
  17.     volumes:
  18.       - ./api/src:/usr/src
  19.     command: flask run --host 0.0.0.0 --port 5000
  20.     ports:
  21.       - "5000:5000"
  22.     environment:
  23.       - MYSQL_ROOT_PASSWORD=test
  24.       - MYSQL_DATABASE=test
  25.       - MYSQL_USER=test
  26.       - MYSQL_PASSWORD=test
  27.     depends_on:
  28.       - db
  30.   db:
  31.     container_name: db
  32.     build: ./db
  33.     volumes:
  34.       - ./db/database:/var/lib/mysql
  35.     environment:
  36.       - MYSQL_ROOT_PASSWORD=test
  37.       - MYSQL_DATABASE=test
  38.       - MYSQL_USER=test
  39.       - MYSQL_PASSWORD=test
  40.     ports:
  41.       - "3306:3306"
  42.     
  43.

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

docker-compse起動

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

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

  1.     
  2. docker-compose up
  3.     
  4.

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

http://localhost:3000

"TAROU"が表示されます。

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

まとめ

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

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

コメント

0 件のコメント:

コメントを投稿

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

ブログ アーカイブ

このブログを検索