htmxを使ってみた-(2)準備-

Last updated at 2024-10-22Posted at 2024-10-22

htmx のダウンロード

htmx は、UNPGKの htmx.org (2024/10/01確認)からダウンロードします。
プルダウンメニューでバージョンを選択できます。
ダウンロードしたファイルには、バージョン番号を付けておくと便利です。
練習プログラムには、ダウンロードしたものを付けています。

プログラムのダウンロード

今回、練習として作ってみたプログラムをGitHubに置きます。

dockerで動きますので、ダウンロードして、実行してみてください。
フロントエンドには htmx 、バックエンドには FastAPIを使います。

注意
ひな形っぽいプログラムですが、セキュリティーやエラーについてほとんど考慮していません。
あくまでも、htmxとFastAPIの使い方の参考にしてください。

ディレクトリの構成について

ダウンロードしたファイルの構成は次のとおりです。

.
├─fastapi/
│ └─app/             #FastAPIを利用したプログラム。ホストとコンテナで共有している
│  　└─prog/         #Pythonのコード
│      ├─static/     #CSS , JavaScriptファイル
│      └─templates/  #Jinja2のテンプレート
├─mariadb
│ └initdb.d          #データベースを初期化するスクリプト
└─phpmyadmin

データについて

架空のデータを用意しても良かったのですが、オープンデータとして公開されているものを利用しました。
公開してくださった方に感謝します。
(高山市のデータの利用に他意はありません)

Dockerを使ってサーバーを立ち上げる

dockerのインストール方法、使い方は、解説してあるホームページや書籍を参考にしてください。
今回使うcompose.yml です。
FastAPI , mariadb , phpmyadmin をひとまとめにしました。

compose.yml

version: '3'

services:
  fastapi:
    build:
      context: "./fastapi"
      dockerfile: "Dockerfile"
    container_name: practice_fastapi
    restart: always
    depends_on:
      - mariadb
    ports:
      - 8001:8000
    volumes:
      - ./fastapi/app:/app
    environment:
      - TZ=Asia/Tokyo
      - ENVIRON
    logging:
      driver: json-file
      options:
        max-file: "1"
        max-size: 10m

  mariadb:
    build:
      context: ./mariadb
      dockerfile: Dockerfile
    container_name: practice_mariadb
    restart: always
    volumes:
    #    ports:
    #      - 13306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=practice
      - MYSQL_USER=practice
      - MYSQL_PASSWORD=practice
      - TZ=Asia/Tokyo
    logging:
      driver: json-file
      options:
        max-file: "1"
        max-size: 10m

  phpmyadmin:
    build:
      context: ./phpmyadmin
      dockerfile: Dockerfile
    container_name: practice_phpmyadmin
    restart: always
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mariadb
      - PMA_USER=root
      - PMA_PASSWORD=root
      - TZ=Asia/Tokyo
    depends_on:
      - mariadb
    ports:
      - 4001:80
    logging:
      driver: json-file
      options:
        max-file: "1"
        max-size: 10m

サーバーに phpmyadmin は不要ですが、あると便利なので一緒に入れておきます。
Dockerはファイル一つで開発・実行環境を作ることができるので大変便利です。
サーバーの起動は、

docker compose build
docker compose up -d

です。
depends_on: mariadb　としているにもかかわらず、FastAPIがmariadbに接続できないことがあります。
health check などを行ってみたのですが、うまくいきませんでした。
この場合は、

docker compose stop
docker compose start

として、再起動すると動きます。

http://localhost:8001/

にアクセスしてください。

のような画面が開きます。
（Qiitaの推奨画像サイズは、横幅800pxですので、データの一部のみの表示となっています）

Swagger UIは、

http://localhost:8001/docs

です。

のような画面が開きます。(横幅800pxは狭いので、ブラウザは広げてみてください)

ReDoc 形式は、

http://localhost:8001/redoc

です。