本文介绍了如何将React项目通过npm run build打包，并将build文件夹上传到CentOS云服务器。接着讲解了如何配置Nginx，创建vhost文件夹，编辑example.conf配置文件，设置监听端口、根目录以及重定向规则。最后，通过修改nginx.conf引入配置文件，完成简易版的Nginx部署。
我们可以看到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配置好了
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
