前言

雖然前後端分離是現在主流的開發模式，但是我不認為前後端分離就意味著前後端部署，部署的時候也可以將前端打包後的資原始檔放在jar包裡，成為後端的一部分。

angular打包

首先使用angular-cli的打包命令去編譯angular檔案

ng build --configuration production

然後將輸出的靜態資原始檔資源拷貝到spring boot中resources/static目錄下。

接下來在resources/static目錄下新建error資料夾，將index.html檔案拷貝進去error資料夾，並重命名為404.html。這一步的目的是當angular專案使用h5路由

如果你的angular專案是放在src/main/angular目錄下，可以使用以下的指令碼：

echo "build web application"

cd src/main/angular \
  && yarn \
  && ng build --configuration production --output-path ../resources/static \
  && cd ../../../

echo "copy web application to resources"

cd src/main/resources/static \
  && mkdir error \
  && cp index.html error/404.html \
  && cd ../../../../
 

spring boot

這個時候就可以打包spring boot程式碼。

對於maven：

mvn clean install package -Dmaven.test.skip=true

對於gradle：

gradle build -x test

demo

這是我寫的demo