Flask Webアプリ制作講座

【作って学ぼう】Flask Webアプリ開発入門 課題メモアプリ

この講座はプログラミング初心者🔰を対象に、urasshが作成した【作って学ぼう】Flask Webアプリ開発入門 課題メモアプリで使用される教材リポジトリです。

☑ 最新コードの取得

このリポジトリのmainブランチには課題メモアプリの完成版が含まれています。以下のコマンドで最新の完成コードを取得できます:

git clone https://github.com/urassh/docker-flask-app/

---

プロジェクト構成

• バックエンド: Flask (Python)
• データベース: PostgreSQL
• 環境構築: Docker

---

⚠ 前提条件

• この講座を進めるには、事前にDocker Desktopをインストールしておいてください。

---

起動方法

• このプロジェクトではDockerを使用しているので、dockerコマンドを使います。

起動

docker compose up

更新ビルド

docker compose up --build -d

コンテナ削除(作業終了したら...)

docker compose down --rmi all

---

講座ステップ

Step 1: 簡単なAPIを作ってみよう!!

• コードダウンロード: Step 1 コード
• Git操作に慣れている方:

  git fetch origin tx-v1
  git checkout tx-v1

---

Step 2: 画面を作ってみよう!!

• コードダウンロード: Step 2 コード
• Git操作に慣れている方:

  git fetch origin tx-v2
  git checkout tx-v2

---

Step 3: データベースと繋げよう！ [データ取得編]

• コードダウンロード: Step 3 コード
• Git操作に慣れている方:

  git fetch origin tx-v3
  git checkout tx-v3

📌 .envファイルを作成しよう

配置場所:

.
├── .env
├── app/
├── db/
├── .gitignore
├── Dockerfile
├── README.md
└── compose.yml

内容:

# COMMON
API_PORT=3000
DB_PORT=5432

# PostgreSQL Settings
POSTGRES_USER=guest
POSTGRES_PASSWORD=password
POSTGRES_DB=guest
POSTGRES_HOST=db

---

Step 4: データベースと繋げよう！ [データ追加編]

• コードダウンロード: Step 4 コード
• Git操作に慣れている方:

  git fetch origin tx-v4
  git checkout tx-v4

📌 .envファイルを作成しよう

配置場所:

.
├── .env
├── app/
├── db/
├── .gitignore
├── Dockerfile
├── README.md
└── compose.yml

内容:

# COMMON
API_PORT=3000
DB_PORT=5432

# PostgreSQL Settings
POSTGRES_USER=guest
POSTGRES_PASSWORD=password
POSTGRES_DB=guest
POSTGRES_HOST=db

---

Step 5: データベースと繋げよう！ [データ削除編]

• コードダウンロード: Step 5 コード
• Git操作に慣れている方:

  git fetch origin tx-v5
  git checkout tx-v5

📌 .envファイルを作成しよう

配置場所:

.
├── .env
├── app/
├── db/
├── .gitignore
├── Dockerfile
├── README.md
└── compose.yml

内容:

# COMMON
API_PORT=3000
DB_PORT=5432

# PostgreSQL Settings
POSTGRES_USER=guest
POSTGRES_PASSWORD=password
POSTGRES_DB=guest
POSTGRES_HOST=db