Linux使用node.js部署react.js到腾讯云
最近在学习react.js的相关内容,为了怕以后忘记,就简单地写一下做个笔记。
- 准备
- 1项目打包
- 2把打包的build文件上传至服务器
- 3在服务器上安装nodejs 和npm工具
- 1部署Nodejs
- 1下载nodejs
- 2把下载的包通过FileZilla上传到服务器的root目录下
- 3建立软连接变为全局变量
- 4检测nodejs是否变为全局
- 2部署npm
- 1部署Nodejs
- 4安装 npm server
准备
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应用?
到此,项目就成功部署了。
如果还有什么问题欢迎留言交流~
Linux使用node.js部署react.js到腾讯云相关推荐
- 将Hexo同时部署在github和腾讯云开发者平台或Coding初级实践教程
写在前面的话 其实我也是这两天才接触到Hexo,之前是用的wordpress在阿里云上挂着.觉得Hexo好像更符合现在我的审美,so, do it! 嗯前面安装git和node.js我这边就省略掉了. ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 部署SpringBoot项目到腾讯云或其他服务器
参考 https://blog.csdn.net/qq_32483795/article/details/93979382 使用腾讯云的Tencent Cloud Toolkit进行项目部署的时候发现 ...
- 发布react项目到linux服务器,nginx上部署react项目的实例方法
测试项目:react-demo 克隆你的react-demo项目到服务器上(默认使用Github管理我们的项目) 如果需要,请安装项目环境,比如:node.js,yarn等 进入项目目录,执行npm ...
- JavaScript(Vue.js应用+React.js应用)、css及常用解决方案整理
1. JavaScript常用方法: (1).计算百分比(保留两位小数) /*** 计算百分比(保留两位小数)* @param {Number} num 分子* @param {Number} tot ...
- 教你如何辨别网站是用Vue.js还是React.js写的
第一步:找个方式科学上网 第二步:打开chrome应用商店,搜索vue.js devtools或者React Developer Tools 第三部:打开你想要判断的网站,如果是Vue框架写的,那么c ...
- 部署静态页面到腾讯云服务器
提倡用nginx搭建静态服务器, 很简单 1.首先用xshell 或者 finalshell 或者 winSCP 或者 FileZilla xshell下载地址https://xshell.en.so ...
- 详解Linux下通过yum安装Mariadb/MySQL数据库(腾讯云也适用)
1. 安装Mariadb 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB systemctl start mari ...
- 部署web项目在腾讯云当中
一.首先需要去腾讯云 购买一个云服务器,个人可以免费领取一个十五天的体验版. https://cloud.tencent.com/act/free 二.在自己电脑点击开始菜单-> Run,输入& ...
最新文章
- free not return memory
- ThumbProcess.exe错误的解决方法
- vb mysql 字符串转日期_VB常用函数表
- 什么?ES6 中还有 Tail Calls!
- javascript学习之利用DOM和正则表达式判断主流浏览器的类型
- 虚拟机常见的几种上网方式
- java基于springboot教学评价管理系统附源码
- Swift和Object-C的区别和优缺点
- UTF-8与GBK字符之间的转换
- 计算机木材染色 配色技术的应用技术,木材怎么染色?木材染色剂电脑配色方法...
- Android系统裁剪:手把手教你如何进行系统裁剪
- halcon入门之_提取遥控器字符并且写入txt文本
- HDU 4475 Downward paths (推公式)
- Xcode 卡死 解决方法
- Can‘t bind to ‘ngForOf‘ since it isn‘t a known property of ‘xxx‘
- 90后负债100万,零成本创业“卖切糕”,一年收入1100万!
- 程序员如何给孩子取名字?
- LeetBook哈希表专题题解(详解/一题多解)
- PHP中使用SCWS中文分词详解
- 如何在Docker中使用安卓模拟器+Appium
热门文章
- 如何上好计算机应用基础第一课,计算机应用基础(第一课).pptx
- 错误java.lang.reflect_java.lang.reflect.InvocationTargetException
- Jupyter Notebook使用plt.show()输出“Figure size 640x480 with 1 Axes”
- 编译chm格式PHP手册
- 关于keil5出现“NO Browse information available in ‘***‘ “ 问题解决方法
- (一)反向传播算法理解 (Back-Propagation)
- 从效能公式解构研发效能
- kali linux安装中文输入法(ibus)
- 描述Servlet生命周期
- w ndows10系统装机时黑屏,windows10系统登录后进入桌面黑屏如何解决