Linux使用node.js部署react.js到腾讯云

最近在学习react.js的相关内容,为了怕以后忘记,就简单地写一下做个笔记。

准备

react.j的项目(webStorm);
腾讯云服务器;
FileZilla(文件传输);

1、项目打包

在webStorm当中的控制台输入如下的命令
这里写图片描述

npm build run 

打包项目,此时会在目录结构下面生成一个build的目录

这里写图片描述

2、把打包的build文件上传至服务器

此处我上传的位置是腾讯云下的/root/react目录(这个目录随便指定)

这里写图片描述

可以看到打包的文件已经成功上传

3、在服务器上安装node.js 和npm工具

因为我们的项目是需要使用到node.js和npm,因此我们要在腾讯云的服务器上面安装它们(放心,还是这里还是比较简单的,百度一下就能找到)

这里给出一个传送门,大家按照里面的安装就可以了(有问题可以私信或留言,我每天早上都会来瞄一眼的)

……好吧,我本来我是偷懒直接给传送门的,我后台发现一些细节上还是有区别的,所以还是自己老老实实写一下吧

3.1部署Node.js

(1)下载node.js

下载的时候注意一下自己Linux的版本情况

英文网址:https://nodejs.org/en/download/

中文网址:http://nodejs.cn/download/

(2)把下载的包通过FileZilla上传到服务器的/root/目录下

然后把下载下来的压缩包解压,然后通过软连接变为全局

① tar -xvf   node-v6.10.0-linux-x64.tar.xz   

② mv node-v6.10.0-linux-x64  nodejs 

③确认一下nodejs下bin目录是否有node 和npm文件,如果有执行软连接,如果没有重新下载执行上边步骤;

版本名称根据自己的下载的包来更改

(3)建立软连接,变为全局变量

  ①ln -s /root/nodejs/bin/npm /usr/local/bin/ 
  ②ln -s /root/nodejs/bin/node /usr/local/bin/

(4)检测node.js是否变为全局

在Linux命令行node -v 命令会显示nodejs版本,如图所示为大功告成
这里写图片描述

【参考-传送门】
在Linux系统安装Nodejs 最简单步骤

3.2部署npm

很简单,没啥坑
linux下安装NPM管理工具

4、安装 npm server

关于server是npm的一个组件,它能够直接通过一行命令就使你的项目发布在网络,而且提供了简洁的接口去监听整个目录的变化。

serve官网介绍

npm install -g serve

这里写图片描述

可以看到下面显示了一句 +serve@6.1.0就说明我们的serve已经安装好了

接下来我们来到这个目录

这里写图片描述

在这个目录下我们输入如下命令启动我们的项目

serve -s build 

结果却得到了:
这里写图片描述

奇怪明明我们已经下载serve的包,但是运行命令却找不到它,这是为什么呢?

其实有点Linux知识的下伙伴很快就能发现,这是因为我们没有把serve的命令加入到Linux的环境变量当中,不信的话你可以试试看下面这条命令:

/root/nodejs/lib/node_modules/serve/bin/serve.js build

这里写图片描述

从这里就可以发现server这个命令实际上是依赖于/root/nodejs/lib/node_modules/serve/bin/serve.js这个js文件

那么难倒我们每次运行项目都要打这么长一大串的东西吗?!

当然不是,我们只需要将这个serve.js文件所在的路径设置为环境变量即可

linux查看和修改PATH环境变量的方法

然后我们就可以直接通过如下命令启动:

这里写图片描述

serve.js build

然后通过通过腾讯云的公网地址——http://公网ip:5000 去访问我们的项目
【参考】
linux系统服务器下如何部署并运行react应用?

到此,项目就成功部署了。

如果还有什么问题欢迎留言交流~

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值