腾讯云送了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. LeetCode1089复写零

    问题: 给你一个长度固定的整数数组 arr,请你将该数组中出现的每个零都复写一遍,并将其余的元素向右平移. 注意:请不要在超过该数组长度的位置写入元素. 要求:请对输入的数组 就地 进行上述修改,不要 ...

  2. destoon 多表联合查询时出现解析错误,parse_str函数解析错误

    数据库前缀  wb_ 标签 ,调用文章时获取评论数量 <!--{php $tags=tag("table=article_24 a left join wb_comment_stat ...

  3. mysql替换表中某字段的某值

    UPDATE  `cases`  SET  `case_desc` = replace(`case_desc`, 'src="//tuku-assets.m.jia.com/assets/i ...

  4. JQuery 在线编辑器和手册

    JQuery 在线编辑器 JQuery 在线编辑器 JQuery 菜鸟教程 手册 JQuery 菜鸟教程 手册

  5. 剑指Offer(书):不用四则运算做加法

    题目:写一个函数,求两个整数之和,不得使用四则运算位运算. package com.gjjun.jzoffer; /** * 写一个函数,求两个整数之和,不得使用四则运算 * * @author gj ...

  6. LeetCode(120) Triangle

    题目 Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacen ...

  7. ACM Changchun 2015 L . House Building

    Have you ever played the video game Minecraft? This game has been one of the world's most popular ga ...

  8. Spring boot 中Spring data JPA的应用(一)

    最近一直在研究Spring Boot,今天为大家介绍下Spring Data JPA在Spring Boot中的应用,如有错误,欢迎大家指正. 先解释下什么是JPA JPA就是一个基于O/R映射的标准 ...

  9. NPM包的安装及卸载

    NPM全名:node package manager,是node包管理工具,负责安装.卸载.更新等.新版的NodeJS已经集成了npm.所以装好NodeJS的同时,npm也已经装好了! 可以用cmd命 ...

  10. Selenium WebDriver- 操作 IFrame 中的页面元素

    #encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...