split Dockerfile, dynamic backend URL

Dockerfile

@@ -1,38 +1,4 @@
-FROM mcr.microsoft.com/dotnet/sdk:8.0-alpine AS build-server
+FROM localhost/cccb-tanks-cs-backend:latest
 
-RUN apk add clang binutils musl-dev build-base zlib-static cmake openssl-dev openssl-libs-static openssl
+COPY --from=localhost/cccb-tanks-cs-frontend /app/dist ./client
 
-WORKDIR /src/TanksServer
-
-# dependencies
-COPY TanksServer/TanksServer.csproj .
-RUN dotnet restore --runtime linux-musl-x64 TanksServer.csproj
-
-#build
-COPY TanksServer .
-RUN dotnet build TanksServer.csproj -c Release -o /app/build
-RUN dotnet publish TanksServer.csproj -r linux-musl-x64 -c Release -o /app/publish
-
-
-FROM node:21-alpine AS build-client
-WORKDIR /app
-
-# dependencies
-COPY tank-frontend/package.json .
-COPY tank-frontend/package-lock.json .
-RUN npm i
-
-# build
-env CONTAINERMODE 1
-COPY tank-frontend .
-RUN npm run build
-
-
-FROM mcr.microsoft.com/dotnet/runtime-deps:8.0-alpine AS final
-WORKDIR /app
-
-COPY --from=build-server /app/publish .
-COPY --from=build-client /app/dist ./client
-
-EXPOSE 80
-ENTRYPOINT ./TanksServer

Makefile

@@ -1,7 +1,10 @@
 TAG=cccb-tanks-cs
 
 build:
+	podman build tanks-backend --tag=$(TAG)-backend
+	podman build tank-frontend --tag=$(TAG)-frontend
 	podman build . --tag=$(TAG)
 
 run: build
 	podman run -i -p 3000:3000 localhost/$(TAG):latest
+

tank-frontend/.dockerignore

@@ -14,6 +14,7 @@
 **/azds.yaml
 **/bin
 **/charts
+**/dist
 **/docker-compose*
 **/Dockerfile*
 **/node_modules
@@ -21,6 +22,3 @@
 **/obj
 **/secrets.dev.yaml
 **/values.dev.yaml
-LICENSE
-README.md
-**/node_modules

tank-frontend/.env

@@ -1,3 +0,0 @@
-TANK_DOMAIN=vinzenz-lpt2
-VITE_TANK_API=http://$TANK_DOMAIN
-VITE_TANK_WS=ws://$TANK_DOMAIN

tank-frontend/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:21-alpine AS build-client
+WORKDIR /app
+
+# dependencies
+COPY package.json .
+COPY package-lock.json .
+RUN npm i
+
+# build
+env CONTAINERMODE 1
+COPY . .
+RUN npm run build
+

tank-frontend/src/ClientScreen.tsx

@@ -3,6 +3,7 @@ import {useEffect, useRef} from 'react';
 import './ClientScreen.css';
 import {hslToString, Theme} from "./theme.ts";
 import {Guid} from "./Guid.ts";
+import {makeApiUrl} from './serverCalls.tsx';
 
 const pixelsPerRow = 352;
 const pixelsPerCol = 160;
@@ -104,7 +105,7 @@ export default function ClientScreen({logout, theme, playerId}: {
 }) {
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
-    const url = new URL('/screen', import.meta.env.VITE_TANK_WS);
+    const url = makeApiUrl('/screen', 'ws');
     if (playerId)
         url.searchParams.set('player', playerId);
 

tank-frontend/src/Controls.tsx

@@ -2,9 +2,10 @@ import './Controls.css';
 import useWebSocket, {ReadyState} from 'react-use-websocket';
 import {useEffect} from 'react';
 import {Guid} from "./Guid.ts";
+import {makeApiUrl} from './serverCalls.tsx';
 
 export default function Controls({playerId}: { playerId: Guid }) {
-    const url = new URL('controls', import.meta.env.VITE_TANK_WS);
+    const url = makeApiUrl('/controls', 'ws');
     url.searchParams.set('playerId', playerId);
 
     const {

tank-frontend/src/PlayerInfo.tsx

@@ -1,5 +1,5 @@
 import {useQuery} from '@tanstack/react-query'
-import {Player} from './serverCalls';
+import {makeApiUrl, Player} from './serverCalls';
 import {Guid} from "./Guid.ts";
 import Column from "./components/Column.tsx";
 
@@ -18,7 +18,7 @@ export default function PlayerInfo({playerId}: { playerId: Guid }) {
         queryKey: ['player'],
         refetchInterval: 1000,
         queryFn: async () => {
-            const url = new URL('/player', import.meta.env.VITE_TANK_API);
+            const url = makeApiUrl('/player');
             url.searchParams.set('id', playerId);
 
             const response = await fetch(url, {method: 'GET'});

tank-frontend/src/Scoreboard.tsx

@@ -1,4 +1,4 @@
-import {Player} from "./serverCalls.tsx";
+import {makeApiUrl, Player} from './serverCalls.tsx';
 import DataTable from "./components/DataTable.tsx";
 import {useQuery} from "@tanstack/react-query";
 
@@ -11,7 +11,7 @@ export default function Scoreboard({}: {}) {
         queryKey: ['scores'],
         refetchInterval: 1000,
         queryFn: async () => {
-            const url = new URL('/scores', import.meta.env.VITE_TANK_API);
+            const url = makeApiUrl('/scores');
             const response = await fetch(url, {method: 'GET'});
             if (!response.ok)
                 throw new Error(`response failed with code ${response.status} (${response.status})${await response.text()}`)

tank-frontend/src/serverCalls.tsx

@@ -1,5 +1,9 @@
 import {Guid} from './Guid.ts';
 
+export function makeApiUrl(path: string, protocol: 'http' | 'ws' = 'http') {
+        return new URL(`${protocol}://${window.location.hostname}${path}`);
+}
+
 export type ServerResponse<T> = {
     ok: boolean;
     statusCode: number;
@@ -29,7 +33,7 @@ export async function fetchTyped<T>({url, method}: { url: URL; method: string; }
         ok: response.ok,
         statusCode: response.status,
         statusText: response.statusText
-    }
+    };
 
     if (response.ok)
         result.successResult = await response.json();
@@ -39,7 +43,7 @@ export async function fetchTyped<T>({url, method}: { url: URL; method: string; }
 }
 
 export function postPlayer({name, id}: NameId) {
-    const url = new URL('/player', import.meta.env.VITE_TANK_API);
+    const url = makeApiUrl('/player');
     url.searchParams.set('name', name);
     url.searchParams.set('id', id);
 

tank-frontend/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig(() => {
         plugins: [react()],
 
         build: {
-            outDir: isContainer ? undefined : '../TanksServer/client',
+            outDir: isContainer ? undefined : '../tanks-backend/TanksServer/client',
             emptyOutDir: true
         }
     };

tanks-backend/.dockerignore

@@ -0,0 +1,13 @@
+**/.dockerignore
+**/.env
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/.idea
+**/*.*proj.user
+**/bin
+**/Dockerfile*
+**/obj

tanks-backend/Dockerfile

@@ -0,0 +1,26 @@
+FROM mcr.microsoft.com/dotnet/sdk:8.0-alpine AS build-server
+
+RUN apk add clang binutils musl-dev build-base zlib-static cmake openssl-dev openssl-libs-static openssl
+
+WORKDIR /src/tanks-server
+
+# dependencies
+COPY ./shared.props .
+COPY ./TanksServer.sln .
+COPY ./EndiannessSourceGenerator/EndiannessSourceGenerator.csproj EndiannessSourceGenerator/EndiannessSourceGenerator.csproj
+COPY ./DisplayCommands/DisplayCommands.csproj DisplayCommands/DisplayCommands.csproj
+COPY ./TanksServer/TanksServer.csproj TanksServer/TanksServer.csproj
+RUN dotnet restore --runtime linux-musl-x64 TanksServer.sln
+
+#build
+COPY . .
+RUN dotnet build TanksServer/TanksServer.csproj -c Release -r linux-musl-x64 -o /build
+RUN dotnet publish TanksServer/TanksServer.csproj -c Release -r linux-musl-x64 -o /app
+
+FROM mcr.microsoft.com/dotnet/runtime-deps:8.0-alpine AS final
+WORKDIR /app
+
+COPY --from=build-server /app .
+
+EXPOSE 80
+ENTRYPOINT ./TanksServer

tanks-backend/TanksServer/TanksServer.csproj

@@ -4,11 +4,6 @@
 
     <PropertyGroup>
         <PublishAot>true</PublishAot>
-
-        <IlcDisableReflection>false</IlcDisableReflection>
-        <StaticExecutable>true</StaticExecutable>
-        <StripSymbols>true</StripSymbols>
-        <StaticallyLinked>true</StaticallyLinked>
     </PropertyGroup>
 
     <ItemGroup>
@@ -18,9 +13,7 @@
     </ItemGroup>
 
     <ItemGroup>
-        <None Include="./assets/tank.png" CopyToOutputDirectory="PreserveNewest" CopyToPublishDirectory="Always"/>
-        <!-- TODO include maps in release -->
-        <None Include="./assets/maps/**" CopyToOutputDirectory="PreserveNewest"/>
+        <None Include="./assets/**" CopyToOutputDirectory="PreserveNewest" CopyToPublishDirectory="Always"/>
     </ItemGroup>
 
 </Project>

tanks-backend/TanksServer/appsettings.json

@@ -11,7 +11,7 @@
     "Kestrel": {
         "Endpoints": {
             "Http": {
-                "Url": "http://localhost:3000"
+                "Url": "http://0.0.0.0:3000"
             }
         }
     },