发布网站

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

为单页应用配置重定向。

如果你的应用使用 静态渲染，那么可以跳过此步骤。

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

/*    /index.html   200

如果你修改了此文件，必须使用 npx expo export -p web 重新构建项目，才能安全地将其复制到 dist 目录。

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

你会看到一个 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 Console，选择一个现有应用或创建一个新应用。授予 Amplify 读取你 GitHub 账号或拥有该仓库的组织的权限。

添加你的仓库，选择分支，并勾选 Connecting a monorepo?，以输入你的应用 dist 目录路径，然后选择 Next。

Amplify Console 会检测你项目中的 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。你现在可以访问你的 Web 应用、部署另一个分支，或在 Expo 移动端和 Web 应用之间添加统一的后端环境。

按照 Learn how to get the most out of Amplify Hosting 下拉菜单中的步骤，进行 Add a custom domain with a free SSL certificate 等更多配置。

使用 Firebase Console 创建一个 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。

如果你想更改托管的 header，请在 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 文件中添加 predeploy 和 deploy 脚本来修改 scripts。每个脚本都有自己的值：

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

由于 Expo 在生成的文件中使用下划线，你需要使用 --nojekyll 标志来禁用 Jekyll。

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

这会将 Web 应用的构建发布到 GitHub 仓库的 gh-pages 分支。该分支只包含 dist 目录中的构建产物，以及 gh-pages 生成的 .nojekyll 文件。不包含开发源代码。

现在 Web 应用已经发布到 gh-pages 分支，请将 GitHub Pages 配置为从该分支提供应用服务。

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

一旦 Web 应用发布完成并设置好 GitHub Pages 配置，GitHub Action 将会部署你的网站。你可以通过进入仓库的 Actions 选项卡来监控进度。完成后，你的 Web 应用将可通过 URL http://username-on-github.github.io/repo-name 访问。

对于后续部署和更新，运行 deploy 命令，GitHub Action 会自动启动以更新你的 Web 应用。