react打包服务器文件,React项目打包到云服务器

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

image.png

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

image.png

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

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

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

image.png

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

三 云服务器设置

注：本文以 centos 为例

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

1 )安装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 添加下图划红线部分代码

image.png

把你的配置include进来

到此简易版的Nginx配置好了