From a776278cafa4f0f73010fdf472b7ea16dc1cf183 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Sat, 24 Sep 2022 14:30:46 +0900 Subject: [PATCH] Add front docker --- .dockerignore | 7 +++++++ Dockerfile | 8 -------- docker-compose.yml | 21 +++++++++++++++++++-- front/.dockerignore | 7 +++++++ front/Dockerfile | 24 ++++++++++++++++++++++++ front/next.config.js | 13 +++++++------ front/public/icon.svg | 27 +++++++++++++++++++++++++++ front/public/icons | 1 - front/src/components/episode.tsx | 4 ++-- front/src/components/navbar.tsx | 4 ++-- front/src/utils/query.ts | 4 +++- nginx.conf.template | 12 ++++++++++++ 12 files changed, 110 insertions(+), 22 deletions(-) create mode 100644 front/.dockerignore create mode 100644 front/Dockerfile create mode 100644 front/public/icon.svg delete mode 120000 front/public/icons create mode 100644 nginx.conf.template diff --git a/.dockerignore b/.dockerignore index f09d195d..745db582 100644 --- a/.dockerignore +++ b/.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 diff --git a/Dockerfile b/Dockerfile index 8f758351..ffb1ea59 100644 --- a/Dockerfile +++ b/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"] diff --git a/docker-compose.yml b/docker-compose.yml index 8e736ffd..53c0e126 100644 --- a/docker-compose.yml +++ b/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 diff --git a/front/.dockerignore b/front/.dockerignore new file mode 100644 index 00000000..c5500558 --- /dev/null +++ b/front/.dockerignore @@ -0,0 +1,7 @@ +Dockerfile +.dockerignore +node_modules +npm-debug.log +README.md +.next +.git diff --git a/front/Dockerfile b/front/Dockerfile new file mode 100644 index 00000000..35f37c50 --- /dev/null +++ b/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"] diff --git a/front/next.config.js b/front/next.config.js index a069d7e8..d3a25a4b 100755 --- a/front/next.config.js +++ b/front/next.config.js @@ -24,12 +24,7 @@ const nextConfig = { reactStrictMode: true, swcMinify: true, - env: { - KYOO_URL: process.env.KYOO_URL ?? "http://localhost:5000", - }, - rewrites: async () => [ - { source: "/api/:path*", destination: process.env.KYOO_URL ?? "http://localhost:5000/:path*" }, - ], + output: "standalone", 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; diff --git a/front/public/icon.svg b/front/public/icon.svg new file mode 100644 index 00000000..6ce52497 --- /dev/null +++ b/front/public/icon.svg @@ -0,0 +1,27 @@ + + + + + + + + + diff --git a/front/public/icons b/front/public/icons deleted file mode 120000 index 463cacc8..00000000 --- a/front/public/icons +++ /dev/null @@ -1 +0,0 @@ -../../icons \ No newline at end of file diff --git a/front/src/components/episode.tsx b/front/src/components/episode.tsx index d7dc4232..7bb10b95 100644 --- a/front/src/components/episode.tsx +++ b/front/src/components/episode.tsx @@ -34,7 +34,7 @@ const displayNumber = (episode: Episode) => { export const EpisodeBox = ({ episode, sx }: { episode?: Episode; sx: SxProps }) => { return ( - + {episode?.name ?? } {episode?.overview ?? } @@ -61,7 +61,7 @@ export const EpisodeLine = ({ episode, sx }: { episode?: Episode; sx?: SxProps } {episode ? displayNumber(episode) : } - + {episode ? ( {episode.name ?? t("show.episodeNoMetadata")} diff --git a/front/src/components/navbar.tsx b/front/src/components/navbar.tsx index 3ddf0600..0563b77a 100644 --- a/front/src/components/navbar.tsx +++ b/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 }) => { }} href="/" > - + ( type: z.ZodType, context: QueryFunctionContext, ): Promise => { + 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[]), ) diff --git a/nginx.conf.template b/nginx.conf.template new file mode 100644 index 00000000..5a35a11d --- /dev/null +++ b/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}/; + } +}