React之项目打包部署到nginx
之前总想着自己尝试一下开发完项目，打包后自己部署一下，奈何不是没时间就是进行到一半就放弃了，最近刚好有空就尝试下，差点又放弃了，虽然历尽波折，总算最后还是解决了。
这里以 vite+react+ts 项目为准，react 是使用 history 模式开发的，项目打包时开启了 gzip 压缩并删除了源文件
这里以 Mac 环境为例，未安装 nginx 的需要先安装 nginx，可以使用 brew 安装
brew install nginx
1
安装好后，就可以开始部署了
更改 nginx.conf 配置文件，也可重新创建配置文件（在 nginx/servers 中，创建 xxx.conf 配置文件），然后在 nginx.conf 配置文件的 http 下使用 include 引入一下即可
server {
listen 8080;
server_name localhost; #替换为你的域名或 IP 地址
location / {
root /path/to/your/react/build; #打包后存放项目的路径
index index.html index.htm;
try_files $uri /index.html; #使用history模式的，必须配置，否则刷新页面会报404
}
gzip on; #开启gzip功能
gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，**一定要开启,不开启读取不到.gz结尾的压缩文件**
gzip_static on; #开启gzip静态压缩功能
# 其他静态资源，必须配置，否则会读取静态资源失败，MIME类型错误等信息
location ~* \.(js|css|html|png|jpg|jpeg|gif|ico|svg)(\.gz)?$ {
root /path/to/your/react/build;
expires 30d;
add_header Cache-Control "public, must-revalidate";
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
至此，配置完毕，项目可以正常运行了，刷新也是正常的。
编辑 (opens new window)
上次更新: 3/4/2025, 5:46:30 PM