Dockerizing a Vue 3 + ASP.NET Core web app

While working on a web app for my book club, I've decided to try containerizing the app with Docker, so I can update dependencies more easily. I host my apps on a Ubuntu Server 18.04 LTS, where I already have the .Net Core 2 and 3 frameworks installed. Instead of adding 5 and then 6 (currently in preview) after upgrading, I thought I might try creating a Docker image. I'm learning as I go along, so this might not be the best way of doing things.

When combining an SPA with a different (non-javascript) backend, I've seen people using dockerfiles in which they start with a container able to build the backend, then install Node into it, then using it to build the frontend.

I've tried this, but it was finicky and I didn't really like it, so I've decided to use two separate containers instead: one to build the backend part, one for the frontend. After both are done, I copy the results into the final container containing just the (linux) runtime and the built app, here creatively called zblesk-web (which is also the name of a folder holding the project).

I ended up with this:

# Build Backend
FROM mcr.microsoft.com/dotnet/sdk:5.0 AS dotnetbuild
WORKDIR /source

COPY *.sln .
COPY zblesk-web/*.csproj ./zblesk-web/
RUN dotnet restore -r linux-x64

COPY zblesk-web/. ./zblesk-web/

WORKDIR /source/zblesk-web
RUN dotnet publish -c Release -o /app --no-restore -r linux-x64 --self-contained false

# Build FE
FROM node:14 AS nodebuild
WORKDIR /frontend
COPY zblesk-web/ClientApp/package*.json ./
RUN npm install
COPY zblesk-web/ClientApp/ .
RUN npm run build -- --prod

# Final image
FROM mcr.microsoft.com/dotnet/aspnet:5.0-focal-amd64
WORKDIR /zblesk-web
COPY --from=dotnetbuild /app ./
COPY --from=nodebuild /frontend/dist ./ClientApp
ENTRYPOINT ["./zblesk-web"]	

Again, this might not be the optimal way of doing it, but for now it works well for me.