如何在 Netlify 上部署简单的前端无服务器（静态）React 应用程序

Netlify 是最受欢迎的托管服务之一，专门为 Web 应用程序和静态网站托管无服务器服务。这是一个可将生产力提高四倍的 Web 开发程序。通过统一现代解耦 Web 的元素，从本地开发到高级边缘逻辑，Netlify 为实现更高性能、更安全和可扩展的网站和应用程序提供了一条更快的途径。因此，可以毫不夸张地说，它是目前用于托管可能有也可能没有专用数据库或后端的前端 React 应用程序的最佳服务之一。

此任务的先决条件：

• 在您的计算机上安装 node.js。
• 在您的计算机上安装 git。
• 一个 Github 帐户。（用于方法 2）
• 一个 Netlify 帐户。
• 像 VS 代码这样的 IDE。

现在我们将使用以下步骤创建一个虚拟的 React 应用程序。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

虚拟 React 应用程序项目结构

这就是新创建的 React 应用程序的结构。正如你所看到的，React 是用户友好的，它创建了一个虚拟模板供我们使用，以便我们可以轻松地进行更改和添加更多的 javascript 组件。您可以轻松创建一个简单的计算器应用程序或石头剪刀布，而无需创建节点服务器，这就是无服务器（静态）应用程序或网站的意义。

在这里，我们应该只关注其中两个已创建的文件，即App.js和index.js 。 App.js文件被称为我们的默认组件，它将在我们未来可能创建的所有其他组件中首先执行。

App.js

import logo from './logo.svg';
import './App.css';
  
function App() {
  return (
    

      

        
        

          Edit src/App.js and save to reload.
        
  
        
          Learn React
        
      
    
  );
}
  
export default App;

index.js是Netlify在部署时首先读取的文件。因此， App.js组件已被传递给index.js ，并在ReactDOM.render函数中呈现。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);
  
// If you want to start measuring performance
// in your app, pass a function to log results
// (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

在 localhost:3000 上运行的虚拟应用程序

现在我们将看到如何在 netlify 上部署我们上面的 create react 应用程序。执行此任务主要有两种方法：

方法 1：使用 netlify-cli（在某些情况下可能不起作用）。下面是分步实现：

第 1 步：打开终端并运行此命令，

npm run build

注意：此命令将为我们的应用程序创建一个生产版本，然后可以由 Netlify-cli 部署。

创建生产版本

第二步：安装依赖，

npm install --save-dev netlify-cli -g

安装 netlify-cli 依赖项

第 3 步：首先我们需要在 Netlify 中初始化一个项目，因此运行以下命令：

netlify init

在这里，选择Create and configure a new site 。

在这里，如果您没有项目，则需要创建一个，否则使用之前创建的一个。我正在使用我之前创建的项目“MyProject”。

您将被要求提供站点名称。给出站点名称后，将创建站点 URL，但仍未部署。

第 4 步：现在我们将使用以下命令部署应用程序。

netlify deploy

运行命令后部署站点

现在我们使用之前创建的 URL，打开我们部署的站点。

使用方法 1 创建的站点 URL： https://hellofriend-v2.netlify.app

方法二：使用github仓库部署应用（首选方法）。下面是分步实现：

第 1 步：在默认浏览器上打开 github 并登录到您的帐户。

点击左上角的“新建”

第 2 步：选择“新建存储库”。在存储库创建面板中，为存储库命名并选择可见性为“私有”。

存储库创建面板

第 3 步：创建存储库后，导航到您的项目目录并打开 git bash，方法是右键单击并选择“Git Bash Here”选项。

选择 Git Bash

第 4 步：在 git bash 中，按确切顺序键入以下命令。

git init
git add .
git commit -m "first commit"
git remote add origin 
git push origin master

您的应用现在将上传到 Github。

注意： SSH 密钥将在新创建的空存储库的页面上可用。

您的 SSH 密钥位于“快速设置”面板下

第 5 步：现在在您的默认浏览器上访问 Netlify.com。点击“来自 Git 的新站点”

选择“来自 Git 的新站点”

第 6 步：在接下来的页面中，选择 Github 选项。

从下面选择 GitHub

第 7 步：选择您上传应用程序的存储库。

从列表中选择您的存储库

注意：我们选择的存储库是“hellofriend”。

第 8 步：之后，只需单击 Deploy。 Netlify 将开始部署您的应用程序，您将不得不等待几分钟。

单击“部署站点”以开始部署应用程序。

第 9 步：完成后，您可以使用它创建的 URL 查看应用程序。

现场部署正在进行中

站点已部署。使用链接查看应用程序。

部署的应用

注意：我们已将域名更改为“hello-f4iend”。您可以在Netlify 站点设置中自己执行此操作。

在此处查看已部署的站点（使用方法 2）： https://hello-f4iend.netlify.app/

这是一个非常有用的信息，在我看来，每个人都应该拥有，以便他们能够轻松地部署他们的创作。