React项目的打包与部署到腾讯云
腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法。项目是默认生成的,只是一个页面,但是这个过程中也遇到了不少麻烦与问题。下面来具体梳理下:
create-react-app
来自Facebook官方的零配置命令行工具。create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板,有助于初学者快速上手实践。安装create-react-app的方式也非常简单,可以直接使用 npm 命令进行全局安装。
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
参考链接:http://www.tuicool.com/articles/Qn6ZnqU
打包编译
执行完上述命令,打开本地浏览器,输入localhost:3000,就能看到项目的运行效果。此时是开发模式。
若使用npm run build,代码会被编译到build目录。将整个应用打包发布,自动试用webpack进行压缩与优化。
在项目路径下,敲npm run buil,就出现了build文件夹,同时终端显示这些文字:
d
大致意思是:已经编译好啦。build生成的这些东西要放在服务器root下,可以在pakege.json里,根据绿字里的例子,再重写。
也能让它充当静态的服务器,敲:npm install -g serve,在敲serve -s build,就可以了。
腾讯云
比较坑的一点是,腾讯云设置密码时,字母+数字的组合就可以了,如果非要加上?之类的字符,因为是按住shift才能输入?字符,
登陆时输入的密码会和设置密码不一致,造成无法登陆.....这个问题解决了好久。
第一步:购买腾讯云服务,不多介绍
第二步:下载filezilla,点击文件---->站点管理器,登陆到云服务器上。如图:
登陆好了以后,左边是本地的文件,右边是服务器上的,选择文件夹上传,就能传到服务器上了。
在服务器上,也要配置一下环境的。最基本的是安装node和npm,有很多教程,这里就不赘述了。附上几个博文,感谢原作者的分享:
ubuntu下nodejs安装与版本升级:http://blog.csdn.net/lss_csdn/article/details/52165652
我们把build文件夹传到服务器上去之后,然后在服务器的命令行里,进入build文件夹,直接敲:serve -s,就启动了这个项目。外网也能访问了。
易错点: 要么进入build文件夹后,敲serve -s;要么在build目录的上一级,敲serve -s build。都能使得编译后的react项目正确运行。
如果在build目录的上一级,敲了:serve -s,那么访问localhost:5000时,会出现这样的页面:
相当于把当前目录当做服务器根目录了。
而如果在build里,还敲了serve -s build,因为已经在build里了,所以会出现没有build文件夹的报错:
一些杂项:
本地终端登陆服务器:ssh 用户名@服务器外网名。例如:ssh ubuntu@123.206.92.245
然后输入密码,不回显。注意要安装有ssh和拥有Administrator的权限才能登陆。windows下的ssh配置我用的是这个,一直点下一步就行:
React项目的打包与部署到腾讯云的更多相关文章
- 创建Django项目并将其部署在腾讯云上
这段时间在做scrapy爬虫,对爬出来的数据基于Django做了统计与可视化,本想部署在腾讯云上玩玩,但是因为以前没有经验遇到了一些问题,在这里记录一下: 首先说下Django的创建与配置: 1. 创 ...
- 怎样将本地web数据库项目部署到腾讯云服务器上?
怎样将本地web数据库项目 部署到腾讯云服务器上? 1.本地计算机的工作: 1.1用eclipse或者myeclipse做好一个web项目,可以只做一个数据库的增删改查,本地部署到Tomcat服务器, ...
- 怎样将本地web项目部署到腾讯云服务器上?
怎样将本地web项目部署到腾讯云服务器上? 1.本地计算机的工作: (1).用eclipse新建一个web项目,然后在webcontent下新建一个index.html,然后在本地部署到Tomcat服 ...
- React项目的打包
1.create-react-app 来自Facebook官方的零配置命令行工具.create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+E ...
- 小白从零开始阿里云部署react项目+node服务接口(一:阿里云服务器)
准备阿里云服务器,并安装系统 如果没用自己服务器可以购买一个 https://www.aliyun.com/minisite/goods?userCode=x7i5glgc 初级购买一个1核2G的主机 ...
- 把 nodejs koa2 制作的后台接口 部署到 腾讯云服务器
我 使用 nodejs koa2框架 制作后端接口, 现在将nodejs koa2 部署到服务器 koa2项目 实现 接口 可以看我的 这篇文章: 简单实现 nodejs koa2 mysql 增删改 ...
- war包部署到腾讯云中报404的排错经历
项目完成了部分功能,需要把项目放到公网上,方便演示讨论.本来以为挺简单的,直接将war包放到腾讯云服务器tomcat中,结果报错404,第一次碰到这种情况,于是想办法解决,花了一天的时间,终于解决了问 ...
- 将禅道部署到腾讯云linux 上
部署环境 :linux(腾讯云),用到了 xshell FileZilla 使用禅道集成环境lampp直接部署 1.首先下载 lampp j集成环境包.https://sourceforge.ne ...
- Hexo博客部署到腾讯云服务器全过程(Nginx,证书,HTTPS),你要的这里都有
背景 说来也惭愧,博客已经搭建很久了,一直免费的部署在 Coding 和 Github Pages 上,前者迁移到腾讯云 Serverless,导致原有的配置始终有问题,没时间仔细研究,刚好腾讯服务器 ...
随机推荐
- Linux下查看USB设备信息
首先需要将usbfs挂载一下,然后才能查看.$ mount -t usbfs none /proc/bus/usb$ cat /proc/bus/usb/devices或者在文件(/etc/fsta ...
- jenkins配置邮箱时出错
jenkins配置邮箱时出错: 这有可能是此博客http://www.cnblogs.com/yajing-zh/p/5109517.html在配置jenkins发送邮件时的第4步和第5步中的邮箱不匹 ...
- 有限状态机(FSM)的设计与实现
有限状态机(FSM)是表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.通常FSM包含几个要素:状态的管理.状态的监控.状态的触发.状态触发后引发的动作.本文主要 ...
- python单例模式的几种实现方法
单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...
- Selenium WebDriver-判断页面中某一元素是否可操作
driver.get("http://127.0.0.1/test_enable.html") i1=driver.find_element_by_id("input1& ...
- loadrunner参数化数据分配方法
数据分配方法: 在“Select next row“列表中选择一个数据分配方法,以指示在Vuser脚本执行期间如何从参数文件中取得数据.选项包括”Sequential“.“Random”.“Uniqu ...
- python基础补漏-08-异常处理
try: #正常代码逻辑 ins = raw_input("this is a tast:") print ins+1 except Exception,e: print e -- ...
- Django--------问题:在terminal命令行创建超级用户时入到password时输入为什么没有反应?
首先如果遇到这样的问题不用担心,一般一会儿就可以解决: 其实,输入的时候并不是没有反应,只是你输入的时候命令行没有将你的输入显示出来,关键是输入行对Password:********也不是采用这种方式 ...
- # Linux 命令学习记录
Linux 命令学习记录 取指定文件夹下的任意一个文件,并用vim打开 vi $(ls -l|grep "^-"|head -n 1|awk '{print $9}') 统计给定文 ...
- 【bzoj2819】Nim DFS序+树状数组+倍增LCA
题目描述 著名游戏设计师vfleaking,最近迷上了Nim.普通的Nim游戏为:两个人进行游戏,N堆石子,每回合可以取其中某一堆的任意多个,可以取完,但不可以不取.谁不能取谁输.这个游戏是有必胜策略 ...