如何在 Linux 上部署 Flask-SocketIO 和 React.js

本文不包括 Linux 操作系统的安装，重点是部署 Flask-SocketIO 和 React.js 应用程序的教程。

如何将文件传输到 Linux？

在将文件传输到 Linux 之前，我们应该了解如何使用 FTP 来完成当前进程。通常情况下，Linux 系统默认未安装 vsftpd。

安装 FTP 服务器

sudo apt install vsftpd

安装完成后，你可以像使用 Ubuntu 虚拟机一样，将文件从主机传输到客户机。你可以使用许多 FTP 工具，如 FileZilla。

传输文件

打开 FileZilla，创建与 Ubuntu 的连接，在右侧输入如下内容：

• 主机： 服务器地址
• 端口：22（默认值，如果使用 SFTP）
• 用户：默认为根用户，如果没有配置 vsftpd

按下 “确定 “按钮，尝试创建连接。

2. 将文件传输到项目位置，将要传输的文件从左向右拖动，例如，将/home/admin/project 拖动到/home/admin/project。

React.js 安装

事实上，React.js 是基于 Node.js 的。在 Ubuntu 上安装 React.js，必须先安装 Node.js。

安装 Node.js

按照官方下载页面的说明进行安装：

https://nodejs.org/en/download/package-manager/current

# installs NVM (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# The installation shell script is located
cd /home/${your user name}

# If needed
source .nvm/nvm.sh

# download and install Node.js
nvm install 21

# verifies the right Node.js version is in the environment
node -v # should print `v21.7.3`

# verifies the right NPM version is in the environment
npm -v # should print `10.5.0`

安装 React.js 依赖项

假设你已经准备好了 React.js 应用程序，有很多示例演示了这一过程，通过。

1. 将目录更改为 package.json 所在的目标路径

cd ${your project path}

2. 从package.json安装项目依赖项

npm install

3. 打包源代码并最小化

npm run build

React.js 应用程序将开始打包所有需要的依赖项。基本上，继续执行 npm install -s serve 和 serve -s build 命令，React.js 应用程序就能成功部署到 Ubuntu 上了。不过，我们也不能忽略一个事实，那就是 PM2（进程管理器 2）软件包是管理进程的更强大工具。为此，安装 PM2 是必要的。

4. 安装 PM2

npm install -g pm2

现在 PM2 已成功安装，请将目录更改为项目的构建文件夹。

# Change directory
cd ${your React.js application locate}/build

# Using pm2 to start the React.js, specify the React.js running on port 3000
pm2 serve build 3000 --spa --name MyReactJSService

# Check the service working correctly
pm2 list

# Auto startup if reboot
pm2 startup

# Copy the command from pm2 startup generate
sudo env PATH=$PATH:/home..................................

如果运行上述所有命令后没有出现错误，且 React.js 应用程序目前正在 Ubuntu 服务器上进行服务，那么可能还有其他 PM2 命令对您有用。

安装 Flask-SocketIO

要在生产环境中部署 Flaks-SocketIO，我们可以使用 gunicorn 作为 WSGI HTTP 服务器，并接收名为 eventletto 的 Worker 传入的请求。

安装 Python

sudo apt update

sudo apt upgrade

# Install the python
sudo apt install python3

# Verify installation
python3 --version

使用虚拟环境来安装软件包：

# Install Virtualenv package for isolation the environment
pip install virtualenv

# Change directory to your project
cd ${your project}

# Create virtual environment, take the .venv as environment name
virtualenv .venv

# Entering the virtual environment
source .venv/bin/activate

# Install all project requirement
pip3 install -r requirements.txt

安装 Gunicorn 和 Eventlet

所有项目要求都已安装在虚拟环境中。接下来，需要一个适合生产的 WSGI 服务器，以 Gunicorn 为例。首先，安装是必不可少的。

# Install the gunicorn WSGI Server
pip3 install gunicorn

# Install eventlet worker
pip3 install eventlet

Eventlet 是一个线程工作者，用于处理客户端的请求。现在，我们可以使用以下命令在后台运行服务器：

gunicorn --bind=192.168.172.10:4000 --worker-class eventlet -w 3 app:app --daemon

命令描述：

• worker-class： 指定 “eventlet “为 Worker。
• bind：绑定运行在 IP 地址和端口 4000 上的服务器。
• w: 设置 Worker 的数量。
• “app:app”： Gunicorn 的启动点。
• daemon： 在后台运行。

使用该命令检查 Worker 是否在后台正确运行。

ps -ef | grep gunicorn

结论

React.js 应用程序和 Flask-SocketIO 已成功运行在类似 Ubuntu 的生产环境中。将来，这些步骤可以整合到 CI/CD 流程中，以加快部署过程，减少文件传输或启动服务器所需的时间。从根本上说，我认为可以使用 PM2（进程管理器 2）来管理 Gunicorn。目前，我们暂时处于这一阶段。

作者：Clyde2034