katsudon_qiita
@katsudon_qiita

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Docker composeでReactとFastAPI,MySQLの環境を作りたい

解決したいこと

Docker composeでReactとFastAPI,MySQLの環境を作る.
ReactはアクセスできたがFastAPIとMySQLは「このページは動作していません」と表示される

該当するソースコード

app
     -frontend
          -Dockerfile
          ...(React関連のファイル)
     -backend
          -Dockerfile
          -main.py
          -requrirements.txt
     -mysql
          -conf.d
                -my.cnf
     .env
     compose.yml

frontend/Dockerfile

FROM node:20-alpine

WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY . /app

CMD ["npm", "start"]

backend/Dockerfile

FROM python:3.9
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
compose.yml
services:
  backend:
    build: backend
    restart: always
    ports:
      - 8080:8080
    networks:
      - db_net
    depends_on:
      - db

  frontend:
    build: frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend/src:/app/src
      - ./frontend/public:/app/public
    depends_on:
      - backend

  db:
    image: mysql:8.0.27
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_DATABASE: ${DB_NAME}
      MYSQL_USER: ${DB_USER}
      MYSQL_PASSWORD: ${DB_PASSWORD}
    ports:
      - "3306:3306"
    volumes:
      - db-data:/var/lib/mysql
      - ./mysql/conf.d:/etc/mysql/conf.d
    networks:
      - db_net

volumes:
  db-data:

networks:
  db_net:

自分で試したこと

docker compose up -d でコンテナを立ち上げReactは表示できたがFastAPIとMySQLは「このページは表示できません」と表示される.
Dockerがまだ理解できていないのでどのファイルが間違っているのかわかりません.

0

1Answer

FastAPIの経験はないので、MySQLについて回答します。
MySQLはそもそもブラウザからアクセスするものではありませんので、http://localhost:3306のようにアクセスしてもページは表示されません。

MySQLコンテナの状態は、例えば次のように確認します。

  • docker compose ps等でコンテナが起動状態であることを確認する
  • docker compose exec db bashでコンテナに入り、mysqlコマンドでログインを試してみる
  • MySQL Workbenchなどのクライアントツールから接続を試してみる
  • プログラムからデータベースライブラリなどを使って接続を試してみる
0Like

Comments

  1. @katsudon_qiita

    Questioner

    portの設定が間違っていただけでした.8080を8000に変えたらできました!

Your answer might help someone💌