腾讯云送了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项目的打包与部署到腾讯云的更多相关文章

  1. 创建Django项目并将其部署在腾讯云上

    这段时间在做scrapy爬虫,对爬出来的数据基于Django做了统计与可视化,本想部署在腾讯云上玩玩,但是因为以前没有经验遇到了一些问题,在这里记录一下: 首先说下Django的创建与配置: 1. 创 ...

  2. 怎样将本地web数据库项目部署到腾讯云服务器上?

    怎样将本地web数据库项目 部署到腾讯云服务器上? 1.本地计算机的工作: 1.1用eclipse或者myeclipse做好一个web项目,可以只做一个数据库的增删改查,本地部署到Tomcat服务器, ...

  3. 怎样将本地web项目部署到腾讯云服务器上?

    怎样将本地web项目部署到腾讯云服务器上? 1.本地计算机的工作: (1).用eclipse新建一个web项目,然后在webcontent下新建一个index.html,然后在本地部署到Tomcat服 ...

  4. React项目的打包

    1.create-react-app 来自Facebook官方的零配置命令行工具.create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+E ...

  5. 小白从零开始阿里云部署react项目+node服务接口(一:阿里云服务器)

    准备阿里云服务器,并安装系统 如果没用自己服务器可以购买一个 https://www.aliyun.com/minisite/goods?userCode=x7i5glgc 初级购买一个1核2G的主机 ...

  6. 把 nodejs koa2 制作的后台接口 部署到 腾讯云服务器

    我 使用 nodejs koa2框架 制作后端接口, 现在将nodejs koa2 部署到服务器 koa2项目 实现 接口 可以看我的 这篇文章: 简单实现 nodejs koa2 mysql 增删改 ...

  7. war包部署到腾讯云中报404的排错经历

    项目完成了部分功能,需要把项目放到公网上,方便演示讨论.本来以为挺简单的,直接将war包放到腾讯云服务器tomcat中,结果报错404,第一次碰到这种情况,于是想办法解决,花了一天的时间,终于解决了问 ...

  8. 将禅道部署到腾讯云linux 上

    部署环境 :linux(腾讯云),用到了 xshell   FileZilla 使用禅道集成环境lampp直接部署 1.首先下载 lampp j集成环境包.https://sourceforge.ne ...

  9. Hexo博客部署到腾讯云服务器全过程(Nginx,证书,HTTPS),你要的这里都有

    背景 说来也惭愧,博客已经搭建很久了,一直免费的部署在 Coding 和 Github Pages 上,前者迁移到腾讯云 Serverless,导致原有的配置始终有问题,没时间仔细研究,刚好腾讯服务器 ...

随机推荐

  1. FTP服务-实现vsftpd虚拟用户

    前几篇介绍了基础,这篇将具体实现几个案例 实现基于文件验证的vsftpd虚拟用户,每个用户独立一个文件夹 1.创建用户数据库文件 vim /etc/vsftpd/vusers.txt qq cento ...

  2. how to setting a i2c driver

    How to instantiate I2C devices============================== Unlike PCI or USB devices, I2C devices ...

  3. HDU - 1465 不容易系列之一(错排)

    HDU有个网名叫做8006的男性同学,结交网友无数,最近该同学玩起了浪漫,同时给n个网友每人写了一封信,这都没什么,要命的是,他竟然把所有的信都装错了信封!注意了,是全部装错哟! 现在的问题是:请大家 ...

  4. 数学基础:HDU2802-F(N)(寻找循环节)

    F(N) Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...

  5. C指针问题

    <!DOCTYPE html> 多级c指针传值问题 /* GitHub stylesheet for MarkdownPad (http://markdownpad.com) / / Au ...

  6. SMP IRQ Affinity

    转:非常有用的方法,调式神器 SMP IRQ Affinity Background: Whenever a piece of hardware, such as disk controller or ...

  7. HDU 4729 An Easy Problem for Elfness 主席树

    题意: 给出一棵树,每条边有一个容量. 有若干次询问:\(S \, T \, K \, A \, B\),求路径\(S \to T\)的最大流量. 有两种方法可以增大流量: 花费\(A\)可以新修一条 ...

  8. 自己做一款简易的chrome扩展--清除页面广告

    大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...

  9. python中用exit退出程序

    在python中运行一段代码,如果在某处已经完成整次任务,可以用exit退出整个运行.并且还可以在exit()的括号里加入自己退出程序打印说明.不过注意在py3中要加单引号或双引号哦!

  10. 常见python快捷键

    http://www.cnblogs.com/toutou/p/4778818.html Ctrl+/注释(取消注释)选择的行 Shift + Enter开始新行 Ctrl + Enter智能换行 T ...