感谢前段时间看的一些编程教程,我被介绍到了Replit在线开发平台。最近,我认为这将是一个有趣的练习,看看我是否可以使用 Replit 平台来托管我一直使用的基于 Python 的 React 开发方法的开发环境,我已经采用了这种方法。我在React to Python一书中概述了这种方法,并从书中挑选了一些示例作为我的测试用例。

虽然 Replit 平台令人印象深刻,但我经历了相当长的学习曲线,试图弄清楚如何安装、配置和运行我需要使用的所有部件。最后,我使用从书中直接提取的示例设置了两个单独的 repl。

第一个是用于仅前端应用程序并且设置起来非常简单。但是第二个应用程序是一个全栈示例并且被证明配置起来更具挑战性。由于如何在单个 Replit repl 中运行多个服务器并不是很明显,我想我会在这里记录我的解决方案。虽然我的开发堆栈可能与大多数不同,但这里的方法仍然适用于许多情况。

复制基础知识

Replit 在在线开发工具领域是独一无二的,因为与我见过的大多数其他工具相比,它为您提供了更多的选择和更多的控制权。你可以让它与几乎所有的编程语言一起工作,对于更常见的语言,它们有模板让你快速入门。

要创建一个新的 Replit 项目(或 repl),请选择合适的模板,如 Python、TypeScript、Rust 等,然后开始添加源文件。如果您不喜欢任何可用的 Replit 模板,您也可以从一个 Nix 模板开始,该模板本质上是一个空白板开始构建。

Replit 的主要功能之一是在该平台上创建的 repl 很容易分叉。此功能的工作方式与 GitHub 上的公共存储库可能被分叉的方式非常相似。除了获得源代码的副本之外,您还将获得为其创建的整个开发环境的副本。如果您的 repl 是公开的,即使您的代码对其他人是只读的,任何人都可以查看、派生并运行它。

Replit 为您提供创建 repl 的最后一种方法是直接从 GitHub 存储库中提取项目源代码和 Replit 配置。

在 Replit 工作区中,您可以访问文件管理器、代码编辑器、Linux shell、Markdown 查看器和 Web 浏览器窗口。

基本设置

一个典型的全栈 Web 应用程序将具有一个面向公众的前端 Web 服务器和一个由前端服务器使用和/或代理的后端应用程序服务器。在我的例子中,我使用 Flask 作为后端服务器,它有一个非常简单的 REST API,然后我有Parcel bundler开发代理服务器作为前端。

除了服务器之外,我还需要安装和运行构建过程中使用的 Python 到 JavaScript 转译器。这个转译器与我使用的 Parcel bundler 一起工作。

为了自动设置开发环境,我创建了一个shell 脚本执行以下操作:

• 安装了我需要使用的具体Python版本

• 已安装Transcrypt(Python 到 JavaScript 转译器)

• 为项目安装了JavaScript开发和应用依赖

我还创建了一个shell 脚本用于启动构建过程,该过程将首先检查以确保已安装所需的依赖项。如果未安装依赖项,构建脚本将在运行启动开发服务器的npm start脚本之前自动运行设置脚本。

运行两台服务器

如果您知道您在寻找什么以及在哪里寻找,那么让多个服务器同时工作的关键在于Replit 文档。但即便如此,所提供的内容并不完全清楚,并且有点回避这个特定问题。

让多服务器 repl 工作的一个重要关键是了解开始使用监听地址0.0.0.0的服务器成为面向公众的 Web 服务器,并启动另一个监听127.0.0.1的服务器保持该服务器的私密性。

当使用0.0.0.0时,Replit 通过其自己的可公开访问的 IP 地址之一接受对该服务器的公共请求。除此之外,它还自动启用 SSL。 无论您的服务器正在侦听哪个端口,都将通过标准 SSL 端口 (443) 访问面向公众的服务器。 这意味着,虽然您可以为内部服务器使用多个端口,但面向公众的服务器只接受通过标准 HTTPS 端口的请求。

现在我们已经确定了后端/前端端口,下一个问题是如何同时运行两个服务器?由于两台服务器都处于阻塞状态,因此您不能只链接启动命令,因为第二个服务器启动命令要等到第一个结束后才会执行。

一种选择是派生第一个命令并在后台运行它,允许第二个命令执行。虽然这可行,但一旦不再需要它,您就没有方便的方法来停止第一个命令。

为了解决这个问题,我使用了npm-run-all包。这个包允许你并行运行多个 npm 脚本,并且会同时退出所有的脚本。

我在package.json文件中的 npm 脚本最终看起来像这样:

"scripts": {
  "start": "npm-run-all -p -r flask-dev parcel-dev",
  "flask-dev": "python main.py dev",
  "parcel-dev": "NODE_ENV=development parcel --log-level info src/index.html --dist-dir dist/dev --port 8080",
  "build": "NODE_ENV=production parcel build --log-level info src/index.html --no-source-maps --dist-dir dist/prod --no-cache"
},

进入全屏模式 退出全屏模式

使用npm-run-all,npm start脚本只需并行调用另外两个脚本。通过使用-r或--race选项,由每个脚本启动的进程将在其他进程之一退出时关闭。

建还是不建

要在 Replit 上运行您的应用程序,在 Replit 工作区的顶部有一个闪亮的绿色 Run 大按钮。这个按钮的实际作用由用于创建 repl 的 Replit 模板定义,但也可以在.replit文件中自定义。

虽然让这个按钮启动您的开发服务器可能是有意义的,但它可能不是最佳的。由于当其他人想要查看您的应用程序时 Replit 的工作方式,他们基本上单击了相同的按钮。如果您的构建过程需要一段时间,他们可能会放弃在构建过程完成之前启动您的应用程序。

因此,为了在这种情况下加快启动速度,我更喜欢在单击 Run 按钮时直接使用 Flask 提供预构建的应用程序文件,并从命令行执行构建过程和开发服务器的运行。

但是,这意味着 Flask 服务器必须在不同的端口上启动,这取决于它是充当全栈服务器,还是仅充当后端服务器。为了实现这一点,我为 Flask 添加了一个条件启动,它依赖于在启动时是否存在命令行参数dev。

main.py

...

if __name__ == "__main__":
    # Start up flask in proxied mode if using parcel dev server
    if len(sys.argv) > 1 and sys.argv[1] == 'dev':
        app.run(debug=True, host="127.0.0.1", port=8000)
    else: # Run public server
        app.run(debug=True, host="0.0.0.0", port=8000)

进入全屏模式 退出全屏模式

当从上面的 npm 脚本启动 Flask 时:

"flask-dev": "python main.py dev"

进入全屏模式 退出全屏模式

它将使用127.0.0.1地址。但是当开始使用 Replit Run 按钮时,它在 .replit 文件中被配置为在没有附加参数的情况下调用它:

run = "python main.py"

进入全屏模式 退出全屏模式

在这种情况下,它以0.0.0.0地址开始。

结论

对于使用 Replit,我可以给出的一个一般提示是不要与他们的框架抗争。 Replit 在他们预先安装的一些工具中固执己见,你最好使用他们拥有的东西,而不是忽略它们,只使用你可能已经习惯的东西。

例如,就我而言,我通常会使用venv设置 Python 虚拟环境,然后pip安装我需要的任何 Python 依赖项。当我第一次在 Replit 上尝试时,结果充其量是不一致的。当我继续使用预装的 Poetry 包管理器时,一切都变得顺利多了。

虽然在 Replit 上设置全栈应用程序并不太难,但准确地确定需要做什么可能不会立即显现出来。希望我在这里的例子能给你一些关于如何处理它的提示。

资源

• 转载网站:

https://replit.com

• _React to Python_全栈项目源码:

https://github.com/JennaSys/replit_rtp_fullstack

• React to Python Replit 上的全栈示例:

https://replit.com/@JennaSys/replitrtpfullstack

• 包裹捆绑器:

https://parceljs.org

• 使用 Python 创建 React 应用程序教程:

https://leanpub.com/rtptutorial

• React to Python 书:

https://pyreact.com