FastAPI+React+DockerでQiitaみたいなサイトを作ってみたい -1日目-

#背景
FastAPIを昨日触ってみた感触が良さそうだったので、勉強中のReactも含めてサイトを一つ作ってみる

注意:勉強中の身のため、ちゃんちゃらおかしいことを書き始めるかもしれませんがご容赦

#初期構成

なんとなくDockerは触ったことがあるので、今日はBackendの基盤を作るところまで

初期ファイル構成は以下

├backend
│　└　Dockerfile
└ docker-compose.yaml

./backend/Dockerfile

FROM --platform=arm64 python:3.9-buster

WORKDIR /src

docker-compose.yaml

version:'3'
services:
 backend:
  build:./backend
  volumes:
   - ./backend:/src
  ports:
   - 8000:8000
  tty: true # docker-compose up した後Exitしないように一旦

これだけ

初期設定

とりあえずこの状態でビルド

terminal

docker-compose up #buildしろって怒られるけど知らん

んで中に入る

terminal

docker-compose exec backend bash

中に入ったらpoetryのインストールとinit

bash

pip install poetry
poetry init

いろいろ聞かれるけど全部yes

んでfastapiとuvicornをインストール

bash

poetry config virtualenvs.in-project true
poetry add fastapi
poetry add uvicorn[standard]  

※uvicornの[standard]つけなくて、起動できず1時間死んだ

そうするとpyproject.tomlとpoetry.lockが./backend下に生成される。
一旦この状態でfastapiを動かしてみるために簡単なHelloWoldを

./backend/api/v1/main.py

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
 return {"Hello","World"}

んで起動

bash

poetry run uvicorn api.v1.main:app --host 0.0.0.0 --reload

ブラウザでlocalhost:3000にアクセスしてHelloWorldが表示されてたらOK

そしたら環境から抜けてお掃除。

terminal

docker-compose down
docker image ls
docker image rm [imageId]
#一応イメージも削除しておく

んで、今まで実行してきたコマンドを元にDockerfileを書き直す

./backend/Dockerfile

FROM --platform=arm64 python:3.9-buster

WORKDIR /src

RUN pip install poetry 
COPY pyproject.toml* ./ 
COPY poetry.lock* ./
RUN poetry config virtualenvs.in-project true
RUN poetry install

ENTRYPOINT ["poetry","run","uvicorn","api.v1.main:app","--host","0.0.0.0","--reload"]

んで再構築

terminal

docker-compose up

何事もなくApplication startup completeが表示されたらブラウザでも確認して今日は終わり。