linux部署前端react项目

 

一、配置linux环境

1、安装node和npm

1）在node官网下载对应node安装包：http://nodejs.cn/download/

      可以通过命令：uname -a   查看当前系统内核；

      也可通过命令：wegt +node下载地址（没用这个，可自行百度）。

2）下载之后上传到服务器，然后创建node目录，解压安装node

tar xvf node-v12.13.0-linux-x64.tar.xz #解压
mv node-v12.13.0-linux-x64 nodejs #改短名

    

cd /nodejs/bin  #进入目录
./node -v  #查看node版本

 

      如果查看node版本时提示找不到GLIBCXX和GLIBC版本，需升级对应版本库（可自行百度）。

3）配置软链接

      需要创建软链接，以便全局使用

ln -s /usr/local/nodejs/nodejs/bin/node /usr/local/bin/node
ln -s /usr/local/nodejs/nodejs/bin/npm /usr/local/bin/npm

    执行完此命令后可通过  node -v和npm -v查看相应版本信息

4）配置node环境变量

划重点：后面用serve -s部署项目时，会找不到指令

进入配置文件 

vi /etc/profile

按 i 键进入编辑模式，进入文件末尾添加：

export NODE_HOME=/usr/local/nodejs/nodejs/bin
export PATH=$NODE_HOME:$PATH

然后按 ESC 键 ，在控制台输入:wq，回车保存退出。

使配置文件立即生效

sourse /etc/profile

5）安装serve

npm install -g serve   

部署react项目时需要用到此命令

6）安装react脚手架

npm install -g create-react-app

二、打包、部署react项目

1、打包项目

我们是用creat-react-app创建的前端项目，在控制台使用如下命令可打包项目，项目根目录会生成build文件夹

npm run build

将文件夹打包发送至linux服务器，解压。

然后记录build文件夹，使用如下命令启动项目

serve -s

到这步之后访问不成功，百思不得其解，欢迎大家吐槽，顺便告诉我怎么玩。

三、其他部署方法

经同事测试，可以将build文件夹放在tomcat里webapps下的ROOT文件夹中，然后需要将build文件夹的权限修改成可读可写可执行

chmod 777  build

然后直接启动tomcat即可访问项目。