使用 Webpack 发布网站

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

¥Install the Netlify CLI by running the following command:

为单页应用配置重定向。

¥Configure redirects for single-page applications.

如果你的应用实现任何导航，则需要配置 Netlify 将请求重定向到单个 web-build/index.html 文件。这可以在 Netlify 中通过创建 ./public/_redirects 文件并将所有请求重定向到 /index.html 来完成。

¥If your app implements any navigation, you'll need to configure Netlify to redirect requests to the single web-build/index.html file. This can be done in Netlify by creating a ./public/_redirects file and redirecting all requests to /index.html.

在 web-build 目录中导航并运行以下命令以创建具有以下规则的 _redirects 文件：

¥Navigate inside the web-build directory and run the following command to create _redirects file with following rule:

/*    /index.html   200

如果修改此文件，则必须使用 npx expo export:web 重建项目，以将其安全地复制到 web-build 目录中。

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

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

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

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

¥You will see a URL that you can use to view your project online.

安装 Vercel CLI。

¥Install the Vercel CLI.

为单页应用配置重定向。在应用的根目录下创建 vercel.json 文件并添加以下内容：

¥Configure redirects for single-page applications. Create a vercel.json file at the root of your app and add the following:

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

部署网站。

¥Deploy the website.

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

¥You will 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 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 have not pushed to GitHub yet, follow GitHub's guide to add an existing project to GitHub.

登录 放大控制台 并选择现有应用或创建新应用。授予 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.

添加你的存储库，选择分支，然后选择连接单一存储库？输入应用 dist 目录的路径并选择下一步。

¥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.

首先在项目中初始化一个新的 git 存储库。如果这已经完成，请跳过此步骤。

¥Start by initializing a new git repository in your project. If this is already done, skip this step.

如果没有，那么你需要在项目的根目录中运行以下命令：

¥If not then you'll want to run the following command in your project's root directory:

将 GitHub 存储库添加为本地 git 存储库中的 remote。

¥Add the GitHub repository as a remote in your local git repository.

运行上述命令使 git 知道你要将源代码推送到哪个存储库。它还使 gh-pages 包（在下一步中安装）知道你想要将应用部署到哪里。

¥Running the above command makes git know to which repository you want to push your source code. It also makes the gh-pages package (installed in the next step) know where you want to deploy your app.

在项目中将 gh-pages 包安装为 dev-dependency：

¥Install the gh-pages package as a dev-dependency in your project:

配置项目的 package.json 以进行 Web 托管。首先添加 homepage 属性。将其值设置为字符串 http://{username on GitHub}.github.io/{repo-name}。

¥Configure your project's package.json for web hosting. Start by adding a homepage property. Set its value to the string http://{username on GitHub}.github.io/{repo-name}.

例如，如果 GitHub 用户名为 dev，GitHub 存储库为 expo-gh-pages，则 homepage 属性的值如下：

¥For example, if a GitHub username is called dev and the GitHub repository is expo-gh-pages, the following will be the value of the homepage property:

{
"homepage": "http://dev.github.io/expo-gh-pages"
}

在同一文件中，通过添加 predeploy 和 deploy 属性来修改 scripts 属性。每个都有其自己的值，如下所示：

¥In the same file, modify the scripts property by adding predeploy and deploy properties. Each has its own value as shown:

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

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

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

现在，你可以通过在 package.json 中设置为 homepage 的 URL 访问你的 Web 应用。

¥Your web app is now available at the URL you set as homepage in your package.json.

当你将代码发布到存储库时，例如：gh-pages，它将创建代码并将其推送到你的存储库中的分支。但是，该分支将包含你的构建代码，而不是你的开发源代码。

¥When you publish code to your repository, for example: gh-pages, it will create and push the code to a branch in your repo. This branch will have your build code, however, not your development source code.

使用 Firebase 控制台 创建一个 Firebase 项目，并按照这些 instructions 安装 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:

当询问公共路径时，请确保指定 web-build 目录。此外，当提示“配置为单页应用（将所有 URL 重写为 /index.html）”时，选择“是”。

¥When asked about the public path, make sure to specify the web-build directory. Also, when prompted Configure as a single-page app (rewrite all urls to /index.html), select Yes.

在 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: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"
          }
        ]
      }
    ],
  }
]