title: Hosting a blazor-hosted app with nginx and docker
body: <h2>Goal</h2>
  <p>Deploying/hosting a blazor-hosted (.Net Core 3 Preview 6) app on a Ubuntu server with a reserve-proxy (nginx) and docker (all containerized).</p>
  <h2>Config Files</h2>
  <p>The dockerfile which got generated by Visual Studio:</p>
  <pre><code>FROM mcr.microsoft.com/dotnet/core/aspnet:3.0-buster-slim AS base
  WORKDIR /app
  EXPOSE 80
  EXPOSE 443
  
  FROM mcr.microsoft.com/dotnet/core/sdk:3.0-buster AS build
  WORKDIR /src
  COPY [&quot;Website.Server/Website.Server.csproj&quot;, &quot;Website.Server/&quot;]
  COPY [&quot;Website.Client/Website.Client.csproj&quot;, &quot;Website.Client/&quot;]
  RUN dotnet restore &quot;Website.Server/Website.Server.csproj&quot;
  COPY . .
  WORKDIR &quot;/src/Website.Server&quot;
  RUN dotnet build &quot;Website.Server.csproj&quot; -c Release -o /app
  
  FROM build AS publish
  RUN dotnet publish &quot;Website.Server.csproj&quot; -c Release -o /app
  
  FROM base AS final
  WORKDIR /app
  COPY --from=publish /app .
  ENTRYPOINT [&quot;dotnet&quot;, &quot;Website.Server.dll&quot;]
  </code></pre>
  <p>The docker-compose.yml file which is used to launch the application:</p>
  <pre><code>version: '3'
  services:
    nginx:
      image: nginx:1.17-alpine
      volumes:
        - ./data/nginx:/etc/nginx/conf.d
      ports:
        - &quot;80:80&quot;
        - &quot;443:443&quot;
      restart: always
    wesbite:
      image: ImageToTheDockerFileAbove
      expose:
        - &quot;80&quot;
        - &quot;443&quot;
      restart: always
  </code></pre>
  <p>And finally my nginx config:</p>
  <pre><code>server {
      listen        80;
      server_name   domain;
      
      location / {
          return 301 
          https://$host$request_uri;   
      }
  }
  server {
      listen        443 ssl;
      server_name   domain;
  
      location / {
          proxy_pass         http://website:80;
          proxy_http_version 1.1;
          proxy_set_header   Upgrade $http_upgrade;
          proxy_set_header   Connection keep-alive;
          proxy_set_header   Host $host;
          proxy_cache_bypass $http_upgrade;
          proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   X-Forwarded-Proto $scheme;
      }
  }
  </code></pre>
  <p>Startup.cs of my ASP.Net Core app</p>
  <pre class="lang-cs prettyprint-override"><code>public class Startup
      {
          public void ConfigureServices(IServiceCollection services)
          {
              services.AddMvc().AddNewtonsoftJson();
              services.AddResponseCompression(opts =&gt;
              {
                  opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                      new[] { &quot;application/octet-stream&quot; });
              });
          }
  
          public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
          {
              app.UseResponseCompression();
  
              if (env.IsDevelopment())
              {
                  app.UseDeveloperExceptionPage();
                  app.UseBlazorDebugging();
              }
  
              app.UseForwardedHeaders(new ForwardedHeadersOptions
              {
                  ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
              });
  
              app.UseClientSideBlazorFiles&lt;Client.Startup&gt;();
  
              app.UseRouting();
  
              app.UseEndpoints(endpoints =&gt;
              {
                  endpoints.MapDefaultControllerRoute();
                  endpoints.MapFallbackToClientSideBlazor&lt;Client.Startup&gt;(&quot;index.html&quot;);
              });
          }
      }
  </code></pre>
  <h2>Problems</h2>
  <p>Actually there is just no content served at all and I am just getting a 404, but
  the link between the container does exist. Since I can see the following output as soon as I type in my domain in the browser:</p>
  <pre><code>info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
        Request starting HTTP/1.1 GET domain  
  info: Microsoft.AspNetCore.Routing.EndpointMiddleware[0]
        Executing endpoint 'Fallback {*path:nonfile}'
  info: Microsoft.AspNetCore.Routing.EndpointMiddleware[1]
        Executed endpoint 'Fallback {*path:nonfile}'
  </code></pre>
  <p>Regarding to <a href="https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/client-side?view=aspnetcore-3.0#hosted-deployment-with-aspnet-core" rel="nofollow noreferrer">MSDN</a> you are not required to add the following lines to the config of nginx, since the blazor app sits behind a normal ASP.Net Core application.</p>
  <pre><code>root /usr/share/nginx/html;
  try_files $uri $uri/ /index.html =404;
  </code></pre>
  <p>But when reading the error this still seems to me as a routing issue or similar.</p>