使用 Community Cloud 和 GitHub Codespaces 进行开发

要使用 GitHub Codespaces 进行 Streamlit 开发,你需要一个正确配置的 devcontainer.json 文件来设置环境。幸运的是,Streamlit Community Cloud 可以提供帮助!虽然 Community Cloud 主要用于向全世界部署和共享应用,但我们也内置了一些便捷功能,使使用 GitHub Codespaces 变得容易。本指南解释了如何创建 Community Cloud 帐户,并使用自动化工作流程进入 GitHub codespace 并实时编辑 Streamlit 应用。所有这些都在你的浏览器中完成,无需安装。

如果你已经创建了 Community Cloud 帐户并连接了 GitHub,请跳转到 从模板创建新应用。

  • 你必须拥有一个 GitHub 帐户。
  1. 访问 share.streamlit.io
  2. 点击“继续登录”。
  3. 点击“使用 GitHub 继续”。
  4. 输入你的 GitHub 凭据并按照 GitHub 的身份验证提示操作。
  5. 填写你的帐户信息,然后点击底部的“我接受”。
  1. 在左上角,点击“工作区 warning”。
Connect your GitHub account to a new Community Cloud account
  1. 在下拉菜单中,点击“连接 GitHub 帐户”。
  2. 输入你的 GitHub 凭据并按照 GitHub 的身份验证提示操作。
  3. 点击“授权 streamlit”。
Authorize Community Cloud to connect to your GitHub account
  1. 在左上角,点击你的 GitHub 用户名。
Access your workspace settings
  1. 在下拉菜单中,点击“设置”。
  2. 在对话框的左侧,选择“已关联帐户”。
  3. 在“源代码管理”下,点击“在此连接 arrow_forward”。
  4. 点击“授权 streamlit”。
Authorize Community Cloud to connect to your private GitHub repositories
  1. 在右上角,点击“创建应用”。
Create a new app from your workspace in Streamlit Community Cloud
  1. 当询问“你已有应用了吗?”时,点击“没有,从模板创建一个”。
  2. 在左侧的模板列表中,选择“空白应用”。
  3. 在底部,选择“打开 GitHub Codespaces...”选项。
  4. 在底部,点击“部署”。
  1. 等待 GitHub 设置你的 codespace。

    codespace 完全初始化可能需要几分钟。在你的 codespace 中看到 Visual Studio Code 编辑器后,安装 Python 和启动 Streamlit 服务器可能需要几分钟。完成后,你将看到分屏视图,左侧是代码编辑器,右侧是正在运行的应用。代码编辑器默认打开两个标签页:仓库的 readme 文件和应用的入口文件。

    Your new GitHub Codespace
  2. 转到左侧窗格中应用的入口文件(streamlit_app.py),通过在 st.title 中添加“Streamlit”来更改第 3 行。

    -st.title("🎈 My new app") +st.title("🎈 My new Streamlit app")

    在 codespace 中,每次编辑都会自动保存文件。

  3. 输入更改片刻后,右侧的应用将显示重新运行提示。点击“总是重新运行”。

    Edit the title of your sample Streamlit app

    如果在你点击之前重新运行提示消失了,可以将鼠标悬停在溢出菜单图标(more_vert)上使其重新出现。

  4. 可选:继续进行编辑并观察几秒钟内的变化。

  1. 在左侧导航栏中,点击源代码管理图标。
See your deployed Streamlit app
  1. 在左侧的源代码管理侧边栏中,输入你的提交名称。
  2. 点击“check 提交”。
See your deployed Streamlit app
  1. 在确认对话框中,点击“”来暂存和提交所有更改。你的更改已在 codespace 中本地提交。

  2. 在左侧的源代码管理侧边栏中,点击“cached 1 arrow_upward”将你的提交推送到 GitHub。

  3. 在确认对话框中,点击“确定”将提交推送到“origin/main”。

    你的更改现在已保存到你的 GitHub 仓库。Community Cloud 会立即在你的已部署应用中反映这些更改。

  4. 可选:要查看已更新、已发布的应用程序,请返回 share.streamlit.io 的工作区中的“我的应用”部分,然后点击你的应用。

如果你尚未学习 Streamlit 的基本概念,现在是学习 基础知识 的好时机。使用你的 codespace 逐步操作并尝试基本的 Streamlit 命令。完成后,回到这里学习如何清理你的 codespace。

当你停止与 codespace 交互时,GitHub 通常会自动为你停止 codespace。但是,确保避免不必要的容量使用最可靠的方法是在完成后停止或删除你的 codespace。

  1. 访问 github.com/codespaces。页面底部列出了你的所有 codespace。点击你的 codespace 的溢出菜单图标(more_horiz)。
Stop or delete your GitHub Codespace
  1. 如果你稍后想继续工作,请点击“停止 codespace”。否则,请点击“删除”。

    Stop your GitHub codespace
  2. 恭喜!你刚刚将一个应用部署到 Streamlit Community Cloud。🎉 返回 share.streamlit.io/ 的工作区并部署另一个 Streamlit 应用

    See your deployed Streamlit app
forum

还有疑问?

我们的 论坛 提供大量有用的信息和 Streamlit 专家。