How to setup Nuxt.js as a SPA with .NET Core Web Api in a single Docker container?

Question

How do I create a docker-compose.yml file which will run my Nuxt.js SPA and .NET Core Web API in 1 container? So far I have the Web Api working in docker and I can send commands to it. But every time I try to add the Nuxt SPA to docker-compose.yml, Visual Studio gives me a weird error (see the end of post).

This is what I have so far:

docker-compose.yml

version: '3.4'
services:
    webapi:
        container_name: webapi
        image: projectname/projectname_webapi
        build:
            context: .
            dockerfile: src/WebAPI/Dockerfile
        restart: always
        ports:
          - "5500:80"
        environment:
            ASPNETCORE_ENVIRONMENT: Development 

.Net Core Web API Dockerfile

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1 AS base
WORKDIR /app
EXPOSE 80

FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build
COPY . .
RUN dotnet test

FROM build AS publish
WORKDIR /src/WebAPI
RUN dotnet publish "WebAPI.csproj" -c Release -o /app

FROM base AS final
WORKDIR /app
COPY --from=publish /app .
ENTRYPOINT ["dotnet", "WebAPI.dll"]

Nuxt.js SPA Dockerfile

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 7000
CMD ["nginx", "-g", "daemon off;"]

The Error I receive if I add the following to docker-compose.yml:

     webpui:
        container_name: webpui
        image: projectname/projectname_webui
        build:
            context: .
            dockerfile: src/WebUI/Dockerfile
        restart: always
        ports:
            - '7000:7000'
        command: ["npm", "run", "serve"]

Error:

Error   MSB4018 The "GetServiceReferences" task failed unexpectedly.
System.IO.FileNotFoundException: Could not load file or assembly 'Newtonsoft.Json, Version=9.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed' or one of its dependencies. The system cannot find the file specified.
File name: 'Newtonsoft.Json, Version=9.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed'
   at Microsoft.VisualStudio.Containers.Tools.Common.Prerequisites.DockerForWindowsDriveSharingPrerequisite.<EvaluateAsync>d__0.MoveNext()
   at System.Runtime.CompilerServices.AsyncTaskMethodBuilder`1.Start[TStateMachine](TStateMachine& stateMachine)
   at Microsoft.VisualStudio.Containers.Tools.Common.Prerequisites.DockerForWindowsDriveSharingPrerequisite.EvaluateAsync(CancellationToken cancellationToken)
   at Microsoft.Docker.Prerequisites.DockerForWindowsDriveSharingPrerequisite.<EvaluateAsync>d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.Docker.Prerequisites.DockerCompositePrerequisite.<EvaluateAsync>d__2.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.Docker.BuildTasks.DockerBuildTask.<EvaluateBuildPrerequisitesAsync>d__32.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.Docker.BuildTasks.DockerBuildTask.<ExecuteAsync>d__30.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.Docker.BuildTasks.DockerBuildTask.Execute()
   at Microsoft.Build.BackEnd.TaskExecutionHost.Microsoft.Build.BackEnd.ITaskExecutionHost.Execute()
   at Microsoft.Build.BackEnd.TaskBuilder.<ExecuteInstantiatedTask>d__26.MoveNext()

WRN: Assembly binding logging is turned OFF.
To enable assembly bind failure logging, set the registry value [HKLM\Software\Microsoft\Fusion!EnableLog] (DWORD) to 1.
Note: There is some performance penalty associated with assembly bind failure logging.
To turn this feature off, remove the registry value [HKLM\Software\Microsoft\Fusion!EnableLog].
    docker-compose  C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\MSBuild\Sdks\Microsoft.Docker.Sdk\build\Microsoft.VisualStudio.Docker.Compose.targets  202 

Any suggestions are greatly appreciated!

Answer 1

The specific issue shown above is a missing Newtonsoft.Json DLL. Search to find which project(s) in your solution reference that package and use NuGet to install the "Newtonsoft.Json" package to the project(s). If it still doesn't get past that error after installing the package, try downgrading that package to the previous version and then upgrading it back to the current stable version. (This seems to straighten out the references.) For further information see the answers to this question.

Once you get past that point, you'll be able to find out if you have other issues on your way to answering your original question. Good luck!

Answer 2

I was also having this weird error when running from the docker-compose solution. Turns out that was happening due to a .editorconfig on the solution root. After I removed it, the build started working normally.

Go figure...

Answer 3

I had the error with Newtonsoft Json 9.0.0.0 missing. I simply removed the docker-compose project and readded it. No idea what the changes were exactly, but it fixed it.