react项目(windows本地)打包部署到服务器(阿里云ubuntu)

前提：使用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