Add front docker

.dockerignore

@@ -1,3 +1,7 @@
+Dockerfile
+.dockerignore
+docker-compose.yml
+README.md
 **/build
 **/dist
 src/Kyoo.WebApp/Front/nodes_modules
@@ -5,3 +9,6 @@ src/Kyoo.WebApp/Front/nodes_modules
 **/obj
 docs
 tests
+front
+video
+nginx.conf.template

Dockerfile

@@ -4,13 +4,6 @@ WORKDIR /transcoder
 COPY src/Kyoo.Transcoder .
 RUN cmake . && make -j
 
-FROM node:14-alpine as webapp
-WORKDIR /webapp
-COPY front .
-RUN npm install -g @angular/cli
-RUN yarn install --frozen-lockfile
-RUN yarn run build --configuration production
-
 FROM mcr.microsoft.com/dotnet/sdk:6.0 as builder
 WORKDIR /kyoo
 COPY .git/ ./.git/
@@ -22,6 +15,5 @@ RUN apt-get update && apt-get install -y libavutil-dev libavcodec-dev libavforma
 EXPOSE 5000
 COPY --from=builder /opt/kyoo /usr/lib/kyoo
 COPY --from=transcoder /transcoder/libtranscoder.so /usr/lib/kyoo
-COPY --from=webapp /webapp/dist/* /usr/lib/kyoo/wwwroot/
 CMD ["/usr/lib/kyoo/Kyoo.Host.Console"]
 

docker-compose.yml

@@ -12,13 +12,30 @@ services:
       - DATABASE__CONFIGURATIONS__POSTGRES__PASSWORD=kyooPassword
       - TVDB__APIKEY=${TVDB__APIKEY}
       - THEMOVIEDB__APIKEY=${THEMOVIEDB__APIKEY}
-    ports:
-      - "5000:5000"
     depends_on:
       - postgres
     volumes:
       - kyoo:/var/lib/kyoo
       - ./video:/video
+  front:
+    build: ./front
+    restart: on-failure
+    environment:
+      - KYOO_URL=http://kyoo:5000
+  ingress:
+    image: nginx
+    restart: on-failure
+    environment:
+      - PORT=8901
+      - FRONT_URL=http://front:8901
+      - BACK_URL=http://kyoo:5000
+    volumes:
+      - ./nginx.conf.template:/etc/nginx/templates/kyoo.conf.template:ro
+    depends_on:
+      - kyoo
+      - front
+    ports:
+      - "8901:8901"
   postgres:
     image: "postgres"
     restart: on-failure

front/.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

front/Dockerfile

@@ -0,0 +1,24 @@
+FROM node:16-alpine AS builder
+WORKDIR /app
+COPY package.json yarn.lock ./
+RUN yarn --frozen-lockfile
+
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV NODE_ENV production
+RUN yarn build
+
+
+FROM node:16-alpine
+WORKDIR /app
+
+COPY --from=builder /app/.next/standalone .
+COPY --from=builder /app/.next/static ./.next/static/
+COPY --from=builder /app/public ./public
+
+EXPOSE 8901
+ENV PORT 8901
+
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV NODE_ENV production
+CMD ["node", "server.js"]

front/next.config.js

@@ -24,12 +24,7 @@
 const nextConfig = {
 	reactStrictMode: true,
 	swcMinify: true,
-	env: {
+	output: "standalone",
-		KYOO_URL: process.env.KYOO_URL ?? "http://localhost:5000",
-	},
-	rewrites: async () => [
-		{ source: "/api/:path*", destination: process.env.KYOO_URL ?? "http://localhost:5000/:path*" },
-	],
 	async redirects() {
 		return [
 			{
@@ -41,4 +36,10 @@ const nextConfig = {
 	},
 };
 
+if (process.env.NODE_ENV !== "production") {
+	nextConfig.rewrites = async () => [
+		{ source: "/api/:path*", destination: process.env.KYOO_URL ?? "http://localhost:5000/:path*" },
+	];
+}
+
 module.exports = nextConfig;

front/public/icon.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="34pt" height="34pt"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128; padding: 2pt;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#121327;stroke:#010202;stroke-width:5;stroke-miterlimit:10;}
+	.st1{fill:#E13E13;}
+</style>
+<polygon class="st0" points="121.39,62.34 6.5,8.58 6.5,116.09 "/>
+<g>
+	<path class="st1" d="M63.09,25.59c-4.59,8.24-9.01,17.92-13.23,29.04c-3.65,9.52-6.53,18.78-8.64,27.78
+		c-1.42,6.05-2.06,9.83-1.91,11.32c0.22,0.58,0.33,1.11,0.33,1.59c0,0.77-0.31,1.15-0.93,1.15c-0.77,0-2.01-0.66-3.72-1.97
+		c-1.9-1.42-2.84-2.59-2.84-3.5c0-0.58,0.16-1.44,0.49-2.57c2.99-10.54,6.71-21.69,11.16-33.47c2.92-7.29,6.09-15.24,9.52-23.84
+		c-10.43,2.55-17.88,5.61-22.37,9.19c-1.64,1.28-2.46,2.5-2.46,3.66c0,0.8,0.36,2.94,1.09,6.4c0.25,1.13-0.15,1.7-1.2,1.7
+		c-0.73,0-1.29-0.35-1.7-1.04c-1.24-1.97-2.52-4.83-3.83-8.59c-0.26-0.84-0.38-1.6-0.38-2.3c0-2.73,2.11-4.96,6.34-6.67
+		c1.49-0.62,9.04-3.17,22.64-7.66c3.21-1.06,5.4-2.31,6.56-3.77c0.84-1.02,1.57-1.53,2.19-1.53c0.58,0,1.31,0.33,2.19,0.98
+		c1.02,0.73,1.53,1.35,1.53,1.86C63.91,23.83,63.63,24.57,63.09,25.59z M95.3,21.22c0.73,0.73,1.09,1.33,1.09,1.8
+		c0,0.58-0.77,1.82-2.3,3.72c-4.01,4.96-9.92,11.28-17.72,18.98c-7.47,7.36-12.54,11.94-15.2,13.73c3.32,4.7,6.63,9.42,9.95,14.16
+		c5.07,7.15,9.44,11.94,13.13,14.38c1.6,1.09,3.04,1.64,4.32,1.64c1.28,0,2.77-0.62,4.48-1.86c0.36-0.25,0.71-0.38,1.04-0.38
+		c0.77,0,1.15,0.38,1.15,1.15c0,0.44-0.16,0.89-0.49,1.37c-1.09,1.71-3.48,4.21-7.16,7.49c-0.84,0.77-1.66,1.15-2.46,1.15
+		c-0.95,0-2.02-0.49-3.23-1.48c-4.48-3.57-9.52-9.28-15.09-17.12c-5.83-8.2-9.88-13.29-12.14-15.26c-1.17,0.47-2.1,0.71-2.79,0.71
+		c-1.28,0-1.99-0.95-2.13-2.84c-0.04-0.58-0.05-1.08-0.05-1.48c0-1.53,0.41-2.65,1.23-3.36s2.49-1.34,5-1.89
+		c0.91-0.18,1.6,0.05,2.08,0.71c4.3-3.32,9.17-7.78,14.6-13.4c5.36-5.5,8.6-9.37,9.73-11.59c-2.3-1.35-3.45-2.46-3.45-3.34
+		c0-0.69,0.66-1.18,1.97-1.48c1.82-1.28,3.99-3.34,6.51-6.18c1.06-1.2,2.19-1.8,3.39-1.8C92.14,18.76,93.66,19.58,95.3,21.22z"/>
+</g>
+</svg>

front/public/icons

@@ -1 +0,0 @@
-../../icons

front/src/components/episode.tsx

@@ -34,7 +34,7 @@ const displayNumber = (episode: Episode) => {
 export const EpisodeBox = ({ episode, sx }: { episode?: Episode; sx: SxProps }) => {
 	return (
 		<Box sx={sx}>
-			<Image img={episode?.thumbnail} width="100%" aspectRatio="16/9" />
+			<Image img={episode?.thumbnail} alt="" width="100%" aspectRatio="16/9" />
 			<Typography>{episode?.name ?? <Skeleton />}</Typography>
 			<Typography variant="body2">{episode?.overview ?? <Skeleton />}</Typography>
 		</Box>
@@ -61,7 +61,7 @@ export const EpisodeLine = ({ episode, sx }: { episode?: Episode; sx?: SxProps }
 				<Typography variant="overline" align="center" sx={{ width: "4rem", flexShrink: 0 }}>
 					{episode ? displayNumber(episode) : <Skeleton />}
 				</Typography>
-				<Image img={episode?.thumbnail} width="18%" aspectRatio="16/9" sx={{ flexShrink: 0 }} />
+				<Image img={episode?.thumbnail} alt="" width="18%" aspectRatio="16/9" sx={{ flexShrink: 0 }} />
 				{episode ? (
 					<Box sx={{ flexGrow: 1 }}>
 						<Typography variant="h6">{episode.name ?? t("show.episodeNoMetadata")}</Typography>

front/src/components/navbar.tsx

@@ -32,7 +32,7 @@ import {
 	AppBarProps,
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
-import logo from "../../public/icons/icon.svg";
+/* import logo from "../public/icons/icon.svg"; */
 import useTranslation from "next-translate/useTranslation";
 import Image from "next/image";
 import { ButtonLink } from "~/utils/link";
@@ -55,7 +55,7 @@ const KyooTitle = (props: { sx: SxProps<Theme> }) => {
 				}}
 				href="/"
 			>
-				<Image src={logo} width={24} height={24} alt="" />
+				<Image src={"/icon.svg"} width={24} height={24} alt="" />
 				<Typography
 					variant="h6"
 					noWrap

front/src/utils/query.ts

@@ -34,10 +34,12 @@ const queryFn = async <Data>(
 	type: z.ZodType<Data>,
 	context: QueryFunctionContext,
 ): Promise<Data> => {
+	const kyoo_url = process.env.KYOO_URL ?? "http://localhost:5000";
+
 	let resp;
 	try {
 		resp = await fetch(
-			[typeof window === "undefined" ? process.env.KYOO_URL : "/api"]
+			[typeof window === "undefined" ? kyoo_url : "/api"]
 				.concat(
 					context.pageParam ? [context.pageParam] : (context.queryKey.filter((x) => x) as string[]),
 				)

nginx.conf.template

@@ -0,0 +1,12 @@
+server {
+	listen ${PORT};
+	root /usr/share/nginx/html;
+
+	location / {
+		proxy_pass ${FRONT_URL};
+	}
+
+	location /api/ {
+		proxy_pass ${BACK_URL}/;
+	}
+}