使用docker+nginx发布angular项目

前言

在做一个自己的项目的时候，前端使用的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;"]