使用nginx部署react项目输出

465次阅读
2条评论

共计 1026 个字符,预计需要花费 3 分钟才能阅读完成。

使用 nginx 部署 react 项目输出

使用 nginx 部署 react 项目输出
centos 默认 yum 源没有 nginx,要更换 yum 源为阿⾥云

  • 备份原 yum 源

Bash

cd /etc/yum.repos.d
mv Centos-Base.repo Centos-Base.repo.bak
  • 获取阿⾥的 yum 源配置⽂件

Bash

wget -O Centos-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
  • 安装 epel repo 源

Bash

wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo
  • 对 yum 源⽣成缓存

Bash

yum makecache
  • 更新 yum 源(更新时间较⻓)

Bash

yum -y install update
  • 安装 nginx

Bash

yum install nginx

使用 nginx 部署 react 项目输出

  • 查看 nginx 文件夹

Bash

whereis nginx

使用 nginx 部署 react 项目输出

  • nginx 配置文件

Bash

/etc/nginx

使用 nginx 部署 react 项目输出

Bash

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

使用 nginx 部署 react 项目输出

  • server 配置项

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

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

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

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

修改 server_name 为域名地址。

使用 nginx 部署 react 项目输出

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

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

使用 nginx 部署 react 项目输出

重启 nginx

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

然后报错了 …

使用 nginx 部署 react 项目输出 百度了一下貌似啥 pid 丢失了

Bash

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

使用 nginx 部署 react 项目输出 重启后已经可以打开到默认目录

  • 打包项目

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

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

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

  • 第二种方法

Bash

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

使用 nginx 部署 react 项目输出

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

修改 nginx.conf 配置

使用 nginx 部署 react 项目输出

修改为当前文件夹目录

重启 nginx

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

使用 nginx 部署 react 项目输出

成功部署!

正文完
  1
领导、我小江🎉
版权声明:本文于2023-04-04转载自米耀华博客,共计1026字。
转载提示:此文章非本站原创文章,若需转载请联系原作者获得转载授权。
评论(2条评论)
LoveLolita 评论达人 LV.1
2023-05-08 14:45:31 回复

好耶

 iPhone  JIANG MiniProgram