Step 4 - Hosting

Prerequisites

• basic familiarity with
• dotnet cli
• c#
• docker

Infrastructure

1. create a linux vm with docker in some ISP of your choice
2. create a domain in some domain provider of your choice
3. make sure the domain points at the IP of your linux machine

Code

Adjust InteractiveServer

BlazorDemo.Frontend.InteractiveServer/Program.cs

...
var baseUrl = builder.Configuration.GetValue<string>("ApiUrl");

builder
    .Services.AddHttpClient<HttpWeatherClient>()
    .ConfigureHttpClient(c => c.BaseAddress = new Uri(baseUrl));
...

BlazorDemo.Frontend.InteractiveServer/appsettings.json

  "ApiUrl": "http://localhost:YOURAPIPORT/",

Create SolutionItems

SolutionItems/Caddyfile

blazordemo.ramboe.io {
  reverse_proxy interactiveserver:80
}    
blazordemo-api.ramboe.io {
  reverse_proxy api:80
}

SolutionItems/docker-compose.caddy.yml

services:

  caddy-service:
    image: caddy:latest
    container_name: my-caddy
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./volume-bindings/caddy/data:/data # remember ssl certificates
      - ./volume-bindings/caddy/Caddyfile:/etc/caddy/Caddyfile

SolutionItems/docker-compose.yml

networks:
    caddy:

services:
    caddy:
        extends:
            file: docker-compose.caddy.yml
            service: caddy-service
        networks:
            - caddy

    # blazor user frontend
    interactiveserver:
        image: "crblazordemo.azurecr.io/ramboe/blazordemo-frontend-interactiveserver:latest"
        restart: always
        container_name: "blazordemo-frontend-interactiveserver"
        ports:
            - "80"
        environment:
            - ASPNETCORE_ENVIRONMENT=Production
            - "ApiUrl=http://blazordemo-backend-api/" #points to closed api - HTTP (not -S) important here
            - ASPNETCORE_URLS=http://+:80 # <— key line
        networks:
            - caddy

    api:
        image: "crblazordemo.azurecr.io/ramboe/blazordemo-backend-api:latest"
        restart: always
        container_name: "blazordemo-backend-api"
        ports:
            - "80"
        environment:
            - ASPNETCORE_ENVIRONMENT=Production
            - ASPNETCORE_URLS=http://+:80 # <— key line
        networks:
            - caddy

CLI

Dev Machine

Update Container registry

dotnet publish BlazorDemo.Frontend.InteractiveServer --os linux --arch x64 /t:PublishContainer -c Release & dotnet publish BlazorDemo.Backend.Api --os linux --arch x64 /t:PublishContainer -c Release

Push dockerfile to remote machine

rsync -avz --progress ./SolutionItems root@blazordemo.ramboe.io:'/compose'

Remote Machine

run from remote machine

cd /compose/SolutionItems

copy Caddyfile

mkdir -p volume-bindings/caddy && cp Caddyfile volume-bindings/caddy/

log into acr

docker login ...

start containers

docker compose pull && docker compose up

Test

browse: https://blazordemo.ramboe.io/