目录：
一 搭建react项目
二 打包
三 云服务器设置
一 搭建react项目:
这里采用react官方提供的脚手架 create-react-app (已自动集成webpack相关配置)
生成的项目目录结构如下：
ps: 为什么 没有webpack配置文件？
webpack的配置需要 输入 npm run eject 命令将所有内建的配置暴露出来。
create-react-app 已经为做了绝大部分事情，配好了webpack
现在就能使用 npm run start 开始写react 项目了
省略开发过程
二 打包
我们可以看到package.json中的快捷命令
分别对应项目scripts下的文件：
build文件就是打包项目打包的一系列配置
(本文暂时不分析create-react-app配置文件)
运行 npm run build 后项目中会多出一个build的文件夹
我们只需要把 build这个文件夹 放到云服务器上 即可
三 云服务器设置
注：本文以 centos 为例
推荐yum 源安装(本文省略 yum 源配置,请自行百度或者看他人的博文)
1 ）安装Nginx服务器
首先 打开命令行 输入 ssh root@yourIp 连上你的服务器
输入 yum install -y nginx 命令安装nginx 服务器
安装完成后 进入 nginx 配置文件目录 一般是 /etc/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 添加下图划红线部分代码
把你的配置include进来
到此简易版的Nginx配置好了
但其实Nginx最重要的反向代理我们还没配置
本文暂时不研究反向代理，如需要请自行百度或者查看他人的博文，见谅
最后 输入 systemctl start nginx 开启nginx服务
浏览器上输入 yourIpAdress:5000/ 便可以访问你的页面了
（当然了，还得 后端提供 API ）
另外 systemctl status nginx 可以查看nginx的运行状态
以及 systemctl stop nginx 可以 关闭nginx 服务
over
by 潘小闲
