angular和spring boot的standalone部署(Standalone deployment of angular and spring boot)

前言

虽然前后端分离是现在主流的开发模式,但是我不认为前后端分离就意味着前后端部署,部署的时候也可以将前端打包后的资源文件放在jar包里,成为后端的一部分。

angular打包

首先使用angular-cli的打包命令去编译angular文件

ng build --configuration production

然后将输出的静态资源文件资源拷贝到spring boot中目录下。

resources/static

接下来在目录下新建文件夹,将index.html文件拷贝进去文件夹,并重命名为404.html。这一步的目的是当angular项目使用h5路由, spring boot不能正确响应的问题。

resources/static
error
error

如果你的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

————————

preface

Although the front-end separation is the mainstream development mode, I don’t think the front-end separation means front-end deployment. During deployment, you can also put the resource files packaged by the front end in the jar package to become a part of the back-end.

angular打包

First, use the packaging command of angular cli to compile the angular file

ng build --configuration production

Then copy the output static resource file to the spring boot directory.

resources/static

Next, create a new folder in the directory, copy the index.html file into the folder, and rename it 404.html. The purpose of this step is to solve the problem that spring boot cannot respond correctly when the angular project uses H5 routing.

resources/static
error
error

If your angular project is placed in the directory, you can use the following script:

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

At this time, you can package the spring boot code.

For Maven:

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

For gradle:

gradle build -x test

demo

This is my demo