『亚马逊云科技产品测评』活动征文｜使用 react + vant 搭建一个租赁平台

本文链接：https://blog.csdn.net/2301_79971855/article/details/134405451

『亚马逊云科技产品测评』活动征文｜使用 react + vant 搭建一个租赁平台

授权声明：本篇文章授权活动官方亚马逊云科技文章转发、改写权，包括不限于在 Developer Centre, 知乎，自媒体平台，第三方开发者媒体等亚马逊云科技官方渠道

前言

平时，我想要使用一下苹果手机，但是我又没有苹果手机，怎么办？
现在是互联网时代，当然有解决办法了，那就是到网上的一些平台去租赁一个。
我平常经常用的一个平台是麦子租赁，它是一个电子类产品的租赁商城。如果我想用什么电子产品，但是自己又没有，就可以到上面去租赁一台电子产品。
使用它的时候，我就想着，我能不能自己打造一个租赁平台？
当然可以，接下来，我们就打造一个自己的租赁平台吧。

前端项目开发

技术栈

前端项目，我是使用react技术栈来开发的，组件库是使用了vant。
这个租赁平台，我打算作为一个移动端来开发。而vant，刚好是一个移动端的组件库，所以就采用vant了。

创建项目

那我们先创建项目吧。
这里我打算使用react官方给的脚手架create-react-app，来创建项目
我们进入到react的官网，然后点击文档，进入到文档页面。
点击右侧菜单栏，创建新的react应用
在这里插入图片描述
官方文档里给出文档说明，我们按照它的说明，去创建项目。
把那行命令复制，到cmd里运行命令

npx create-react-app my-app

运行命令后，按照步骤提示安装即可。
安装的时候，由于需要安装依赖，所以需要等待一会。
项目创建好了，接着，我们引入一下vant组件库。
进入到vant官网
在这里插入图片描述

在快速上手里，官方文档里，给出了提示，告诉我们怎么引入vant组件库
在这里插入图片描述
在cmd里，输入命令

npm i react-vant

安装vant组件库，等待一会，安装完成。

项目开发

项目已经创建好，需要的依赖和组件库也已经安装好了。
接下来，我们就可以开发前端项目了。

路由配置

在routers文件夹里进行路由配置
在这里插入图片描述
我配置了一个根路由，其它路由，是抽离出去，建立一个文件夹来单独管理了。这样，每个路由都有其对应的文件夹，更方便管理。

页面开发

这个租赁平台项目，主要是有4个大的模块：

首页
商品
文章
我的
每个模块里面，又拆分了一些子组件。同时，整个项目，也抽取一些公共组件，比如底部导航栏等。
项目还算有点大，模块和组件也挺多的。就不详细展开介绍了，如果大家感兴趣，后期有时间了，我再单独写一篇文章，来详细介绍项目的开发过程。
我们这里就跳过项目开发的过程，直接跳到项目开发好了的环节。
项目开发好，我们就可以进行项目打包了。因为我们需要把项目打包，然后才可以到服务器进行部署。
在cmd里运行命令

npm run build

项目就开始打包了，等待一会，项目就打包完成了。
注意：在我项目里，配置的打包命令是npm run build。你项目的打包命令，可能不一定是它。
具体是什么，可以查看一下你项目里的配置。

服务器部署

前端项目开发好之后，就可以进行服务器部署了。
要进行服务器部署，首先你得有服务器。随着云服务的推广和普及，现在，我们可以非常方便地就拥有一台云服务器了。
云服务器的厂商有很多，这里我选择了亚马逊云服务器。亚马逊云服务器是亚马逊公司推出的云服务器，大公司推出来的产品，我相信它。
好了，介绍这么多，我们开始到服务器里，部署项目吧。
登录亚马逊云服务器后，进入服务器控制台页面。我们在顶部搜索栏里，搜索EC2。
在这里插入图片描述
我们可以查看到搜索结果，点击EC2，进入EC2的控制台页面。
进入EC2控制台之后，我们点击启动实例按钮。

点击启动实例，进入到实例创建页面

这里，我给实例起了一个名字，叫做myserser。当然，你可以自己起一个别的名字。
下面的操作系统，我选择的是亚马逊的一个linux系统。
对，没错，服务器里我使用的是linux系统。如果你对linux系统不熟悉的话，也可以安装其它系统，比如windows系统。
关于安装其它系统，这里就不介绍了。
下面还有一些其它配置项
在这里插入图片描述
不过这些配置项，我们暂时使用不到，先保持默认即可。如果后面想要修改，还是可以修改的。
不过注意，有一个密钥对，是必须要配置的。一会实例创建好了，我们需要使用这个密钥对去登录的。
点击创建新密钥对按钮
在这里插入图片描述
这里我给密钥对命名为myserver，和我实例名字一样，方便记忆。
点击创建密钥对，密钥对就创建好了。
整个实例的配置项，都配置好了，我们点击右侧的启动实例按钮，就可以把实例启动了。

实例正在创建
在这里插入图片描述
我们等待一会。

实例启动成功了，我们就可以连接实例了，点击中间的连接到实例按钮。

我们选择第一种方式就好了，它是基于浏览器的网页形式，显示命令行窗口的。有了命令行窗口，我们就可以在里面输入命令行，执行命令了。
我们进入到命令行窗口了，和实例建立了连接
在这里插入图片描述
关于服务器部署，这里我使用的是node来部署的。使用node起一个服务，就可以访问我们的网站了。
而使用node起服务，你有很多种选择方式，比如使用原生node写一个服务，也可以使用一些第三方库来帮助我们，快速起一个node服务器。
第三方库有很多，它们的操作方式，也不太一样。这里，我选择的第三方库是express。之所以选择它，是因为它比较方便和好用。
要想使用node，当然得先安装node。
我们输入以下命令，安装node

sudo yum install -y node

输入之后，等待一会，node就安装好了。
接着安装git

sudo yum install git -y

之所以安装git，是因为一会我们要从git仓库，把代码拉下来。
等待一会，git就安装好了。在云服务器，安装这些工具，还是挺快的。
从git仓库拉取代码

git clone https:xxxxx

把你的仓库代码拉下来之后，进入到你的项目里。
我们通过cd命令，进入你的项目文件夹

cd xxx-xx

后面是你的文件夹名称
进去之后，我们需要先安装依赖。这和我们在本地电脑操作是一样的，把项目从git仓库拉下来，安装依赖，才能把项目运行。
执行命令

npm install

等待一会，把项目里的依赖安装好。
接着，我们就可以启动项目了。
执行命令

node index.js

这里，启动node服务，我使用的是8001端口。
在这里插入图片描述
启动之后，我们可以看到下面提示项目启动了。这是我对服务器启动的回调函数里，添加了打印日志才显示。并不是说node服务器启动了，自动就打印这行文字。
项目启动了，此时还不能访问我们的网站。因为对应的端口还没有开放。
我们回到实例的控制台页面
在这里插入图片描述
到实例的安全组里面，配置对应的规则。

我们点击它，进入安全组配置页面