LoginSignup
5
7

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-12-21

背景

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
スクリーンショット 2021-12-21 21.51.07.png

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

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が表示されたらブラウザでも確認して今日は終わり。

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7