react 开发部署

发布于 2月23日  约 6 分钟

一、开发

个人之前也粗略看过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创建项目后,就会生成如图的目录结构:

1.png

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

3、使用css预编译

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

npm run eject

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

6.png

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

4、本地运行

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

2.png

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

3.png

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

4.png

二、线上部署

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

1、服务器环境安装

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

2、安装依赖

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

3、编译

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

5.png

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; }

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

阅读 377发布于 2月23日

推荐阅读
目录