ci: update Dockerfile to new config.json client configuration

* Fix some markup validation errors in index.html * Fix config.json fetching * Fix incorrect variable name for external config
jellyfin · Mar 17, 2023 · 5ad7c44 · 5ad7c44
1 parent 2af6809
commit 5ad7c44
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 20 deletions.
diff --git a/.docker/docker-entrypoint.sh b/.docker/docker-entrypoint.sh
@@ -0,0 +1,14 @@
+#!/bin/sh
+
+## If the command has not been replaced by the user (i.e docker run image /bin/sh),
+## follow through the setup process
+if [[ "$*" = "nginx -g daemon off;" ]]; then
+    echo "==== Starting Jellyfin Vue setup ===="
+    echo
+    /setup.sh
+    echo
+    echo "====      Setup finished!        ===="
+    echo -e "\n"
+fi
+
+exec "$@"
diff --git a/.docker/nginx.conf b/.docker/nginx.conf
@@ -1,11 +1,9 @@
 server {
     listen 80;
-
     root /usr/share/nginx/html;
-
     location / {
         # First attempt to serve request as file, then as directory, then fall back to redirecting to index.html
-        # This is needed for history mode in Vue router
+        # This is needed for history mode in Vue router: https://router.vuejs.org/guide/essentials/history-mode.html#nginx
         try_files $uri $uri/ /index.html;
     }
 }
diff --git a/.docker/setup.sh b/.docker/setup.sh
@@ -0,0 +1,21 @@
+#!/bin/sh
+
+CONFIG_FILE_PATH="/usr/share/nginx/html/config.json"
+echo "Writing data to $CONFIG_FILE_PATH..."
+
+if [[ "$HISTORY_ROUTER_MODE" == "0" ]]; then
+    ROUTER_MODE="hash"
+else
+    ROUTER_MODE="history"
+fi
+
+echo "DEFAULT_SERVERS value: $DEFAULT_SERVERS"
+echo "ROUTER_MODE value: $ROUTER_MODE"
+
+output=$(jq -r --arg R_MODE "$ROUTER_MODE" --arg SERVS "$DEFAULT_SERVERS" '
+    .defaultServerURLs = ($SERVS | split(",")) |
+    .routerMode = $R_MODE
+    ' $CONFIG_FILE_PATH
+)
+
+echo "$output" > $CONFIG_FILE_PATH
diff --git a/Dockerfile b/Dockerfile
@@ -12,13 +12,9 @@ ENV DEFAULT_SERVERS=$DEFAULT_SERVERS
 ENV HISTORY_ROUTER_MODE=$HISTORY_ROUTER_MODE
 ENV IS_STABLE=$IS_STABLE
 
-# Build dependencies required to build some node modules on ARM platforms. git is needed for fetching the latest commit
+# Prepare environment. git is needed for fetching the latest commit
 RUN apk add --no-cache git
-
-# Set workdir
 WORKDIR /app
-
-# Copy files to workdir
 COPY . .
 
 # Install dependencies
@@ -28,14 +24,16 @@ RUN npm ci --no-audit
 RUN if [[ $IS_STABLE == "0" ]] ; then export COMMIT_HASH=$(git rev-parse HEAD) ; fi && npm run build
 
 # Deploy built distribution to nginx
-FROM nginx:alpine
+FROM nginx:alpine-slim
 
 COPY --from=build /app/frontend/dist/ /usr/share/nginx/html/
-COPY --from=build /app/.docker/nginx.conf /etc/nginx/conf.d/default.conf 
+COPY .docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY .docker/*.sh /
+RUN apk add --no-cache jq && rm -rf /docker-entrypoint.d && chmod +x /*.sh
 
 EXPOSE 80
 
 # Set labels
 LABEL maintainer="Jellyfin Packaging Team - packaging@jellyfin.org"
 LABEL org.opencontainers.image.source="https://github.com/jellyfin/jellyfin-vue"
-LABEL org.opencontainers.image.description="Commit: ${COMMIT_HASH} History router rode: ${HISTORY_ROUTER_MODE}"
+LABEL org.opencontainers.image.description="Commit: ${COMMIT_HASH}"
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,6 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
     <style>
       @keyframes gradient {
         0% {
@@ -85,12 +90,6 @@
         transition: opacity 0.75s linear;
       }
     </style>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
-
     <script type="module" src="src/main.ts"></script>
     <title>Jellyfin Vue</title>
   </head>

diff --git a/frontend/src/plugins/router/index.ts b/frontend/src/plugins/router/index.ts
@@ -17,7 +17,7 @@ import { useRemote } from '@/composables';
 
 const router = createRouter({
   history:
-    (await getJSONConfig()).historyMode === 'history'
+    (await getJSONConfig()).routerMode === 'history'
       ? createWebHistory()
       : createWebHashHistory(),
   routes: setupLayouts(generatedRoutes)

diff --git a/frontend/src/utils/external-config.ts b/frontend/src/utils/external-config.ts
@@ -3,7 +3,7 @@ import { isNil } from 'lodash-es';
 
 interface ExternalJSONConfig {
   defaultServerURLs: Array<string>;
-  historyMode: 'hash' | 'history';
+  routerMode: 'hash' | 'history';
 }
 
 let externalConfig: ExternalJSONConfig | undefined;
@@ -15,7 +15,7 @@ let externalConfig: ExternalJSONConfig | undefined;
 export async function getJSONConfig(): Promise<ExternalJSONConfig> {
   if (isNil(externalConfig)) {
     externalConfig = destr(
-      JSON.stringify(await (await fetch('./config.json')).json())
+      JSON.stringify(await (await fetch('/config.json')).json())
     ) as ExternalJSONConfig;
   }