reflex

安装环境

安装node.js,下载MSI版本： https://nodejs.org/en/download/

安装到 C:\nodejs\

可选安装： https://github.com/nodejs/node-gyp#on-windows

安装reflex，参考： https://reflex.dev/docs/getting-started/installation/

安装python3.13： https://www.python.org/downloads/windows/

目前不支持3.14，参考：

• https://github.com/reflex-dev/reflex/issues/5964
• https://docs.pydantic.dev/1.10/changelog/

pip install reflex

创建并初始化项目， 创建一个 A blank Reflex app

mkdir reflex_app
cd reflex_app
reflex init
reflex run

输出：

───────────────────────────────────────────────── Starting Reflex App ─────────────────────────────────────────────────
[08:45:26] Compiling: ---------------------------------------- 100% 21/21 0:00:00
───────────────────────────────────────────────────── App Running ─────────────────────────────────────────────────────
                      App running at: http://localhost:3000/
Backend running at: http://0.0.0.0:8000

示例

参考： https://reflex.dev/docs/getting-started/introduction#an-example:-make-it-count

前端使用 Reflex 组件进行声明性构建。组件根据JS编译并提供给用户浏览器:仅在构建用户界面时使用 Reflex 组件、变量和 var 操作。任何其他逻辑都应包含在你的State(后端)

# -*- coding: utf-8 -*-

import reflex as rx

class State(rx.State):
    """定义所有的变量"""
    count: int = 0

    """定义改变变量的事件处理函数"""
    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1

def index() :
    return rx.hstack(
        rx.button(
            "减少",
            color_scheme="ruby",
            on_click=State.decrement,
        ),
        rx.heading(State.count, font_size="2em"),
        rx.button(
            "增加",
            color_scheme="grass",
            on_click=State.increment,
        ),
        spacing="4",
    )

app = rx.App()
app.add_page(index)

在vps上部署reflex应用

参考： https://geniepy.com/blog/how-to-run-reflex-apps-in-production/

测试：

cd ~
mkdir reflex_app
cd reflex_app
python3 -m venv .venv
source .venv/bin/activate
pip install reflex
reflex init
reflex run

部署测试(vps 需要打开3000 和8000端口)

后端：

cd /home/ubuntu/reflex_app/ && reflex run --env prod --backend-only --backend-port 8000

前端：

cd /home/ubuntu/reflex_app/ && reflex run --env prod --frontend-only --frontend-port 3000

使用supervisor部署,参考：

• https://www.cnblogs.com/xishuai/p/ubuntu-install-supervisor.html
• https://stackoverflow.com/questions/43076406/why-cant-supervisor-find-command-source

sudo apt install supervisor

sudo vi /etc/supervisor/conf.d/reflex_app.conf

[program:reflex_app]
directory=/home/ubuntu/reflex_app/
command=/home/ubuntu/reflex_app/.venv/bin/reflex run --env prod
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stdout
stderr_logfile_maxbytes=0

处理权限，重新载入：

sudo chmod 777 /etc/supervisor
sudo supervisorctl update
sudo systemctl status supervisor

sudo vi /etc/systemd/system/reflex.service

[Unit]
Description=Reflex Web Application Service
After=network.target

[Service]
User=ubuntu
Group=ubuntu
Environment=PATH=/home/ubuntu/reflex_app/.venv/bin/
WorkingDirectory=/home/ubuntu/reflex_app/reflex_app
ExecStart=/bin/bash -c 'source /home/ubuntu/reflex_app/.venv/bin/activate && cd /home/ubuntu/reflex_app/ && /home/ubuntu/reflex_app/.venv/bin/reflex run --env prod --frontend-port 3000 --backend-port 8000' 
Restart=always
StandardOutput=append:/var/log/reflex/app.log
StandardError=append:/var/log/reflex/error.log
[Install]
WantedBy=multi-user.target

这里：

• 使用 /bin/bash 而不是 /bin/sh
• 调试成功后可以使用一个端口： --single-port, 这里不能指定端口

sudo vi /etc/logrotate.d/reflex

/var/log/reflex/*.log {
    daily
    missingok
    rotate 7
    compress
    delaycompress
    notifempty
}

启动：

sudo mkdir /var/log/reflex/
sudo systemctl enable --now reflex.service
sudo systemctl daemon-reload
sudo systemctl start reflex
sudo systemctl status reflex

查看日志：

journalctl -u reflex.service -n 50

reflex采用wesocket方式提供服务，占用资源比较高，已卸载