React项目的打包与部署到腾讯云
来源:互联网 发布:java singleton模式 编辑:程序博客网 时间:2024/06/08 17:22
腾讯云送了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项目的打包与部署到腾讯云
- React项目的打包与部署到腾讯云
- javaweb项目部署到腾讯云上
- Linux使用node.js部署react.js到腾讯云
- java web项目的打包与部署
- 腾讯云部署自己的javaweb项目
- linux的jenkins安装与使用jenkins自动化打包maven项目部署到tomcat
- 将项目部署到腾讯云服务器及相关知识点
- Tomcat+Nginx+Linux+Mysql部署豆瓣TOP250的项目到腾讯云服务器
- 腾讯云服务器的配置与部署(一):云服务器的连接、项目(php与phpMyAdmin)的部署
- 用maven打包dubbo项目并部署到云平台
- 关于react-native项目在android上面的打包部署过程
- maven项目自动打包部署到tomcat
- java WEB项目打包部署到tomcat
- Vue项目webpack打包部署到服务器
- 从Jenkins打包到项目部署
- Eclipse SWT应用程序项目的打包与部署
- Eclipse SWT应用程序项目的打包与部署
- Lintcode 最小子串覆盖
- Android中去掉EditText的下划线
- PCL常用语句
- office技巧(一)——excel如何流畅输入
- Linux系统入门学习:教你在VirtualBox 安装 Ubuntu 15.04
- React项目的打包与部署到腾讯云
- eclipse配置tomcat8.5报错The Apache Tomcat installation at this directory is version 8.5.4. A Tomcat 8.0
- 【职业生涯】6年开发,打算从技术转产品
- 【每天一点linux】说说linux权限管理那点儿事
- tf基础知识
- 线程-对象锁的同步和异步
- linux内存占用分析
- Java二进制的存储与识别
- Hadoop 安装Snappy