发布网站

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

🌐 Install the Netlify CLI by running the following command:

为单页应用配置重定向。

🌐 Configure redirects for single-page applications.

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

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

/*    /index.html   200

如果你修改此文件，必须使用 npx expo export -p web 重新构建项目，以便它能够安全地复制到 dist 目录中。

🌐 If you modify this file, you must rebuild your project with npx expo export -p web to have it safely copied into the dist directory.

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

🌐 Deploy the web build directory by running the following command:

你将看到一个可以用来在线查看你项目的链接。

🌐 You'll see a URL that you can use to view your project online.

安装 Vercel CLI。

🌐 Install the Vercel CLI.

为单页应用配置重定向。

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

🌐 Create a vercel.json file at the root of your app and add the following configuration:

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

如果你的应用使用静态渲染，那么你可能需要添加额外的动态路由配置。

🌐 If your app uses static rendering, then you may want to add additional dynamic route configuration.

部署网站。

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

🌐 You'll now see a URL that you can use to view your project online. Paste that URL into your browser when the build is complete, and you'll see your deployed app.

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

🌐 Add the amplify-explicit.yml file to the root of your repository. Ensure you have removed the generated dist directory from the .gitignore file and committed those changes.

将本地 Expo 项目推送到 GitHub 仓库。如果你还没有推送到 GitHub，请按照 GitHub 关于将现有项目添加到 GitHub 的指南 操作。

🌐 Push your local Expo project to a GitHub repository. If you haven't pushed to GitHub yet, follow GitHub's guide to add an existing project to GitHub.

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

🌐 Login to the Amplify Console and select an existing app or create a new app. Grant Amplify permission to read from your GitHub account or the organization that owns your repo.

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

🌐 Add your repo, select the branch, and select Connecting a monorepo? to enter the path to your app's dist directory and choose Next.

Amplify 控制台会检测到你项目中的 amplify.yml 文件。请选择 允许 AWS Amplify 自动部署项目根目录中托管的所有文件，然后点击 下一步。

🌐 The Amplify Console will detect the amplify.yml file in your project. Select Allow AWS Amplify to automatically deploy all files hosted in your project root directory and choose Next.

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

🌐 Review your settings and choose Save and deploy. Your app will now be deployed to a https://branchname.xxxxxx.amplifyapp.com URL. You can now visit your web app, deploy another branch, or add a unified backend environment across your Expo mobile and web apps.

按照 了解如何充分利用 Amplify Hosting 下拉菜单中的步骤操作，以 添加带免费 SSL 证书的自定义域 以及获取更多信息。

🌐 Follow the steps in the Learn how to get the most out of Amplify Hosting drop-down to Add a custom domain with a free SSL certificate and more information.

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

🌐 Create a firebase project with the Firebase Console and install the Firebase CLI by following these instructions.

使用 CLI，通过运行以下命令登录到你的 Firebase 账户：

🌐 Using the CLI, login to your Firebase account by running the command:

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

🌐 Then, initialize your firebase project to host by running the command:

设置将取决于你如何搭建你的 Expo 网站：

🌐 The settings will depend on how you built your Expo website:

1. 当被问及公共路径时，务必指定 dist 目录。
2. 当提示 配置为单页应用（将所有 URL 重写为 /index.html） 时，只有在使用 web.output: "single"（默认）时才选择 是。否则，请选择 否。

在现有的 package.json 的 scripts 属性中，添加 predeploy 和 deploy 属性。它们各自的值如下:

🌐 In the existing scripts property of package.json, add predeploy and deploy properties. Each has the following values:

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

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

🌐 To deploy, run the following command:

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

🌐 Open the URL from the console output to check your deployment, for example: https://project-name.firebaseapp.com.

如果你想更改宿主的标题，请在 firebase.json 中为 hosting 部分添加以下配置：

🌐 In case you want to change the header for hosting add the following config for hosting section in firebase.json:

  "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 仓库同步你的更改，可以跳过此步骤。

🌐 Start by initializing a new git repository in your project and configuring it to push to a GitHub repository. If you are already syncing your changes with a GitHub repository, skip this step.

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

🌐 Create a repository on the GitHub website. Then, run the following commands in your project's root directory:

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

🌐 The above commands initialize a new Git repository and configure it to push your source code to the specified GitHub repository.

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

🌐 Install the gh-pages package as a development dependency in your project:

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

🌐 To deploy the project, configure it to a subdomain with the baseUrl property in app config. Set its value to the string /repo-name.

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

🌐 For example, if the GitHub repository is expo-gh-pages, the following will be the value of the experimental baseUrl property:

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

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

🌐 Modify the scripts in the package.json file by adding predeploy and deploy scripts. Each has its own value:

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

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

🌐 Since Expo uses underscores in generated files, you need to disable Jekyll with the --nojekyll flag.

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

🌐 To generate a production build of the web app and deploy it to GitHub Pages, run the following command:

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

🌐 This publishes a build of the web app to the gh-pages branch of your GitHub repository. This branch only contains build artifacts from the dist directory, plus the .nojekyll file generated by gh-pages. It does not include development source code.

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

🌐 Now that the web app is published to the gh-pages branch, configure GitHub Pages to serve the app from that branch.

• 导航到 GitHub 仓库的 设置 选项卡。
• 向下滚动到 页面 部分。
• 确保 Source 设置为 从分支部署。
• 在 Branch 部分，选择 gh-pages 分支和 root 目录。
• 点击 保存。

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

🌐 Once the web app is published and the GitHub Pages configuration is set, a GitHub Action will deploy your website. You can monitor its progress by navigating to your repository's Actions tab. Upon completion, your web app will be available at the URL http://username-on-github.github.io/repo-name.

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

🌐 For subsequent deployments and updates, run the deploy command and the GitHub Action will start automatically to update your web app.