Can't connect from Vue to .NET Core API on Docker-CodePudding

I have to make a request from a Vue frontend solution to a .NET Core (3.1) backend API. Running it normally (without Docker), works without any problem, but I have to dockerize them (separately) and make them work, which I'm not able to do.

Vue Dockerfile:

# base image
FROM node:12.2.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install

# start app
CMD ["npm", "run", "serve"]

Vue Docker Run command:

docker run -v ${PWD}:/app -v /app/node_modules -p 8081:8080 --rm dockerized-vue:front

.NET Dockerfile:

# syntax=docker/dockerfile:1
FROM mcr.microsoft.com/dotnet/sdk:3.1 AS build-env
WORKDIR /app

# Copy csproj and restore as distinct layers
COPY *.csproj ./
RUN dotnet restore

# Copy rest of the files
COPY . .

# Build
RUN dotnet publish -c Release -o out

# Build runtime image
FROM mcr.microsoft.com/dotnet/aspnet:3.1
WORKDIR /app
COPY --from=build-env /app/out .
ENTRYPOINT ["dotnet", "MyApp.dll"]

.NET Docker Run command:

docker run -p 8082:8080 --rm dockerized-netcore:back

.NET Core launchSettings.json:

{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:58726",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "myapp",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "MyApp": {
      "commandName": "Project",
      "launchUrl": "myapp",
      "applicationUrl": "http://localhost:8082",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

I'm sending the request from Vue to

http://localhost:8082/api/MyEndpoint

Also have to add that I initially used port 5000 for local test (without docker) but I decided to change to port 8082 since Docker tells me that port 5000 is already in use (don't know why...)

Thanks.

CodePudding user response：

In the aspnet image you use as a base for your image, Microsoft set the ASPNETCORE_URLS environment variable to http:// :80 which overrides your launchsettings file.

That means that you should map the port on your host to port 80 in the image like this

docker run -p 8082:80 --rm dockerized-netcore:back

A good way to be certain about which port the app is listening on (because there are a lot of ways to set it, so it can be hard to be sure which setting wins) is to run the command docker logs <container name>. Then you'll see something like this

info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Production
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app

Here you can see which port it's listening on.