一搭建react项目:

这里采用react官方提供的脚手架 create-react-app (已自动集成webpack相关配置)

生成的项目目录结构如下：

create-react-app

ps: 为什么没有webpack配置文件？

webpack的配置需要输入 npm run eject 命令将所有内建的配置暴露出来。

create-react-app 已经为做了绝大部分事情，配好了webpack

现在就能使用 npm run start 开始写react 项目了

省略开发过程

二打包

我们可以看到package.json中的快捷命令

package.json

分别对应项目scripts下的文件：

scripts文件夹

build文件就是打包项目打包的一系列配置

(本文暂时不分析create-react-app配置文件)

运行 npm run build 后项目中会多出一个build的文件夹

build文件夹

我们只需要把 build这个文件夹放到云服务器上即可

三云服务器设置

注：本文以 centos 为例

推荐yum 源安装(本文省略 yum 源配置,请自行百度或者看他人的博文)

1 ）安装Nginx服务器

首先打开命令行输入 ssh root@yourIp 连上你的服务器

输入 yum install -y nginx 命令安装nginx 服务器

安装完成后进入 nginx 配置文件目录一般是 /etc/nginx/ 下

nginx

在该目录下新建一个vhost文件夹作为你自己的配置文件目录

然后进入vhost 新建一个配置文件比如 example.conf

server {
   listen      5000;  //端口号  可以自己设置
   server_name  localhost;
   root /usr/local/reactProjects/yourReactProject;//注意这是里放 你上面 build 文件夹里 的 内容
   location / {
      try_files $uri @fallback;
   }
   location @fallback {
     rewrite .* /index.html break;
   }
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {
     root   html;
   }
}

注意: /usr/local/reactProjects/yourReactProject 路径只是举个例子你可以放在其他目录下

上传文件到云服务器可以用xftp 或者其他的软件都行

再输入 vi nginx.conf 添加下图划红线部分代码

nginx.conf

把你的配置include进来

到此简易版的Nginx配置好了

但其实Nginx最重要的反向代理我们还没配置

本文暂时不研究反向代理，如需要请自行百度或者查看他人的博文，见谅

最后输入 systemctl start nginx 开启nginx服务

浏览器上输入 yourIpAdress:5000/ 便可以访问你的页面了

（当然了，还得后端提供 API ）

另外 systemctl status nginx 可以查看nginx的运行状态

以及 systemctl stop nginx 可以关闭nginx 服务

over

by 潘小闲

React项目从创建到打包到云服务器指南

React项目从创建到打包到云服务器指南

目录：

一搭建react项目:

二打包

三云服务器设置

推荐阅读更多精彩内容

React项目从创建到打包到云服务器指南

目录：

一 搭建react项目:

二 打包

三 云服务器设置

推荐阅读更多精彩内容

一搭建react项目:

二打包

三云服务器设置