• 腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法。项目是默认生成的,只是一个页面,但是这个过程中也遇到了不少麻烦与问题。下面来具体梳理下: create-react-app  来自Facebook官方的零配置...

    腾讯云送了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项目打包后的启动方法: 我们如何启动该项目呢! 首先我们全局安装live-server插件,live-server插件可以简单创建一个本地服务 npm install -g live-server //全局...
  • 脚手架一键生成react项目,非常方便。先简单记录一下这新建项目的过程。打包1、安装使用npm install -g create-react-app 122、生成新项目create-react-app my-app 12(生成的项目最好不要用驼峰式命名,...
  • react项目打包发布 2020-06-04 12:18:34
    1、打包react项目:npm run build 2、将其放到服务器能够访问的root目录下,如果是root目录下的项目名称文件夹下需要修改访问资源的路径(默认位置为根目录,其修改后的路径为相对路径) 否则控制台报错404,
  • react项目打包部署在服务器上 我们试一试 从0开始 将一个react项目部署在服务器上 还是踩了很多坑的 主要还是因为自己对服务器不是特别精通 所以还是要多多学习 我们的本地系统是windows 云服务器系统是centos...
  • react项目打包优化 2019-08-03 16:19:09
    本文分享react项目打包优化, 项目使用create-react-app创建。不做任何优化时打包体积过大,首页渲染十分缓慢。 使用webpack-bundle-analyzer查看打包chunck的内容,使用方式如下: yarn add webpack-bundle-...
  • react项目打包后运行,在生产环境下 npm/yarn build后 无法运行或者是资源路径出错 . 在开发模式下,package.json下设置 homepage “homepage”:".", 以上设置会将 index.html...
  • 创建一个react项目(报错请传送) creat-react-app app01 创建一个cordova项目((项目名称:android-app app包名:com.test.app app名称:testapp) cordova create android-app com.test.app testapp 添加...
  • react项目如何修改打包 2017-10-09 16:12:05
    react项目如何修改打包
  • 1.React项目创建 npm install -g create-react-app create-react-app myProjectName 创建基于Webpack与ES6的简单项目模板 ...2.React项目打包部署到服务器 npm run build 代码会被编译到build目录...
  • 计划赶不上变化,由于项目的需要,不适用tomcat,使用nginx,于是需要将react项目打包放到nginx下或者放到单独的文件中,通过nginx来做代理访问我们的项目。 安装nginx 于是在本地测试环境中装了一个nginx,安装很...
  • React项目打包与部署 2019-03-15 16:12:13
    打包编译 执行完上述命令,打开本地浏览器,输入localhost:3000,就能看到项目的运行效果。此时是开发模式。 若使用npm run build,代码会被编译到build目录。将整个应用打包发布,自动试用webpack进行压缩与优化...
  • react项目打包编译 2020-06-13 14:08:04
    最近有个项目需要用到react一个前端界面,在网上搜索了一些关于react相关的知识,感觉比较多、而且零散。我虽然是一个后端开发工程师,但之前接触过一些界面开发,比如:jsp、ajax、html、css的还是了解一些,但是...
  • react项目打包遇到的坑 2019-10-17 12:37:51
    package.json文件中加上一个属性:“homepage”:"./" 路由不能正常跳转 原因: 出现这个问题的原因应该是history的模式没有用对了,要想解决这个问题,要把history变成hash模式 解决方法: 把引入路由那里的...
  • 我们是无法直接通过打开 vue 打包好的 dist 目录下的 index.html ,需要我们在本地开启一个服务器进行访问,这里分享一个node 开启本地服务器的方法, 首先我们需要在dist 外层目录新建一个 server.js 文件 var ...
  • 公司做项目,用React开发。组件式开发过程对于程序员来说,层次清晰,十分清爽。打包上线阶段,出现问题: 当发生在新标签打开新网页或者刷新当前页面时(被打开的页面路径都不是首页路径),这时会出现404错误。 ...
  • React项目打包出现的问题 2019-01-25 14:30:00
    项目打包后页面空白不显示 在配置文件package.json中配置一下"homepage":".", 内容显示出来后但是刷新就报错,且页面变成空白 把 import {BrowserRouter as Router} from "react-router...
  • 1、创建一个react项目 $ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app $ npm start 2、修改package文件 添加,“homepage”: " ./" 3、打包react项目 npm run build 4、把build文件...
  • react 项目打包编译 2018-07-17 22:45:09
    然后会得到一个 build文件夹 asset-manifest.json 里面是打包好的各个文件名; { "main.css": "static/css/main.de8768f6.css", "main.css.map": "static/css/main.de8768...
1 2 3 4 5 ... 20
收藏数 22,516
精华内容 9,006