React 打包运行 – 前端梦想

打包

npm run build

生成 build 文件夹

成功后，提示把 build 中的文件放到根目录，作为静态资源访问，直接访问根目录。还可以在 package.json 中设置 homepage 后，重新打包。

 "homepage": ".",

设置后再打包，生成的build文件夹可以直接拷贝到服务器上，而不用放到根目录了。通过 http://yourwebsite:8080/build/index.html 访问。

Spring Boot 静态资源文件配置：

private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {

"classpath:/META-INF/resources/", "classpath:/resources/",

"classpath:/static/", "classpath:/public/" };

默认的静态资源文件夹：为static 和 public，遵循spring boot默认规则，基本可以满足我们大部分的需求了。

如果我们需要自定义，使用 application.properties方法

这里的static可以换成你对应的文件夹名字，如：build

spring.mvc.static-path-patten = /build/**
spring.resources.static-locations = classpath:/build/

访问：http://localhost:8080/build/index.html

前端本地开发时的跨域问题

如果项目是用creat-react-app cli 创建的，则直接在package.json 文件里添加 api 地址目录即可：

"proxy"： “www.api.com:8000”

如果是自己创建的项目，配置好 proxy middlle 中间件也可以实现代理。本地fecth( ”api/userinfo”, fucntion(){} ); 请求会发送到 http://www.online.com:80/api/userinfo 接口上

proxy: {
    '/api': {
      target: 'http://www.online.com:80/',
      changeOrigin: true
    },
}

部署在nginx web 服务器上

try_files 指令：配置 nginx/nginx.conf 文件

server {
  ...
  location / {
    try_files $uri /index.html
  }
}

react build 后的文件包里的文件直接放到 nginx 下的 web 目录即可通过 ip 访问。

参考：

https://blog.csdn.net/tiangongkaiwu152368/article/details/80844647

https://www.cnblogs.com/winyh/p/7568984.html