发布网站

通过运行以下命令安装 Netlify CLI：

为单页应用配置重定向。

如果您的应用使用 静态渲染，则可以跳过此步骤。

expo.web.output: 'single' 生成单页应用。这意味着只有一个 dist/index.html 文件需要重定向所有请求。这可以在 Netlify 中通过创建一个 ./public/_redirects 文件并将所有请求重定向到 /index.html 来完成。

/*    /index.html   200

如果您修改了此文件，则必须通过 npx expo export -p web 重新构建项目，以确保它被安全复制到 dist 目录中。

通过运行以下命令部署网络构建目录：

您将看到一个可用于在线查看项目的 URL。

安装 Vercel CLI。

为单页应用配置重定向。

在应用的根目录下创建一个 vercel.json 文件，并添加以下配置：

{
  "buildCommand": "expo export -p web",
  "outputDirectory": "dist",
  "devCommand": "expo",
  "cleanUrls": true,
  "framework": null,
  "rewrites": [
    {
      "source": "/:path*",
      "destination": "/"
    }
  ]
}

如果您的应用使用 静态渲染，则可能需要添加其他 动态路由配置。

部署网站。

现在您将看到一个可用于在线查看项目的 URL。当构建完成后，将该 URL 粘贴到浏览器中，您将看到已部署的应用。

将 amplify-explicit.yml 文件添加到您存储库的根目录。确保您已从 .gitignore 文件中删除生成的 dist 目录并提交了这些更改。

将您的本地 Expo 项目推送到 GitHub 存储库。如果您尚未推送到 GitHub，请遵循 GitHub 的指南将现有项目添加到 GitHub。

登录到 Amplify 控制台，选择一个现有的应用或创建一个新应用。授予 Amplify 读取您 GitHub 账户或拥有您存储库的组织的权限。

添加您的存储库，选择分支，并在 Connecting a monorepo? 中输入您的应用 dist 目录的路径，然后选择 Next。

Amplify 控制台将检测到您项目中的 amplify.yml 文件。选择 Allow AWS Amplify to automatically deploy all files hosted in your project root directory 并选择 Next。

检查您的设置并选择 Save and deploy。您的应用现在将部署到 https://branchname.xxxxxx.amplifyapp.com URL。您现在可以访问您的网络应用，部署另一个分支，或在您的 Expo 移动和网络应用之间添加统一的后端环境。

按照 Learn how to get the most out of Amplify Hosting 下拉列表中的步骤 Add a custom domain with a free SSL certificate 及更多信息。

通过 Firebase 控制台 创建一个 Firebase 项目，并按照这些 说明 安装 Firebase CLI。

使用 CLI 登录到您的 Firebase 账户，运行命令：

然后，通过运行命令初始化您的 Firebase 项目以进行托管：

设置将取决于您如何构建 Expo 网站：

1. 当询问公共路径时，请确保指定 dist 目录。
2. 当提示 Configure as a single-page app (rewrite all urls to /index.html) 时，仅当您使用 web.output: "single"（默认）时才选择 Yes。否则，选择 No。

在 package.json 的现有 scripts 属性中，添加 predeploy 和 deploy 属性。每个属性具有以下值：

"scripts": {
  %%placeholder-start%%... %%placeholder-end%%
  "predeploy": "expo export -p web",
  "deploy-hosting": "npm run predeploy && firebase deploy --only hosting",
}

要部署，请运行以下命令：

打开控制台输出中的 URL 检查您的部署，例如：https://project-name.firebaseapp.com。

如果您想更改托管的标题，请在 firebase.json 的 hosting 部分添加以下配置：

  "hosting": [
    {
      %%placeholder-start%%... %%placeholder-end%%
      "headers": [
        {
          "source": "/**",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "no-cache, no-store, must-revalidate"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=604800"
            }
          ]
        }
      ],
    }
  ]

首先在您的项目中初始化一个新的 git 存储库，并将其配置为推送到 GitHub 存储库。如果您已经在与 GitHub 存储库同步您的更改，请跳过此步骤。

在 GitHub 网站上创建一个存储库。然后，在项目的根目录中运行以下命令：

上述命令初始化了一个新的 Git 存储库，并将其配置为将您的源代码推送到指定的 GitHub 存储库。

将在项目中安装 gh-pages 包作为开发依赖：

要部署该项目，请在 应用配置 中将其配置为子域，在 baseUrl 属性中设置其值为字符串 /repo-name。

例如，如果 GitHub 存储库是 expo-gh-pages，则 实验性 baseUrl 属性 的值将如下：

{
  "expo": {
    "experiments": {
      "baseUrl": "/expo-gh-pages"
    }
  }
}

通过在 package.json 文件中修改 scripts，添加 predeploy 和 deploy 脚本。每个脚本都有自己的值：

"scripts": {
 %%placeholder-start%%... %%placeholder-end%%
  "deploy": "gh-pages --nojekyll -d dist",
  "predeploy": "expo export -p web"
}

因为 Expo 在生成的文件中使用下划线，所以您需要使用 --nojekyll 标志禁用 Jekyll。

要生成网络应用的生产构建并将其部署到 GitHub Pages，运行以下命令：

这将在您 GitHub 存储库的 gh-pages 分支上发布网络应用的构建。此分支只包含来自 dist 目录的构建构件，以及 gh-pages 生成的 .nojekyll 文件。它不包括开发源代码。

现在网络应用已发布到 gh-pages 分支，配置 GitHub Pages 从该分支提供应用。

• 导航到 GitHub 存储库的 Settings 选项卡。
• 向下滚动到 Pages 部分。
• 确保 Source 设置为 Deploy from a branch。
• 在 Branch 部分，选择 gh-pages 和 root 目录。
• 点击 Save。

一旦网络应用发布并设置了 GitHub Pages 配置，GitHub Action 将部署您的网站。您可以通过导航到存储库的 Actions 选项卡来监控其进度。完成后，您的网络应用将可在 URL http://username-on-github.github.io/repo-name 上访问。

对于后续的部署和更新，运行 deploy 命令，GitHub Action 将自动开始更新您的网络应用。