前提：使用react-router的BrowserRouter路由模式（单页开发，url切换时需要服务器始终返回index.html）
一、根目录部署
1、修改package.json文件
添加"homepage" :"http://xxx.com/" #解决部署到服务器后刷新页面出错的问题
image.png
2、项目根目录执行npm run bulid
image.png
3、将打包后在根目录生成的build文件夹上传到服务器
image.png
4、ubuntu安装nginx
- apt-get update #更新源
- apt-get install nginx #安装nginx
- vim /etc/nginx/nginx.conf #修改配置文件
server {
listen 80; #端口
server_name xx.xx.xxx.xxx; #ip或域名
root /opt/React/build/; #文件夹目录
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
location ^~ /assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
}
error_page 500 502 503 504 /500.html;
client_max_body_size 20M;
keepalive_timeout 10;
}
image.png
- service nginx restart #重启nginx服务
5、大功告成
image.png
二、子目录配置
1、修改路由配置
加basename属性（c1为子目录名）
image.png
2、修改package.json
添加homepage行（后面加上子目录c1！）
image.png
3、打包上传
新建c1子目录，把build文件夹里的内容上传到子目录文件夹中
image.png
4、nginx配置
重点：root和location
server {
listen 80; #端口
server_name xx.xx.xxx.xxx; #ip或域名
root /home/React/c1/; #文件夹目录
index index.html index.htm;
location /c1/ {
try_files $uri $uri/ /c1/index.html;
}
location ^~ /assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
}
error_page 500 502 503 504 /500.html;
client_max_body_size 20M;
keepalive_timeout 10;
}
image.png
5、大功告成！
image.png
