搭建 React + create-react-app + yarn + nodejs @ CentOS7 的环境(2018版)

首先

以下是关于在CentOS7上安装React开发环境的备忘录。

这是2018年8月底的情况。

操作系统是CentOS Linux release 7.5.1804 (Core),虚拟机是VirtualBox(5.2.16r123759),通过主机只连接适配器。

使用Node.js时无需使用版本控制工具进行设置。

除了最后一步“创建并启动React应用程序”之外,其他步骤都需在根目录下进行操作。

确定Node版本

為了確定要導入的Node版本,我們將查看create-react-app的需求。
https://github.com/facebook/create-react-app
請參考”Creating an App”部分。

节点 >= 6

根据所说的,当然,用create-react-app创建的React应该在上述条件下能够工作。

请查看Node.js截至2018年8月28日的版本和支持状态。
https://github.com/nodejs/Release#release-schedule

6系
6.14.4(2018年8月15日)
终止支持时间:2019年4月

8系
8.11.4(2018年8月15日)
终止支持时间:2019年12月

10系
10.9.0(2018年8月15日)
终止支持时间:2021年4月

需要考虑模块的兼容性等因素,但本次将使用10系列。

安装

安装Nodejs

请根据官方网站的指引,安装Node.js。
https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora

由于使用的是CentOS,因此查看了”Enterprise Linux and Fedora”,并且因为版本号是10,所以执行了下一个脚本。
由于我以root权限进行操作,所以按照官方给出的脚本执行时出现了错误。

(失敗したコマンド)
curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash -

> Your distribution, identified as "centos-release-7-5.1804.4.el7.centos.x86_64", is not currently supported, please contact NodeSource at https://github.com/nodesource/distributions/issues if you think this is incorrect or would like your distribution to be considered for support

由于在根目录下使用sudo命令导致,出现了一个完全不相关的错误信息,让人感到困惑不解。。。

去掉sudo

curl --silent --location https://rpm.nodesource.com/setup_10.x | bash -

执行后成功添加到存储库中。

接下来,执行yum install命令来安装Nodejs。

yum -y install nodejs

安装Yarn

据说最近推荐的启动方式是使用Yarn,您可以使用下面的命令进行安装。
(https://qiita.com/sho7/items/bb564e22a096eaea9877)

npm install yarn -g

安装 Create-react-app

请使用以下命令进行安装。

npm install create-react-app -g

环境设置

打开待机端口

只有在使用虚拟环境时,当从外部连接到React服务器时,在CentOS7上不开放端口的话无法在默认的3000端口上显示页面。

可以通过以下命令打开端口。

# ポートを開放
firewall-cmd --add-port=3000/tcp --zone=public --permanent

# firewallをリロード
firewall-cmd --reload

创建并启动React应用程序。

请先进入要创建项目的文件夹,然后使用以下命令创建模板。

create-react-app my-app

请按照以下步骤启动应用程序。

cd my-app
yarn start

如果服务器成功启动后输出了相关消息,你可以在 http://服务器地址:3000/ 上看到 React 的初始页面。

感谢您的参考。

广告
将在 10 秒后关闭
bannerAds