如何在 Netlify 上手动部署 React 和 TypeScript 项目

在本教程中,我将教你如何使用 Vite 在 Netlify 上手动部署 React 和 TypeScript 项目。我将向你展示一些快速简单的步骤,让你的项目能够立即运行。

要跟着本教程操作,有几个先决条件:

  1. 一个现有的 React 和 TypeScript 项目,使用 Vite 构建,并且你想要部署它。
  2. Visual Studio Code(VSCode)编辑器或其他代码编辑器,比如 Sublime。
  3. 可选:你可以只使用命令行/终端,而不是你代码编辑器的内置终端。
  4. 一个已经登录的现有 Netlify 账户。

让我们开始我们的部署吧!

(本文视频讲解:java567.com)

期望的结果

你将会手动在 Netlify 上部署你的项目,重命名你在该平台上的网站,并且能够获得你项目的在线版本。

如何部署你的 React 和 TypeScript 项目

1. 在 VSCode 中打开你现有的项目

在你选择的代码编辑器中打开你的项目。

2. 构建项目

在 VSCode 中打开终端,使用以下代码来构建你的项目:

npm run build

这应该会在你的根目录下生成一个 dist 文件夹,其中包含你项目的被压缩版本。

fig-2-0图 2.0 在终端中运行项目,创建项目结构中的 dist 文件夹。

3. 将 Dist 文件夹拖放到 Netlify 中

在 Netlify 的团队概览中,点击“添加新站点”按钮。它应该有三个选项:

  1. 导入现有项目
  2. 从模板开始
  3. 手动部署

选择第三个选项手动部署。

fig-3-0图 3.0 点击“添加新站点”按钮会显示三个选择项。选择“手动部署”。

它应该会带你到下面图片所示的页面:

fig-3-1图 3.1 选择手动部署时的拖放视图。

点击页面并导航到你项目的文件路径。

将之前在项目中生成的 dist 文件夹上传到 Netlify。

fig-3-2图 3.2 导航到项目文件夹并将 dist 文件夹上传到 Netlify。

项目部署需要几秒钟或几分钟的时间。

一旦部署成功,你将看到一个类似下面的页面。默认情况下,它会给你的站点 URL 一个随机生成的子域名。例如,在我的情况下,它是 delightful-pie-bba293

fig-3-3图 3.3 部署成功。

你的站点名是 Netlify 域的子域名。

https://<你的站点名>.netlify.app

4. 重命名你的站点

点击左侧边栏中的“站点配置”。

在站点详细信息下的“站点信息”中,点击“更改站点名称”按钮。

fig-4-0图 4.0 查看站点配置下的站点详细信息。

这将弹出一个窗口来更改你的站点名称。

将你的站点名称更改为你喜欢的任何名称:

fig-4-1-1图 4.1 更改你站点的名称。

返回到站点概述,你可以在项目名称下方找到你站点的 URL。你的站点 URL 就在你项目名称的正下方。

figure-4-2图 4.2 站点概览中你可以找到你站点的 URL。

点击 URL 查看你的站点!

fig-4-3-1图 4.3 从新创建的 URL 查看我的站点。

结论

现在,你的项目已经有了在线版本,并且你可以在 Netlify 上手动部署它们。

为了添加自定义域名还有额外的步骤,但我们在本教程中不涉及。

这也让你在简历、作品集网站或其他地方更容易地引用你的项目。

感谢你阅读本文,祝你编码愉快! ????

(本文视频讲解:java567.com)

上一篇:http 3.0 QUIC 方案的原理解析


下一篇:wordpress建网站主题案例推荐