使用 webpack 通过第三方服务发布 Expo Web 应用的不同方式。
使用 Expo 创建的 Web 应用可以在本地提供服务以测试生产行为。测试阶段结束后,你可以从各种第三方服务中进行选择来托管它。
¥A web app created using Expo can be served locally for testing out the production behavior. Once the testing phase checks out, you can choose from a variety of third-party services to host it.
打包器 | Expo 路由 | API 路由 | 描述 |
---|---|---|---|
webpack | 输出单页应用 (SPA),并在输出文件夹中包含单个 index.html。 |
¥Create a web build
创建项目的 Web 版本是发布 Web 应用的第一步。无论你想在本地提供服务还是将其托管在第三方服务上,你都必须导出项目的所有 JavaScript 和资源。这称为静态打包包。可以通过运行以下命令导出它:
¥Creating a web build of the project is the first step to publishing a web app. Whether you want to serve it locally or host it on a third-party service, you have to export all JavaScript and assets of a project. This is known as a static bundle. It can be exported by running the following command:
运行 webpack export 命令来编译 Web 项目:
¥Run the webpack export command to compile the project for web:
-
npx expo export:web
生成的项目文件位于 web-build 目录中。web 目录中的所有文件也会复制到 web-build 目录中。
¥The resulting project files are in the web-build directory. Any files inside the web directory are also copied to the web-build directory.
如果你对项目进行更改,请重新构建它以用于生产。不要直接编辑 web-build 目录。
¥If you make changes to your project, rebuild it for production. Do not edit the web-build directory directly.
¥Serve locally
使用 服务 CLI 在本地快速测试你的网站在生产环境中的托管方式。运行以下命令来提供静态打包包:
¥Use Serve CLI to quickly test locally how your website will be hosted in production. Run the following command to serve the static bundle:
运行以下命令来服务单页应用:
¥Run the following command to serve the single-page application:
-
npx serve web-build --single
打开 http://localhost:5000
查看你的项目的运行情况。此方法仅适用于 HTTP,因此权限、相机、位置和许多其他内容将不起作用。
¥Open http://localhost:5000
to see your project in action. This method is HTTP only, so permissions, camera, location, and many other things won't work.
¥Server a subfolder
如果你想在子文件夹中提供站点服务,请将其路径添加到 package.json 中,如下所示:
¥If you want to serve your site in a subfolder, add its path to your package.json as shown below:
{
"homepage": "/path/to/subfolder"
}
¥Hosting on third-party services
Netlify 是一个几乎没有任何意见的用于部署 Web 应用的平台。这与 Expo Web 应用具有最高的兼容性,因为它对框架做了很少的假设。
¥Netlify is a mostly-unopinionated platform for deploying web apps. This has the highest compatibility with Expo web apps as it makes few assumptions about the framework.
¥Manual deployment with the Netlify CDN
1
通过运行以下命令安装 Netlify CLI:
¥Install the Netlify CLI by running the following command:
-
npm install -g netlify-cli
2
为单页应用配置重定向。
¥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.
3
通过运行以下命令部署 Web 构建文件夹:
¥Deploy the web build folder by running the following command:
-
netlify deploy --dir web-build
你将看到一个可用于在线查看项目的 URL。
¥You will see a URL that you can use to view your project online.
¥Continuous delivery
当你推送到 git 或打开新的拉取请求时,Netlify 还可以构建和部署:
¥Netlify can also build and deploy when you push to git or open a new pull request:
选择你的 Git 托管服务并选择你的存储库。
¥Pick your Git hosting service and select your repository.
单击“构建你的网站”。
¥Click Build your site.
Vercel 具有单命令部署流程。
¥Vercel has a single-command deployment flow.
1
2
为单页应用配置重定向。在应用的根目录下创建 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": "/"
}
]
}
3
部署网站。
¥Deploy the website.
-
vercel
你现在将看到一个可用于在线查看项目的 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.
¥AWS Amplify Console
AWS Amplify 控制台 提供基于 Git 的工作流程,用于持续部署和托管全栈无服务器 Web 应用。Amplify 从存储库而不是你的计算机部署 PWA,因此你必须使用 GitHub 存储库。在开始之前,在 GitHub 上创建一个新的存储库.
¥The AWS Amplify Console provides a Git-based workflow for continuously deploying and hosting full-stack serverless web apps. Amplify deploys your PWA from a repository instead of your computer, so you must use a GitHub repository. Before starting, create a new repo on GitHub.
1
将 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.
2
将本地 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.
3
登录 放大控制台 并选择现有应用或创建新应用。授予 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.
4
添加你的存储库,选择分支,然后选择连接单一存储库?输入应用 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.
5
检查你的设置并选择保存并部署。你的应用现在将部署到 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.
¥GitHub Pages
GitHub 页面 允许你直接从 GitHub 存储库发布网站。
¥GitHub Pages allows you to publish a website directly from a GitHub repository.
1
首先在项目中初始化一个新的 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:
-
git init
2
将 GitHub 存储库添加为本地 git 存储库中的 remote
。
¥Add the GitHub repository as a remote
in your local git repository.
-
git remote add origin https://github.com/username/expo-gh-pages.git
运行上述命令使 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.
3
在项目中将 gh-pages
包安装为 dev-dependency
:
¥Install the gh-pages
package as a dev-dependency
in your project:
-
yarn add -D gh-pages
4
配置项目的 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"
}
5
要生成应用的生产版本并将其部署到 GitHub Pages,请运行以下命令:
¥To generate a production build of your app, and deploy it to GitHub Pages, run the following command:
-
yarn deploy
现在,你可以通过在 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 hosting
Firebase 托管 是用于 Web 项目的生产级 Web 内容托管。
¥Firebase Hosting is production-grade web content hosting for web projects.
1
使用 Firebase 控制台 创建一个 Firebase 项目,并按照这些 instructions 安装 Firebase CLI。
¥Create a firebase project with the Firebase Console and install the Firebase CLI by following these instructions.
2
使用 CLI,通过运行以下命令登录你的 Firebase 账户:
¥Using the CLI, login to your Firebase account by running the command:
-
firebase login
3
然后,通过运行以下命令初始化要托管的 Firebase 项目:
¥Then, initialize your firebase project to host by running the command:
-
firebase init
这些设置将取决于你构建 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.
4
在 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",
}
5
要部署,请运行以下命令:
¥To deploy, run the following command:
-
npm run deploy-hosting
打开控制台输出中的 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"
}
]
}
],
}
]