はじめに
普段は主にクラウドサービスを使っているのですが、「ローカル環境のマシンをインターネットに公開する場合どうするんだろう」と思ったので勉強を兼ねてやってみました。
長くなったので
- インターネット公開編
- アプリ編
の2つに分けて書きました。これはアプリ編です。
インターネット公開編はこちらです。
アプリ紹介
ボタンを押すと曲（のキック）がランダムに1秒流れるアプリです。
全体構成
全体の構成は上記のような形です。
今記事では主に黄色枠部分について記載します。
環境
- サーバー : Raspberry Pi 5 8GB
- OS : Debian 12
- ルーター : TP-Link Archer AX55
- フロント&バックエンドライブラリ : Reflex
- DB : MariaDB
- CRUD API : Flask
- Webサーバーアプリ : Apache2
- クラウドストレージ : Amazon S3
- SSL証明書 : Let's Encrypt
- DNS : Lightsail DNS
アプリの作成
フロント&バックエンド部
Reflexというライブラリを使います
PythonだけでWebアプリケーションのいフロントエンドとバックエンドを実装できるライブラリです。
「ボタンを押したらランダムに曲が流れる」というのがコンセプトだったので、そんな感じで作りました（雑
Reflexではrx.Stateサブクラスを使ってクラスを定義することで、何かしらのアクションからクラス内の変数の値を変えることができます。
私のアプリでは
- ボタンを押す
- get_contentsメソッドが実行
- Flask APIを介してDBにアクセス。メタデータを取得
- メタデータをもとに音楽はS3からデータの署名付きURLを発行
a. ReflexのAudioがURLでの対応な為 - 画像はS3からデータをダウンロードして描画
- アプリに反映
a. ジャケット
b. 楽曲
c. タイトル
d. 楽曲リンク(下部のシェアボタンに影響)
という形でStateを使っています。
class State(rx.State):
image = ""
audio = ""
title = ""
twitter_url = ""
push_text = ""
track_link = ""
processing = False
def get_contents_metadata(self):
url = f'{host_address}:5000/api/get-content'
# ヘッダーの設定
headers = {
'Accept': 'application/json'
}
# GETリクエストを送信
response = requests.get(url, headers=headers)
# レスポンスのステータスコードと内容を確認
if response.status_code == 200:
return response.json()
else:
response.raise_for_status()
def generate_presigned_url(self, uri):
s3 = boto3.client('s3', aws_access_key_id=aws_access_key, aws_secret_access_key=aws_secret_key, region_name='ap-northeast-1')
s3_parts = uri.replace("s3://", "").split("/",1)
bucket_name = s3_parts[0]
object_key = s3_parts[1]
response = s3.generate_presigned_url(
'get_object',
Params={'Bucket': bucket_name, 'Key': object_key},
ExpiresIn=600
)
return response
def get_data(self, uri):
s3 = boto3.client('s3', aws_access_key_id=aws_access_key, aws_secret_access_key=aws_secret_key, region_name='ap-northeast-1')
s3_parts = uri.replace("s3://", "").split("/",1)
bucket_name = s3_parts[0]
object_key = s3_parts[1]
response = s3.get_object(Bucket=bucket_name, Key=object_key)
return response
def get_contents(self):
self.processing = True
yield
contents_metadata = self.get_contents_metadata()
title = contents_metadata['title']
image_uri = contents_metadata['image_uri']
audio_uri = contents_metadata['audio_uri']
link = contents_metadata['link']
image_data = self.get_data(image_uri)['Body'].read()
self.image = Image.open(io.BytesIO(image_data))
self.audio = self.generate_presigned_url(audio_uri)
self.title = title
self.processing = False
self.track_link = link
self.twitter_url = (
f"https://twitter.com/intent/tweet?"
f"text=今日のキックはコレ🔊%0A"
f"{urllib.parse.quote(self.title)}%0D%0A%0D%0A"
f"&url={urllib.parse.quote(link)}%0A"
f"&hashtags=kick_preview"
)
texts = [
"Keep it up!",
"Push it!",
"Keep pressing!",
"Just one more!",
"You’re on fire!",
"Don’t stop now!",
"Keep going!"
]
self.push_text = random.choice(texts)
@rx.page(
title="Kick Preview",
description="One tap, one second of music.",
image="https://home.quark-hardcore.com/images/kp1.png",
meta=meta,
)
def index() -> rx.Component:
# Welcome Page (Index)
return rx.container(
rx.html("""
<head>
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon">
</head>
<div style="
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/images/BACKGROUND_LOGO.jpg');
background-repeat: repeat; /* 繰り返し表示 */
background-position: center; /* 中央寄せ */
background-size: contain; /* 画像全体を維持 */
opacity: 0.2;
z-index: -1;">
</div>
"""),
rx.vstack(
rx.image(
src="images/kp1.png",
style={
"mix-blend-mode": "difference",
"max-height": "100%"
}
),
rx.box(style={"height": "4vh",}),
rx.skeleton(
rx.cond(
State.image,
rx.flex(
rx.text(
State.push_text,
color_scheme="yellow"
),
rx.button(
rx.image(
src=State.image,
),
type="submit",
on_click=State.get_contents,
color_scheme="yellow",
style={
"background-color": "transparent",
"justify-content": "center",
"align-items": "center",
"width": "90vw",
"max-width": "500px",
"height": "calc(90vw * 0.98)",
"max-height": "500px",
"margin": "0 auto",
"transition": "all 0.1s ease",
},
_active={
"transform": "scale(0.95)",
"position": "relative",
"top": "2px",
}
),
style={
"flexDirection": "column",
"justify-content": "center",
"align-items": "center",
"width": "90vw",
"max-width": "500px",
"height": "calc(90vw * 0.98)",
"max-height": "500px",
"margin": "0 auto",
}
),
rx.flex(
rx.button(
rx.image(
src="images/yellow_button.png"
),
type="submit",
on_click=State.get_contents,
color_scheme="yellow",
style={
"background-color": "transparent",
"justify-content": "center",
"align-items": "center",
"width": "90vw",
"max-width": "500px",
"height": "calc(90vw * 0.98)",
"max-height": "500px",
"margin": "0 auto",
"transition": "all 0.1s ease",
},
_active={
"transform": "scale(0.95)",
"position": "relative",
"top": "2px",
}
),
style={
"flexDirection": "column",
"justify-content": "center",
"align-items": "center",
"width": "90vw",
"max-width": "500px",
"height": "calc(90vw * 0.98)",
"max-height": "500px",
"margin": "0 auto",
}
),
),
loading=State.processing
),
rx.flex(
rx.vstack(
rx.heading(
State.title,
size="7",
align="center",
style={
"max-width": "100%",
"text-align":"center",
"margin": "0 auto"
}
),
rx.audio(
url=State.audio,
playing=True,
loop=False,
controls=False,
width="100px",
style={
"display": "none"
}
)
),
style={
"display": "flex",
"flex-direction": "column",
"justify-content": "center",
"align-items": "center",
"width": "100%",
"text-align": "center"
}
)
),
rx.flex(
rx.box(style={"height": "4vh",}),
rx.cond(
State.image,
rx.hstack(
rx.link(
rx.button(
rx.icon("twitter", size=80),
style={
"width":"50px",
"height":"50px"
}
),
href=State.twitter_url,
is_external=True,
),
rx.link(
rx.button(
rx.icon("music", size=80),
color_scheme="gray",
style={
"width":"50px",
"height":"50px"
}
),
href=State.track_link,
is_external=True
),
),
rx.text()
),
style={
"display": "flex",
"flex-direction": "column",
"justify-content": "center",
"align-items": "center",
"width": "100%",
"text-align": "center"
}
),
rx.logo(),
style={
"overflow-x": "hidden" # これ入れるとiphoneで見たときに右に変な余白無くなる
},
width="100%"
)
app = rx.App()
app.add_page(index)
フロント側はChatGPTに頼りながらPCとスマホで違和感が無いように作りました。めちゃくちゃツギハギだと思います。
プロキシ設定
Reflexを使うにあたり、Apache2に以下の設定が必要でした
※一部抜粋
/etc/apache2/sites-available/000-default-le-ssl.conf
# WebSocketの設定
ProxyPass /_event ws://localhost:8000/_event
ProxyPassReverse /_event ws://localhost:8000/_event
ProxyPass /_next/webpack-hmr ws://localhost:3000/_next/webpack-hmr
ProxyPassReverse /_next/webpack-hmr ws://localhost:3000/_next/webpack-hmr
# Reflex静的ファイルのプロキシ設定
ProxyPass /_next/static/ http://localhost:3000/_next/static/
ProxyPassReverse /_next/static/ http://localhost:3000/_next/static/
# Reflexアプリ (ポート3000) にプロキシ
ProxyPass /kick-preview/ http://localhost:3000/
ProxyPassReverse /kick-preview/ http://localhost:3000/
WebSocket通信の為の設定で、2つのディレクトリにProxyPass,ProxyPassReverseを設定しました。
追加、静的ファイルのプロキシ設定と、URL指定のパスからアクセスさせるためのプロキシです。
このあたりはLocalhostでアプリを開き、開発モードでリクエストを確認しながら設定しました。
DB
アプリはデータを取得する際、DBにAPIを介してアクセスしています。
DBはMariaDBを使いました。MySQLを使いたかったですが、arm版がコンテナイメージでの提供しかなかったからです。
Raspberry Pi自体がコンテナ的な心持ちで使えるので、コンテナサービスをその上に入れたくないというのが根本理由です。
インストールします。
$ sudo apt install mariadb-server
$ sudo mariadb
Welcome to the MariaDB monitor. Commands end with ; or \g.
Your MariaDB connection id is 37
Server version: 10.11.6-MariaDB-0+deb12u1 Debian 12
Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
起動確認します。起動していない場合はsudo systemctl start mariadbします。
$ sudo systemctl status mariadb
● mariadb.service - MariaDB 10.11.6 database server
テーブル作成
こんな感じのテーブルを1つ作ります
| column name | type | 説明 |
|---|---|---|
| id | bigint | PK |
| created_at | timestamp | |
| updated_at | timestamp | |
| title | string | 曲のタイトルを記載します |
| audio_content_uri | string | 曲を保存しているAWS S3 uriを記載します |
| image_content_uri | string | 曲のジャケットを保存しているAWS S3 uriを記載します |
| link | string | 曲のURLを記載します |
tracks_create_table.sql
CREATE TABLE IF NOT EXISTS tracks (
id INT AUTO_INCREMENT PRIMARY KEY,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
title VARCHAR(255) NOT NULL,
audio_content_uri VARCHAR(255) NOT NULL,
image_content_uri VARCHAR(255) NOT NULL,
link VARCHAR(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
MariaDB [(none)]> CREATE DATABASE kick_preview; # データベース作る
MariaDB [(none)]> exit # 一旦出る
$ mysql -u quark -p kick_preview < tracks_create_table.sql # tracks_create_tableを実行
$ mariadb -u quark -p # 入る
MariaDB [kick_preview]> show create table tracks; +--------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Table | Create Table |
+--------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| tracks | CREATE TABLE `tracks` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`created_at` timestamp NULL DEFAULT current_timestamp(),
`updated_at` timestamp NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
`title` varchar(255) NOT NULL,
`audio_content_uri` varchar(255) NOT NULL,
`image_content_uri` varchar(255) NOT NULL,
`link` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=68 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci |
+--------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
1 row in set (0.000 sec)
テーブルを作ることができました。
DB API作成
アプリを運用する上で
- ボタンを押したらDBに対してSELECTしてデータを取得する
- DBに新しい曲を入れる
の2つの機能が必要なので、Flaskでそれらの機能の為のAPIを作りました
@app.route('/api/get-content', methods=['GET'])
def get_content():
try:
conn = mysql.connector.connect(
host='localhost',
user=mariadb_user,
password=mariadb_pw,
database='kick_preview'
)
cursor = conn.cursor()
cursor.execute("SELECT title, audio_content_uri, image_content_uri, link FROM tracks ORDER BY RAND() LIMIT 1;")
result = cursor.fetchone()
cursor.close()
conn.close()
if result is not None:
title = result[0]
audio_uri = result[1]
image_uri = result[2]
link = result[3]
res = jsonify({
"title" : title,
"audio_uri" : audio_uri,
"image_uri" : image_uri,
"link": link
})
logger.info(res)
return res
else:
res = jsonify({"error": "Not found data. Please check kick_preview table."})
logger.error(res)
return res
except Exception as e:
logger.error(f"Exception occurred: {str(e)}", exc_info=True)
return jsonify({"error":f"{e}"}), 500
@app.route('/api/put-content', methods=['PUT'])
def put_content():
try:
data = request.get_json()
conn = mysql.connector.connect(
host='localhost',
user=mariadb_user,
password=mariadb_pw,
database='kick_preview'
)
cursor = conn.cursor()
conn.start_transaction()
insert_query = """
INSERT INTO tracks (title, audio_content_uri, image_content_uri, link)
VALUES (%s, %s, %s, %s)
"""
values = (
data.get("title"),
data.get("wave_file_uri"),
data.get("image_file_uri"),
data.get("link")
)
cursor.execute(insert_query, values)
conn.commit()
cursor.close()
conn.close()
return jsonify({"message": "Data inserted successfully"}), 200
except Exception as e:
logger.error(f"Exception occurred: {str(e)}", exc_info=True)
return jsonify({"error":f"{e}"}), 500
@app.route('/api/get-content', methods=['GET'])
アプリのボタンを押すと、"SELECT title, audio_content_uri, image_content_uri, link FROM tracks ORDER BY RAND() LIMIT 1;"が実行され、情報が渡されます。
楽曲データの挿入
@app.route('/api/put-content', methods=['PUT'])
を実行するためのファイルです。こちらで適切なデータかチェックしているのですが、分けなくてよかったです。
- 音楽は.wavか
- 1秒未満か
- 画像は縦横どちらも500px以上か
- jpeg or pngか
- linkは存在するか
等を確認し、問題が無ければS3に楽曲と画像をアップロードしURI情報を受け取り、Flask APIのPUTを叩きます。
content_uploader.py
import json
import argparse
import os
import wave
from urllib.request import urlopen
from urllib.error import HTTPError, URLError
from PIL import Image
import boto3
from botocore.exceptions import NoCredentialsError
from dotenv import load_dotenv
import requests
from logger_setup import setup_logger
logger = setup_logger()
load_dotenv()
class ContentUploader:
def __init__(self):
self.aws_access_key = os.getenv('AWS_ACCESS_KEY')
self.aws_secret_key = os.getenv('AWS_SECRET_KEY')
self.s3_bucket_name = "quark-kick-preview-storage"
def get_arg(self) -> argparse.Namespace:
parser = argparse.ArgumentParser(description="Kick Preview Content Uploader.")
parser.add_argument('-wfp', '--wave-file-path', required=True, help='Wave Audio File Path. wave length must be under 1 second.')
parser.add_argument('-ifp', '--image-file-path', required=True, help='Image File Path. image file must be JPG or PNG and at least 500x500 pixels.')
parser.add_argument('-t', '--title', required=True, help='Audio Title. Example : Artist Name - Track name')
parser.add_argument('-l', '--link', required=True, help='Audio info link. link must at least start with "http".')
args = parser.parse_args()
if not args.wave_file_path or not args.image_file_path or not args.title or not args.link:
print("Error: Missing required arguments.")
parser.print_help()
sys.exit(1)
return args
def audio_check(self, wave_file_path : str) -> None:
if not wave_file_path.lower().endswith('.wav'):
raise ValueError('The Wave file path must end with ".wav"')
try:
with wave.open(wave_file_path, 'rb') as wave_file:
# チャンネル数、サンプル幅、サンプルレート、フレーム数を取得
channels = wave_file.getnchannels()
sample_width = wave_file.getsampwidth()
frame_rate = wave_file.getframerate()
frame_count = wave_file.getnframes()
# 再生時間を計算
duration = frame_count / float(frame_rate)
logger.info(f"File: {wave_file_path}")
logger.info(f"Channels: {channels}")
logger.info(f"Sample Width: {sample_width}")
logger.info(f"Frame Rate: {frame_rate}")
logger.info(f"Frame Count: {frame_count}")
logger.info(f"Duration: {duration:.2f} seconds")
# 1秒未満かどうかをチェック
if duration >= 1.0:
raise wave.Error(f"Error: {wave_file_path} is {duration:.2f} seconds, which is not under 1 second.")
else:
logger.info(f"Success: {wave_file_path} is under 1 second.")
print("OK")
except wave.Error as e:
raise e
except Exception as e:
raise e
def image_check(self, image_file_path: str) -> None:
if not (image_file_path.lower().endswith('.jpg') or image_file_path.lower().endswith('.png')):
raise ValueError('The image file must be in JPG or PNG format.')
try:
with Image.open(image_file_path) as img:
width, height = img.size # 画像の幅と高さを取得
logger.info(f"File: {image_file_path}")
logger.info(f"Image format: {img.format}")
logger.info(f"Width: {width}px, Height: {height}px")
# フォーマットの確認
if img.format not in ['JPEG', 'PNG']:
raise ValueError(f"Error: {image_file_path} is not a valid JPG or PNG file.")
# 500x500px以上かどうかをチェック
if width < 500 or height < 500:
raise ValueError(f"Error: {image_file_path} is {width}x{height}px, which is less than 500x500px.")
else:
logger.info(f"Success: {image_file_path} is at least 500x500px.")
except ValueError as e:
raise e
except Exception as e:
raise e
def link_check(self, link : str) -> bool:
if not (link.lower().startswith('http')):
raise ValueError('Link must start with "http"')
try:
response = urlopen(link)
if response.status == 200:
logger.info(f"link exists: {link}")
return None
except HTTPError as e:
raise Exception(f"HTTPError: {e.code} for link: {link}")
except URLError as e:
raise Exception(f"URLError: {e.reason} for link: {link}")
except Exception as e:
raise e
def to_s3(self, file_path, s3_key_name) -> str:
try:
s3 = boto3.client('s3', aws_access_key_id=self.aws_access_key, aws_secret_access_key=self.aws_secret_key, region_name="ap-northeast-1")
s3_uri = f"s3://{self.s3_bucket_name}/{s3_key_name}"
s3.upload_file(file_path, Bucket=self.s3_bucket_name, Key=s3_key_name)
logger.info(f"Upload successful: {s3_key_name}")
return s3_uri
except FileNotFoundError as e:
raise e
except NoCredentialsError as e:
raise e
except Exception as e:
raise e
def put_content(self, title, wave_file_uri, image_file_uri, link) -> None:
url = "http://localhost:5000/api/put-content"
headers = {
"Content-Type": "application/json"
}
data = {
"title": f"{title}",
"wave_file_uri": f"{wave_file_uri}",
"image_file_uri": f"{image_file_uri}",
"link": f"{link}",
}
result = requests.put(url, data=json.dumps(data), headers=headers)
print(result)
result.raise_for_status()
logger.info("Put request succeeded.")
return None
if __name__ == "__main__":
UP = ContentUploader()
args = UP.get_arg()
title = args.title; wave_file_path = args.wave_file_path; image_file_path = args.image_file_path; link = args.link
UP.audio_check(wave_file_path); UP.image_check(image_file_path); UP.link_check(link)
wave_file_uri = UP.to_s3(wave_file_path, f"audios/{wave_file_path.split('/')[-1]}")
image_file_uri = UP.to_s3(image_file_path, f"images/{image_file_path.split('/')[-1]}")
UP.put_content(
title,
wave_file_uri,
image_file_uri,
link
)
こんなかんじで実行すればデータを入れることができます。
$ rye run python content_uploader.py \
-wfp "/home/quark/Work/my-kick-preview-db/contents/audio/PRFREE023_Berzark_Can_You_Hear_Me.wav" \
-ifp /home/quark/Work/my-kick-preview-db/contents/image/PRFREE023.jpg \
-t "Berzärk - Can You Hear Me" \
-l "https://prototypesrecords.bandcamp.com/track/can-you-hear-me-prfree23"
一括挿入スクリプト
.csvに以下のようにデータを入れれば、一括で入れることができるスクリプトも作りました。
import.csv
"Death - Sacrifice", "/home/quark/Work/my-kick-preview-db/contents/audio/PR110_Death_Sacrifice.wav", "/home/quark/Work/my-kick-preview-db/contents/image/PR110.jpg", "https://prototypesrecords.bandcamp.com/track/sacrifice"
"Frenesys - Bassdrum", "/home/quark/Work/my-kick-preview-db/contents/audio/PR086_Frenesys_Bassdrum.wav", "/home/quark/Work/my-kick-preview-db/contents/image/PR086.jpg", "https://prototypesrecords.bandcamp.com/track/bassdrum"
batch_uploader.py
import csv
import subprocess
# コマンドのテンプレート
command_template = [
"rye", "run", "python", "content_uploader.py",
"-wfp", "{audio_path}",
"-ifp", "{image_path}",
"-t", '"{title}"',
"-l", "{link}"
]
csv_file = "import.csv"
with open(csv_file, newline='', encoding='utf-8') as f:
reader = csv.reader(f)
for row in reader:
# CSVのカラムに対応するデータを取り出す
title = row[0]
audio_path = row[1]
image_path = row[2]
link = row[3]
# コマンドを生成
command = [part.format(audio_path=audio_path, image_path=image_path, title=title, link=link)
if '{' in part else part for part in command_template]
subprocess.run(" ".join(command), shell=True)
完成
インターネット公開編との要素を合わせて
$ sudo systemctl start mariadb
$ nohup rye run python api.py > nohup.out 2>&1 &
$ nohup rye run reflex run > nohup.out 2>&1 &
で立ち上げて完成です！
さいごに
今後もこんな感じで面白そうだな~と思ったものをアプリ化しつつ、細かいところも徐々に勉強して行ければと思っています。
ここまで見ていただきありがとうございました。
何かご指摘やアドバイスなどいただけますと嬉しいです。