在 Vercel 和 Netlify 上部署

Vercel 和 Netlify 是用于部署静态网站的流行托管平台。

它们使从现有 Git 存储库托管静态网站变得简单方便，并通过其 CDN 使其广泛可用。

Netlify

要在 Netlify 上部署您自己的 JupyterLite，您可以从 JupyterLite 演示开始，通过模板生成一个新的存储库。

然后添加一个内容为 3.9 的 runtime.txt 文件，以指定 Python 3.9 作为依赖项。

最后，将 jupyter lite build --contents content --output-dir dist 指定为“构建命令”，并将 dist 指定为“发布目录”。

您可能还想指定 --debug 标志以获取额外的日志消息。

Vercel

就像 Netlify 一样，Vercel 可以连接到现有的 Git 存储库，并在推送和 PR 事件（预览）上无缝部署静态文件。

这里的配置与 Netlify 非常相似。您可以指定相同的 jupyter lite build --contents content --output-dir dist 构建命令，并将 dist 配置为发布目录。

使用 micromamba 创建构建环境

像 Netlify 和 Vercel 这样的托管平台的构建环境通常对构建机器上安装的 Python 版本有有限的控制。

在他们的构建镜像只包含 Python 3.6 而 JupyterLite 需要 Python 3.9+ 的一段时间内就是如此。这在某些情况下可能会受到限制，特别是当您想对构建有更多控制时。

幸运的是，可以运行任意 bash 脚本，这提供了一个方便的逃生口。

在 requirements-deploy.txt 文件中指定 Python 包，如果需要可以添加额外的依赖项。

jupyterlab~=3.4
jupyterlite-core
jupyterlite-pyodide-kernel

然后创建一个包含以下内容的新 deploy.sh 文件。

#!/bin/bash
set -e

# Install wget
# yum is not available on netlify, but it´s not a problem because wget is already installed, this validation is just to avoid errors on build step.
if command -v yum &> /dev/null; then
    yum install wget -y
fi

# Download and extract Micromamba
wget -qO- https://micro.mamba.pm/api/micromamba/linux-64/latest | tar -xvj bin/micromamba

# Set up environment variables
export MAMBA_ROOT_PREFIX="$PWD/micromamba"
export PATH="$PWD/bin:$PATH"

# Create the environment
micromamba create -n jupyterenv python=3.12 -c conda-forge -y

# Install dependencies via pip in the micromamba environment
micromamba run -n jupyterenv python -m pip install -r requirements-deploy.txt

# Build JupyterLite
micromamba run -n jupyterenv jupyter lite --version
micromamba run -n jupyterenv jupyter lite build --contents content --output-dir dist

Micromamba 创建一个新的自包含环境，这使得安装任何所需的包变得非常方便，而不受构建镜像的限制。

然后配置构建命令和输出目录，例如在 Vercel 上。

您可能还想指定 --debug 标志以获取额外的日志消息。

jupyter lite build --debug

配置 HTTP 标头

从 JupyterLite 0.4.0 开始，通过使用 SharedArrayBuffer 浏览器功能与内核进行同步通信，可以更可靠地从内核访问文件系统。有关更多信息，请参阅内容指南。

但是，这需要为 SharedArrayBuffer 在页面上启用设置两个 HTTP 标头。

将标头添加到 Netlify

在仓库的根目录下创建一个 netlify.toml 文件，内容如下。

[[headers]]
for = "/*"
  [headers.values]
    Cross-Origin-Opener-Policy = "same-origin"
    Cross-Origin-Embedder-Policy = "require-corp"

将标头添加到 Vercel

在仓库的根目录下创建一个 vercel.json 文件，内容如下。

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        }
      ]
    }
  ]
}