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

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

## プログラムのダウンロード
今回、練習として作ってみたプログラムをGitHubに置きます。

https://github.com/endou2022/htmx_practice

dockerで動きますので、ダウンロードして、実行してみてください。
フロントエンドには [htmx](https://htmx.org/) 、バックエンドには [FastAPI](https://fastapi.tiangolo.com/ja/)を使います。

:::note warn
注意
ひな形っぽいプログラムですが、セキュリティーやエラーについてほとんど考慮していません。
あくまでも、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/
```
にアクセスしてください。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885787/68123cbd-7c9a-b834-f235-46bf8a432928.png)
のような画面が開きます。
（Qiitaの推奨画像サイズは、横幅800pxですので、データの一部のみの表示となっています）

Swagger UIは、
```
http://localhost:8001/docs
```
です。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885787/4484f7d0-2993-62ae-718f-e0f8cd70cc11.png)
のような画面が開きます。(横幅800pxは狭いので、ブラウザは広げてみてください)

ReDoc 形式は、
```
http://localhost:8001/redoc
```
です。

## 関連記事一覧
[htmxを使ってみた-(1)htmxの基本-](https://qiita.com/Final1900/items/49a8ac6f27a2427f6306)
[htmxを使ってみた-(2)準備-](https://qiita.com/Final1900/items/9e46fd6630e4bdf90a73)
[htmxを使ってみた-(3)ルート関数-](https://qiita.com/Final1900/items/293a0c8b42465bbb5142)
[htmxを使ってみた-(4)htmxを使う-](https://qiita.com/Final1900/items/f745c4cc34c8d36548f7)
[htmxを使ってみた-(5)HTMLのdialog-](https://qiita.com/Final1900/items/8584ead01e9c842cc60f)
[htmxを使ってみた-(6)データの表示-](https://qiita.com/Final1900/items/33df506cbeb5979c3cfc)
[htmxを使ってみた-(7)データ追加-](https://qiita.com/Final1900/items/a8206948e6d9ac98f105)
[htmxを使ってみた-(8)要素の変更-](https://qiita.com/Final1900/items/aefc518dacbfaf5d9a2a)
[htmxを使ってみた-(9)ページの再読み込み-](https://qiita.com/Final1900/items/783284ff1ad1d02810d5)
[htmxを使ってみた-(10)データの変更-](https://qiita.com/Final1900/items/9541c05d392b137266f3)
[htmxを使ってみた-(11)データベースの排他制御-](https://qiita.com/Final1900/items/db2a48748cd45262ac8b)
[htmxを使ってみた-(12)確認ダイアローグ-](https://qiita.com/Final1900/items/08e1fb3608d3cf0cbc8c)
[htmxを使ってみた-(13)データ削除-(最終)](https://qiita.com/Final1900/items/5389a4890e0d08549810)