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

web

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

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

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

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

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

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

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

目次

  1. 構成について説明
  2. React環境構築
    1. ディレクトリ作成
    2. Dockerfile作成
    3. docker-compse.yml作成
    4. Reactアプリ作成
    5. React起動
  3. Flask環境構築
    1. ディレクトリ作成
    2. app.py作成
    3. Dockerfile作成
    4. docker-compse.yml更新
    5. Flask起動
  4. MariaDB環境構築
    1. ディレクトリ作成
    2. docker-compse.yml更新
    3. MariaDB起動
  5. まとめ

構成について説明

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

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

  1.     
  2. FROM node:18-alpine
  3. WORKDIR /usr/src
  4.     
  5.

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

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

docker-compse.yml作成

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

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

    
project/
　┣ web/
　┃  ┣ Dockerfile
　┃  ┗ src/
　┗ docker-compose.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"
  12.     
  13.

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

Reactアプリ作成

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

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

  1.     
  2. docker-compose run --rm web sh -c "npm install -g create-react-app react-project"
  3.     
  4.

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ファイルがある場所で以下のコマンドを実行します。

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

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

  1.     
  2. from flask import Flask, request
  3. from flask_cors import CORS
  5. app = Flask(__name__)
  6. CORS(app) 
  8. @app.route("/", methods=["GET"])
  9. def test():
  10.     return "Hello World"
  11.     
  12.

Dockerfile作成

Dockerfileを作成します。

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

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

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

  1.     
  2. FROM python:3.10-alpine
  4. RUN pip install flask
  5. RUN pip install flask-cors
  7. WORKDIR /usr/src
  8.     
  9.

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

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

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

docker-compse.yml更新

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"
  20.     
  21.

Flask起動

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

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

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

起動したら以下の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を更新します。

  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.     image: mariadb
  23.     volumes:
  24.       - ./database:/var/lib/mysql
  25.     ports:
  26.       - 3306:3306
  27.     environment:
  28.       - MYSQL_ROOT_PASSWORD=test
  29.       - MYSQL_DATABASE=test
  30.       - MYSQL_USER=test
  31.       - MYSQL_PASSWORD=test
  32.     
  33.

MariaDB起動

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

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

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

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

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

  1.     
  2. docker ps -a
  3.     
  4.

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

  1.     
  2. CONTAINER ID   IMAGE                                                                        COMMAND                  CREATED         STATUS                      PORTS                                                   NAMES
  3. 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
  4. 7f8ba8be3d4f   mariadb                                                                      "docker-entrypoint.s…"   6 minutes ago   Up 6 minutes                0.0.0.0:3306->3306/tcp                                  01_project-db-1
  5.     
  6.

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

  1.     
  2. docker exec -it 01_project-db-1 sh
  3.     
  4.

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

  1.     
  2. mysql --user=test --password=test
  3.     
  4.

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

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

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

まとめ

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

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

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

コメント

0 件のコメント:

コメントを投稿

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

ブログ アーカイブ

このブログを検索