React项目服务端部署过程记录（create-react-app）

spademan 发布于2019-08-22 15:22 / 2355人阅读

摘要：但在完成最后部署上线是遇到一些小问题，由于搜索无果，便记录于此。由于是自己的项目，自己的云服务器。由于之前部署项目时也碰到过这种类似的问题，当时是通过修改配置解决的。

1.前言

说在最最前

这次分享比较啰嗦啦，想说的很多。实际问题的解决是 “2-3.恍然大悟部分”，可以直接跳过其他多余的絮叨哦～

最近入职新公司由于前端主要是react，遂开始去学习了解react，这两天跟着电子书《The Road to learn React》敲了一遍，巩固了js，熟悉了react的基础知识。但在完成最后部署上线是遇到一些小问题，由于搜索无果，便记录于此。

由于我用的是nginx服务器，所以这里说明一下是基于nginx的配置， 需求不符可以再找找别的啦

2.絮叨开始

推荐想入门react的同学去看这本书《The Road to learn React》,个人觉得很受用。

2-1.一开始很顺畅

首先我这次的项目是用create-react-app这个脚手架搭建的，在package.json里面就有写好脚本命令，这个工具的readme里面也有介绍到。
当需要把项目打包成生产环境的文件是需要使用的是npm run build这个命令

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file.

这里把官方的介绍copy过来凑下字数，顺便自己大概意译一下就是这个命令会把可供生产环境使用的文件打包到bulid文件夹中，你需要然后访问者打开你的网站时可以访问到你的这个index.html，然后就是在index.html里面引用的资源文件的路径也跟资源文件一一对应好了。路径如上所述。

2-2.Boom

由于是自己的项目，自己的云服务器。没那么多讲究。项目打包好了之后就直接把build文件夹里面的内容丢到服务器上了，也在nginx配置文件中给location配置好了。

兴高采烈访问地址想看看学习成果，不出意料，炸了。

我先来看看我做了啥。

npm run build

把build文件夹的内容丢到服务器上

配置nginx

打开浏览器

boom 空白页面

其实这里页面访问到了，服务器是指向了我的index.html文件的，因为没有404错误。
既然服务端没错，那就是前端问题，那么就打开控制台看看，果然报错。

控制台报找不到资源文件，仔细一看这里资源文件的路径指的是我服务器的根目录

2-3.恍然大悟

看到控制台报错内容瞬间就想明白了，原来这里index.html的路径默认是指向相对根目录的，那么知道问题就开始解决了。
由于之前部署Vue项目时也碰到过这种类似的问题，当时是通过修改webpack配置解决的。

因为这里是通过create-react-app搭建的项目，所以继续看文档发现

By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json, for example:

原来是可以通过往package.json添加homepage项实现相对路径的修改的！

like this:

  "homepage": "http://mywebsite.com/relativepath",

2-4.大吉大利

不出意外，跟着文档的指示，成功部署到了服务器上，虽然是个很简单的项目。但自己算是第n次初学react了。遂记录一下，以后也有迹可循。

3.最后

感谢阅读！
不足之处，请多指教～

云服务器服务器托管 create-react-app 怎么部署react项目前后端分离项目部署云服务器阿里云前后端分离项目怎么部署服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93408.html

React项目实践系列一

摘要：在此我们选用用友的公共静态资源库。因此打算建立远程的其实还有个关键是我使用用友配的电脑开发，在本地部署的话电脑配置。。。不过此步骤我们也可以省略了，用友的大前端技术团队提供了平台。数据分析平台-实践系列一项目创建于2018年1月底，到现在已经接近半年，在此写下半年来项目的实践过程以及自己对前端的学习与体悟。技术选型框架： React 路由： React-Router 4 状态管...

DC_er 2019-08-26 12:01 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

call_me_R 2019-08-23 13:43 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

wzyplus 2019-08-02 12:08 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

aristark 2019-08-29 17:24 评论0 收藏0
React项目从创建到打包到云服务器指南

摘要：一搭建项目二打包三云服务器设置一搭建项目这里采用官方提供的脚手架已自动集成相关配置生成的项目目录结构如下为什么没有配置文件的配置需要输入命令将所有内建的配置暴露出来。一搭建react项目二打包三云服务器设置一搭建react项目: 这里采用react官方提供的脚手架 create-react-app (已自动集成webpack相关配置) 生成的项目目录结构如下： sh...

yintaolaowanzi 2019-07-25 15:02 评论0 收藏0