精华内容
下载资源
问答
  • React项目部署踩坑

    千次阅读 2020-05-12 13:21:49
    1、 文件路径问题,在 package.json中增加homepage 2、css中图片路径问题,建议直接用import的引入使用 import bgimg from './images/bg.jpg...3、react-dom.production.min.js:209 Error: Minified React error #152;

    1、 文件路径问题,在 package.json中增加homepage

    在这里插入图片描述

    2、css中图片路径问题,建议直接用import的引入使用

    import bgimg from './images/bg.jpg'
    <div className='login' style={{backgroundImage:`url(${bgimg})`}}></div>
    

    3、react-dom.production.min.js:209 Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=a for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

    react官方说明:https://reactjs.org/docs/error-decoder.html/?invariant=152&args[]=a
    在这里插入图片描述
    意思就是:DocumentTitle 中包含多div标签问题
    我犯贱,在最外层加了个注释
    在这里插入图片描述

    4、BrowserRouter HashRouter,部署项目后刷新页面会出现空白页

    如果用BrowserRouter,部署项目后刷新页面会出现空白页,原因是找不到文件了(可以在后台配置重定向到首页)。BroswerRouter是需要服务端配合的,服务端重定向到首页,BrowserRouter是基于html5的pushState和replaceState的,很多浏览器不支持,存在兼容性问题。故最后选择HashRouter.

    把BrowserRouter 换成 HashRouter就可以解决问题
    在这里插入图片描述

    5、表格渲染问题

    render里面要用return返回,如果省略return,部署的时候会无法执行render里面内容
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 本来计划是将一个React工程部署在自己的Centos虚拟机中,但是因为一些网络和安全问题暂时停止了这个计划,于是就把该项目转移到阿里云服务器中,这篇笔记记载了如何从第一步开始直到浏览器通过IP可以访问你的React...

    本来计划是将一个React工程部署在自己的Centos虚拟机中,但是因为一些网络和安全问题暂时停止了这个计划,于是就把该项目转移到阿里云服务器中,这篇笔记记载了如何从第一步开始直到浏览器通过IP可以访问你的React项目为止。

    1.编译你的React项目

    我的项目是通过create-react-app脚手架创建的,当项目编写完成之后可以执行package.json下面的build脚本就可以了:

    npm run build
    

    注意如果你希望打包之后生成的打包文件只能在项目根目录访问,我们要在package.json里面加一行代码 “homepage”:"."来设定项目的主页。

    package.json

    
      ...
      "version": "0.1.0",
      "private": true,
      "homepage":".",
      ...
    

    build完成之后会发现在项目根目录下多了一个build文件夹,这个是我们后面部署到服务器中需要的文件。

    2.服务器配置

    2.1 购买阿里云服务器

    接下来需要完成服务器端的一些配置了,当然第一步要做的首先是去购买阿里云服务器ECS,这里就不详细阐述了…(一般第一次购买或者节日期间会比较便宜,初学者买入门级一年大概小几百的样子)。

    2.2 安装Nginx服务器软件

    接着建议使用XShell或者Putty进行阿里云服务器的远程登录,具体过程可以自行Google或者百度,过程不复杂。

    然后我们就需要给服务器安装Nginx了,我的是centos环境,如下操作:

    // 1. 下载ngin依赖
    wget  http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
    // 2. 安装依赖
    rpm -ivh nginx-release-centos-7-0.el7.ngx.noarch.rpm
    // 3. 安装nginx
    yum install nginx  
    // 4. 启动并开机自启动
    systemctl start nginx.service  
    systemctl enable nginx.service
    

    如果是ubuntu系统,参考这里:
    安装方法

    最后当你在浏览器输入你的服务器公网IP时候可以看到Nginx的欢迎界面就可以了:

    image

    2.3 上传build文件夹

    之后你可以上传你的build文件夹到你的云服务器中,这里我使用的XFtp进行上传,上传的位置如下图所示:

    image

    2.4 修改Nginx配置文件

    接着我们需要修改配置文件,让外部访问服务器IP时可以直接浏览React的index.html文件。

    首先通过这个命令找到nginx配置文件地方:

    nginx -t
    

    我的返回结果如下:

    nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
    nginx: configuration file /etc/nginx/nginx.conf test is successful
    

    进入该目录
    有两个比较关键的文件/文件夹

    nginx.conf,这是一个主配置文件
    conf.d,这是一个文件夹,里面包含着服务器的独立的配置文件
    

    因此打开conf.d,在里面创建服务器配置文件builder.conf(前缀自己定):

    server {
        listen      80;
        server_name 47.98.xxx.xxx;(自己的服务器IP)
    
        location / {
            root    /usr/project/webbuilder/build;
            index   index.html index.htm;
        }
    }
    
    
    

    配置好之后,重载一下nginx配置

    nginx -s reload
    systemctl stop nginx
    systemctl start nginx
    

    3. 试着访问吧

    接着你可以尝试使用浏览器从公网访问一下你的项目了,若一切正常应该就可以了,至此一切就ok了~

    http://47.98.xxx.xxx
    

    4. 安全组设置

    如果无法访问,很有可能是你的云服务器安全组设置出现了问题,禁止了外网对80端口访问,你可以去控制台-网络与安全-安全组-配置规则中新增一条规则就可以了,具体如下图所示:

    image

    展开全文
  • React项目部署在Tomcat中的方法

    万次阅读 2018-08-15 01:29:43
    之后便走访百度、谷歌,终于找到了项目部署失败的原因,下面将进行一下总结。 部署方法: 使用npm run build将项目打包 把打包后的文件夹中内容放到tomcat中webapps下的Root中 开启服务器访问localhost:8080端口...

    博主辛辛苦苦敲的react代码,结果想部署到Tomcat中一直都无法显示。之后便走访百度、谷歌,终于找到了项目部署失败的原因,下面将进行一下总结。

    部署方法:

    • 使用npm run build将项目打包
    • 把打包后的文件夹中内容放到tomcat中webapps下的Root中
    • 开启服务器访问localhost:8080端口即可以看到你的项目内容

    不放置在Root目录下的坑:

    由于默认path.js【路径:你的react项目名\node_modules\react-scripts\config\path.js】的配置是’/’即对根目录有效,所以如果不放在root下则需要将’/’变成’./’即相对路径有效。(修改代码约在第45行)
    这里写图片描述
    此时你可以通过localhost:8080/项目名 进行访问你的react项目

    展开全文
  • webpack打包react项目部署到nginx上

    千次阅读 2019-12-19 11:26:01
    计划赶不上变化,由于项目的需要,不适用tomcat,使用nginx,于是需要将react项目打包放到nginx下或者放到单独的文件中,通过nginx来做代理访问我们的项目。 安装nginx 于是在本地测试环境中装了一nginx,安装很...

    上篇博客提到将项目放到tomcat下,用于储存静态资源。计划赶不上变化,由于项目的需要,不适用tomcat,使用nginx,于是需要将react项目打包放到nginx下或者放到单独的文件中,通过nginx来做代理访问我们的项目。

    安装nginx

    于是在本地测试环境中装了一个nginx,安装很简单可以到官网下载:http://nginx.org/en/download.html

    我用的是最新的nginx

    安装之后,文件目录如下:

    webpack打包项目

    然后开始使用webpack打包我们的项目,执行

    npm run build

    build的配置在上篇文章中说道了,在package.json中的配置

     "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },

    build之后会在build目录下生成一些文件

    这是一个完整的build目录(当然这个build目录可以调整,修改path的文件就行,具体的可以参考:https://www.jb51.net/article/158194.htm),如果nginx下进行操作,那么我们就不需要为它单独起服务,我是编译后自动放到项目路径下的,可以在nginx中进行路径的配置,我们找到nginx.conf文件添加我们的项目文件路径配置

    nginx配置文件访问路径

    config文件中的server下增加

            root G:\\chenqk\app\React\samp\build;
            index index.html index.htm;
           
            location / {
                    try_files $uri $uri/ /index.html;
            }
            location ~.*\.js$ {
                root    G:\\chenqk\app\React\samp\build\static;
            }
            location ~.*\.css$ {
                root    G:\\chenqk\app\React\samp\build\static;
            }
            if ( $uri ~ /static/(.*)\.js ) {
            rewrite		'/static/(.*)\.(js)' \$1.$2  last;
            }
    
            if ( $uri ~ /static/(.*)\.css ) {
            rewrite		'/static/(.*)\.(css)' \$1.$2  last;
            }

    根路径的配置

    主要配置root和index。root是指向你文件的路径,index指向你的index页面。

    BrowerHistory配置

    第一个location 是在我们前端使用路由的时候,如果用到broswerHistory时,需要增加的配置。

    我们知道,在使用hashHistory的时候是不需要后台服务进行参与的,也就不需要后台进行配置。而当我们使用broswerHistory的时候,我们在浏览器中的每一条url都希望有一个对后台服务的请求,那么他就会向后台去请求资源,当然压缩后的文件在资源请求时是肯定不存在的,所以我们需要通过nginx的配置来将我们的指向到index.html下,所以需要配置一下。详情可以参考:http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

    JS和CSS文件目录配置

    第二、第三个location表示指向我的js和css所在的文件目录,在这里需要注意的是,我的css和js文件实际是在build/static/js以及css文件夹下,

    而它的配置路径却只配置到static下,是因为在使用nginx的时候,访问这个js文件会自己加上js和css对应的文件目录。

    我们来测试一下,修改到js和css路径,这样看起来跟实际的目录是一样的。

            location ~.*\.js$ {
                root    G:\\chenqk\app\React\samp\build\static\js;
            }
            location ~.*\.css$ {
                root    G:\\chenqk\app\React\samp\build\static\js;
            }

    但是,当我们访问项目时,在进行路径跳转和刷新的时候,却会报错要么是404,要么是这个熟悉的语法错误。

    首先,我的代码在本地编译之前测试是没问题的,而编译的过程中也没有报错,既然这样那一般就是路径出现了问题,从这里其实看不到什么问题的。那怎么定位问题呢?

    我们可以找到nginx的日志文件

    其实我们只要看error.log就可以发现路径出现了问题:

    从上面就可以看出,其实他是多了一个css和js目录的,只要在配置中去掉js/css这一层级就行了。

    配置重定向

    第四和第五个则是对于css和js访问时的重定向。就是访问文件目录时,会重定向编译后的文件目录

    在这还有个问题,如果你放到真实的nginx环境中而不是window环境下,就会发现项目是访问不了的,在这里需要注意的时,要将重定向的文件目录符改一下,因为linux下目录符是这样的"/"而不是"\"的。

    至此,一个react项目冲编译到发布就算是摸索着过来了,中间碰到很多坑,不过好在都一个个的解决了。

    关于nginx的配置文件修改。每次修改都需要重新启动一下nginx,具体执行命令

    nginx.exe -s stop                   //停止nginx
    
    nginx.exe -s reload                //重新加载nginx
    
    nginx.exe -s quit                     //退出nginx

    如果在window下可以直接在cmd命令切换到nginx目录执行对应的命令即可。

    展开全文
  • 项目在本地开发时,没有任何问题,部署到服务器上出现了2问题。 问题一:开发的应用是单页面应用,从主页一步一步点击没有问题,一旦刷新或者直接在地址栏输入,都会出现报错,显示的是404,无法找到页面。 问题...
  • Windows下写好的前端react项目部署到服务器上运行 近期我需要将自己写好的react前端项目打包部署到自己搭建的服务器上,为了通过ip加端口号让其他主机可以访问。出现了很问题,下面我将出现的问题以及解决方案列出...
  • react项目部署到Gitpage

    千次阅读 2018-06-04 13:31:53
    然后在git仓库文件夹中新建项目 3.将写完的项目进行build npm run build 4.安装 gh-pages npm install gh-pages --save-dev 5.进入package.json &quot;homepage&quot;: &quot;...
  • 本文重点是建立restframework提供REST的DRF项目,并且完成与REACT的前端交互(加上必要的中间插件) 1、后端的搭建 1、按照官方教程安装相关依赖 http://www.django-rest-framework.org/ sudo pip3 i...
  • React项目部署到本地Nginx服务器上

    千次阅读 2019-07-02 16:19:10
    首先我的项目是一个React+Redux+React-Router的单页应用。 1. 配置package.json 首先配置项目中的package.json,这一步非常非常重要 加上字段 "homepage": "http://localhost:8000/dianping", 这里要重点说明一下这...
  • 一般我们部署前端项目都会自己搭或者租用一服务器然后把项目打包成静态文件后部署到服务器上,再购买一域名通过ip指向具体的服务器地址之后,然后就可以把项目对应的域名提供给别人访问了,如果是公司项目或者...
  • React项目搭建与部署

    2019-01-22 13:52:11
    转载自:... React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。...
  • } #react项目 c:\\html\react\index.html  location /react/ { root c:\\html; index index.html; } #重点 location /static/ { try_files /react$uri /$uri =404; } #error_page 404 /404.html; # redirect ...
  • 329-将react项目打包部署在服务器上

    千次阅读 多人点赞 2019-04-02 11:19:33
    将一个react项目部署在服务器上 还是踩了很坑的 主要还是因为自己对服务器不是特别精通 所以还是要多多学习 我们的本地系统是windows 云服务器系统是centos 那么我们在本地创建一个react项目 执行 create-...
  • 今天小编就为大家分享一篇关于nginx上部署react项目的实例方法,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • React+SpringBoot项目部署

    千次阅读 2018-07-20 14:29:55
    是关键,因为要创建react,最普通的方式就是通过命令create-react-app projectname生成名为projectname的项目,那么idea为了方便大家快速搭建,需要用到reate-react-app中的index.js文件用来创建react应用,所以...
  • react部署

    2019-01-12 14:25:00
    React项目搭建与部署 React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React...
  • react项目: https://cll123456.github.io/tic-tac-toe/ 代码不会上传到gitup的请移交 这里 vue 代码history 和 hash 部署区别 请转移 这里 部署vue项目 vue项目的部署方式和路由的选择有很大的关系,hash 和 ...
  • React项目的打包与部署到腾讯云

    万次阅读 2017-03-16 23:22:45
    腾讯云送了30天的免费试用,于是有了把react项目部署到上面的想法。项目是默认生成的,只是一页面,但是这过程中也遇到了不少麻烦与问题。下面来具体梳理下: create-react-app  来自Facebook官方的零配置...
  • React从开始搭建到项目部署到服务器

    万次阅读 2019-05-22 17:00:00
    什么是React?Vue跟React相比的区别是哪些?为什么大厂都会选择React? 区别 设计模式 React采用的是MVC模式(严格的view层);Vue采用的是MVVM模式; 组件写法不同; react主张jsx+inline style,也就是讲...
  • nginx 上部署react项目

    千次阅读 2018-11-30 15:50:02
    构建成功之后,会生成一dist文件夹,这文件夹里的静态文件,就是我们的项目访问文件了。 2、nginx.conf server { listen 8080; # server_name your.domain.com; root /home/root/react-demo/dist; ...
  • 公司的前端项目部署方式比较简单,整个过程基本上是手动的; 目标 通过工具实现以下几任务: 编译、部署自动化; 选择指定版本进行回滚; 区分不同的分支(环境); 技术方案 选用 jenkins 作为部署工具;也...
  • 网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸。。。 正常的打包就不说了。至于...
  • 您的应用已准备好进行部署! 有关更信息,请参见关于的部分。 npm run eject 注意:这是单向操作。 eject ,您将无法返回! 如果您对构建工具和配置选择不满意,则可以随时eject 。 此命令将从您的项目中删除...
  • 1.前言 说在最最前 ...最近入职新公司由于前端主要是react,遂开始去学习了解react,这两天跟着电子书《The Road to learn React》敲了一遍,巩固了js,熟悉了react的基础知识。但在完成最后部署上线是遇...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,268
精华内容 8,507
关键字:

多个react项目部署