腾讯云送了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. Voyager的路由

    修改默认的后台登录路由 打开web.php,把prefix值改为你想设置的值,如back: Route::group(['prefix' => 'back'], function () { Vo ...

  2. Git下的gitignore规则介绍

    匹配模式前/代表项目根目录 匹配模式最后加/代表是目录 匹配模式前加!代表取反 (忽略文件夹,但不忽略文件夹下的某个文件) *代表任意个字符 ? 匹配任意一个字符 **匹配多级目录 node_modu ...

  3. leetcode-14-basic-breadthFirstSearch

    BFS: breadth first search 107. Binary Tree Level Order Traversal II 解题思路: 本来我是用map<int,int>存所有 ...

  4. poj-1011 sticks(搜索题)

    George took sticks of the same length and cut them randomly until all parts became at most 50 units ...

  5. Latex:插入伪代码

    *本文属于转载. *转载链接:https://blog.csdn.net/lwb102063/article/details/53046265 目录 clrscode algorithm algori ...

  6. Git命令大总结(纯手办)

    Git完整命令手册地址:http://git-scm.com/docs PDF版命令手册地址:github-git-cheat-sheet.pdf 1.git config -l查看全局用户信息配置 ...

  7. Linux学习-核心与核心模块

    谈完了整个开机的流程,您应该会知道,在整个开机的过程当中,是否能够成功的驱动我们主机的硬 件配备, 是核心 (kernel) 的工作!而核心一般都是压缩文件,因此在使用核心之前,就得要将他解 压缩后, ...

  8. InnoDB Redo Flush及脏页刷新机制深入分析

    概要: 我们知道InnoDB采用Write Ahead Log策略来防止宕机数据丢失,即事务提交时,先写重做日志,再修改内存数据页,这样就产生了脏页.既然有重做日志保证数据持久性,查询时也可以直接从缓 ...

  9. 自建NAS如何使用大于2TB的硬盘(从分区开始)

    目录 自建NAS如何使用大于2TB的硬盘(从分区开始) 对分区进行格式化 挂载到某一目录(需设置开机自动挂载) 上传文件测试: 补充 自建NAS如何使用大于2TB的硬盘(从分区开始) 需求说明: 自建 ...

  10. zuul sample

    https://github.com/kakawait/uaa-behind-zuul-sample/ 1.参考资料 项目:https://github.com/kakawait/uaa-behind ...