将React网页与Springboot专案整合

初期前后端通常会分别开发，因为开发环境不同，启动的 port 甚至 url 都不一样
但最后部属时若没 Cloud 需求，前后端将会放在同一个容器运行，接下来就看看如何将 React 打包后的网页放入 Springboot 专案中

第一步就需要将 React 编译成正式网页以及 js 档
我们只需在终端机输入 yarn run build (使用 npm 就输入 npm run build)

请先忽略size，目前没做任何调整，所有的元件编译起来非常臃肿

完成后在专案下会新增一个 dist 子目录

我们只需将 dist 下的资料，全部複製到 Springboot 专案的 static 目录下即可
之后启动 Springboot 并输入 Springboot 设定的网址，预设就会开启 static 目录下的 index.html

不过问题来了，我们在开发时 API 的 hostname 都是输入 localhost，例如

http://localhost:8080/api/something

等部属到伺服器这网址势必要更改，而且每当换环境我们就需要修改网址
接着又要

重新 build 网页 ⇒ 複製到 springboot 专案 ⇒ build springboot 专案 ⇒ 最后把 jar 档複製到新环境执行

这样也太辛苦，部属前一刻才知道网址，我们就得重新 build 网页吗?

这里教大家一个好方法，当前端网页开始整合进 Springboot 专案测试时
可以将所有呼叫 API 的 URL 改成如下

let url: string = http://${window.location.host}/api/something;

${window.location.host} 这个变数会取得浏览器目前的 hostname，这样不管部属到甚么环境，都能抓到正确的网址，也不需要重新 build 网页了