react 开发部署

一、开发

个人之前也粗略看过react的文档，但是程序员最怕的就是没有项目实操，看完后一段时间就全忘了，但是现在市面上react的使用又很多（我太难了）。最近因为疫情只能呆在家里，刚好利用这段时间搞一搞。当然也是粗略的搞，做完一个大屏展示后，发现react上手确实比vue要难点。react没有vue一样的模板语法，react更接近原生js的操作，而且配置项也比较多。

这篇文章把我开发中遇到的一些坑记录下来，方便以后查询

1、创建项目

直接利用react的脚手架进行创建，这里又两种方式:

如果你本地没有全局安装create-react-app，需要用npx

npx create-react-app 项目名

如果你本地全局安装了，就可以直接使用

create-react-app 项目名

个人建议先在本地全局安装create-react-app命令，因为使用npx安装的时候，是直接从服务器上去获取的，不是很稳定；本地安装后，要稍微快点。

2、项目目录结构

利用create-react-app创建项目后，就会生成如图的目录结构：

可以根据个人的习惯灵活组织项目结构，如加入路由、redux等。

3、使用css预编译

个人偏向less，但react默认不支持less，所以需要配置less-loader，但是我把所有的目录看了一遍，发现不知道在什么地方配置（要死了），后面百度了下，发现create-react-app创建的项目默认是没有config目录的，需要执行npm run eject才能暴露出来。(尴尬)

npm run eject

然后打开config目录中的webpack.config.js进行修改

具体修改哪些地方可以百度下，配置起来还是比较麻烦的，所以对新手不是那么友好。

4、本地运行

本地运行很方便，直接输入npm start命令就会开启一个本地服务器，并自动打开浏览器，react本地服务器默认端口3000，如果端口被占用，就会随机分配一个端口：

因为每次启动的端口都会被随机，不是很方便，因此你可以修改固定的端口。react要修改默认端口，需要修改scripts目录中的start.js，同样create-react-app创建的项目默认是没有scripts目录的，如果要生成scripts目录，同样需要执行npm run eject命令。执行完命令后才会暴露出这个目录，然后找到start.js里面的端口配置：

修改完成后重新执行npm start，就会在指定端口启动

二、线上部署

线上部署的时候遇到的问题就比较头痛了，每台服务器的情况不一样，你的问题也许别人没遇到过，别人给的答案可能根本就不能解决你的问题，只能按实际情况来。

1、服务器环境安装

首先确保你的服务器上安装了node，怎么安装可以网上找下，有很详细的文章说明，当然要求你懂点linux命令。

2、安装依赖

将本地处理好的代码放到服务器上，这里记得执行npm install命令来安装依赖，在项目的目录中执行npm install命令，node会根据package.json中的内容来安装依赖。

3、编译

这一步也不会有什么问题，因为服务器上是不能直接用npm start来运行，涉及到一些资源的路径问题。所以需要先执行npm run build命令来编译文件。编译成功后会生成一个build目录，里面就是编译过后的文件：

4、运行

运行分两种方式，一种是把build目录拷贝到nginx对应的目录中，或者用nginx代理到build目录，这中方式比较简单；第二种方式是用serve -s build来启动服务，然后用nginx代理到react服务，这里我遇到了问题：

安装了serve命令后，执行serve -s build时提示命令不可用

这个问题困扰了整整一个上午，网上查资料有几种说法，有说需要设置package.json中的homepage，我照着设置了，但是任然无法解决；有说是因为node版本太低的原因，所以我想升级node版本，于是我安装了n命令，结果发现n命令也无法使用。

到这里我打开明白了不是node的原因，问题应该在服务器上，终于我找到了一篇文章说是因为node的环境变量问题，需要修改/etc/profile文件
vim /etc/profile
然后在文件最后加上
export PATH="$PATH:/usr/local/nodejs/bin"
/usr/local/nodejs/bin是你的nodejs安装目录，然后执行让变量生效的命令
source /etc/profile
然后重新安装serve命令
npm install -g serve
成功后，执行
serve -s build
就可以正常启动了

但是，这个时候你不太好访问，需要在nginx中添加代理，找到nginx的安装目录，然后找到nginx.conf文件添加代理：
location / { proxy http://127.0.0.1:5500; }

到这里就皆大欢喜了，页面跑起来了！当然，如果你也是这么做的，但是任然有问题也不要灰心，可以仔细找找问题。~~~~