FlaskとDockerを使用して画像を並べたポートフォリオサイトを作った時の備忘録です。
このサイトのキモ
フォルダ内の画像自動読み込み
imagesフォルダに入れた画像をPythonですべて読み込みそれをギャラリー形式で並べています。
モーダル表示機能
ギャラリーの画像をクリックすると、拡大画像がモーダルウィンドウとして表示されます。
プロジェクトの構成
project-root/
├── Dockerfile # Dockerイメージの設定ファイル
├── docker-compose.yml # Docker Composeによるサービス一括管理ファイル
├── requirements.txt # FlaskなどPython依存パッケージを指定
├── app.py # Flaskアプリケーションのメインコード
├── static/ # CSSや画像などの静的ファイルを格納
│ ├── style.css # アプリの基本スタイルを定義
│ └── images/ # ギャラリーに表示する画像を格納するフォルダ
└── templates/ # HTMLテンプレートを格納
└── index.html # アプリのメインHTMLファイル
各ファイル・フォルダの役割
- Dockerfile: Dockerでアプリケーション環境を構築するための設定ファイル。Flaskアプリケーションのセットアップ手順が書かれています
- docker-compose.yml: 複数のコンテナを管理するための設定ファイル。複数のサービス（例: データベースやWebアプリ）を一括管理するのに便利です
- requirements.txt: Flaskや他のPythonパッケージの依存関係を定義しています
- app.py: Flaskアプリのメインファイルで、ルーティングやアプリの機能が実装されています
-
static/: CSSや画像などの静的リソースを保存するフォルダです
- style.css: アプリのデザインやレイアウトを定義するCSSファイル
- images/: ポートフォリオサイトのギャラリーに表示する画像ファイルを格納
-
templates/: HTMLファイルを格納するためのフォルダ
- index.html: ポートフォリオサイトのメインページとして表示されるHTMLテンプレート
基本的なDockerコマンドと使い方
イメージのビルド
docker build -t my-portfolio-app .
このコマンドで、現在のディレクトリにあるDockerfileからイメージを作成し、「my-portfolio-app」という名前を付けます。
コンテナの起動
docker run -p 5000:5000 my-portfolio-app
このコマンドでコンテナを実行し、ローカルホストのポート5000でFlaskアプリケーションにアクセスできるようになります。
自動化に向けた設定とツールの活用
Docker Composeで環境を一括管理
Docker Composeを使うと、複数のサービス（Flaskアプリ、データベースなど）を一括で管理できます。
version: '3'
services:
web:
build: .
ports:
- "5000:5000"
volumes:
- ./templates:/app/templates
- ./static:/app/static
environment:
FLASK_ENV: development
これにより、コードの変更がリアルタイムで反映されます。起動は以下のコマンドで行います。
docker-compose up --build
Flaskのホットリロード機能を有効にする
Flaskアプリをデバッグモードで実行することで、変更が自動的に反映されます。
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')
Dockerfileのキャッシュ管理で再ビルドを高速化
再ビルド時にキャッシュを活用し、効率的に構築します。
FROM python:3.9
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["flask", "run", "--host=0.0.0.0"]