前言
在做一个自己的项目的时候，前端使用的angular，在发布的时候遇到了点麻烦。由于angular编译好就是一堆静态文件，所以之前采用的方式是先编译好，然后将编译好的文件放到spring项目中，但是感觉这样搞不太优雅，而且打镜像也不方便，于是采用了前端单独部署的方式。
前端镜像
由于angular编译好的静态文件实际上没有依赖，但是build的node环境很大，所以我们先在一个容器中进行编译，然后将编译好的文件拷贝到一个干净的nginx容器中，build成一个比较小的镜像
编译
在项目中根目录新增Dockerfile文件
FROM node:16-bullseye as build
WORKDIR /app
COPY . /app
RUN npm i \
&& npm i @angular/cli -g \
&& ng build
这一步会进行编译，然后在dist/project_name目录下生成编译好的文件，然后将编译好的文件拷贝到nginx容器中。在Dockerfile中增加内容
FROM nginx:alpine
COPY --from=build /app/dist/project_name /usr/share/nginx/html
ENTRYPOINT ["nginx", "-g", "daemon off;"]
由于nginx的默认配置只认/的path，其他path会返回404，所以这里还需要修改下nginx的配置。新增nginx.conf文件
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html =404;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
然后修改Dockerfile
COPY nginx.conf /etc/nginx/conf.d/default.conf
ENTRYPOINT ["nginx", "-g", "daemon off;"]
最终的Dockerfile
FROM node:16-bullseye as build
WORKDIR /app
COPY . /app
RUN npm i \
&& npm i @angular/cli -g \
&& ng build
FROM nginx:alpine
COPY --from=build /app/dist/project_name /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
ENTRYPOINT ["nginx", "-g", "daemon off;"]
