react 开发部署

1、开发

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

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

一、建立项目

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

若是你本地没有全局安装create-react-app，须要用npx

npx create-react-app 项目名

若是你本地全局安装了，就能够直接使用

create-react-app 项目名

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

二、项目目录结构

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

能够根据我的的习惯灵活组织项目结构，如加入路由、redux等。

三、使用css预编译

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

npm run eject

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

具体修改哪些地方能够百度下，配置起来仍是比较麻烦的，因此对新手不是那么友好。

四、本地运行

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

由于每次启动的端口都会被随机，不是很方便，所以你能够修改固定的端口。react要修改默认端口，须要修改scripts目录中的start.js，一样create-react-app建立的项目默认是没有scripts目录的，若是要生成scripts目录，一样须要执行npm run eject命令。执行完命令后才会暴露出这个目录，而后找到start.js里面的端口配置：

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

2、线上部署

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

一、服务器环境安装

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

二、安装依赖

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

三、编译

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

四、运行

运行分两种方式，一种是把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; }

到这里就皆大欢喜了，页面跑起来了！固然，若是你也是这么作的，可是任然有问题也不要灰心，能够仔细找找问题。~~~~