使用nginx部署react项目输出

centos默认yum源没有nginx，要更换yum源为阿⾥云

• 备份原yum源

cd /etc/yum.repos.d
mv Centos-Base.repo Centos-Base.repo.bak

• 获取阿⾥的yum源配置⽂件

wget -O Centos-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo

• 安装epel repo源

wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo

• 对yum源⽣成缓存

yum makecache

• 更新yum源（更新时间较⻓）

yum -y install update

• 安装nginx

yum install nginx

• 查看nginx文件夹

whereis nginx

• nginx配置文件

/etc/nginx

vim nginx.conf //修改配置文件
没有vim 使用 yum install vim安装

• server配置项

root为文件地址，所以/usr/share/nginx/html为默认静态资源托管文件

因为我服务器机房IP不可以直接访问，要解析域名。

测试 绑定域名后是否可以进入nginx默认配置文件。

• 绑定域名查看是否可以进入默认nginx页面

修改server_name为域名地址。

按 i 进入insert模式，修改后 esc :wq 保存退出

解析域名 testnginx A记录到IP地址

重启nginx

cd 到 /usr/sbin目录，执行 ./nginx -s reload

然后报错了...

百度了一下貌似啥pid丢失了

执行
sudo nginx -c /etc/nginx/nginx.conf
sudo ./nginx -s reload
重启成功

重启后已经可以打开到默认目录

• 打包项目

我的项目是vite + react，直接npm run build

1.拿到dist文件替换默认文件

2.新建目录并新建server节点指向新建的目录

• 第二种方法

cd /usr/share/nginx
mkdir react //新建react文件夹

将打包好的dist文件放入react文件夹中。

修改nginx.conf配置

修改为当前文件夹目录

重启nginx

切换到 /usr/sbin目录 执行 ./nginx -s reload

成功部署！