Fold NPM/node into parent container; implement vite server on dev env.

2023-08-05 11:18:38 -05:00 · 2023-08-05 11:18:38 -05:00 · 2e09fbfde1
parent 8504423019
commit 2e09fbfde1
16 changed files with 191 additions and 35 deletions
--- a/.github/workflows/default.yml
+++ b/.github/workflows/default.yml
@ -143,8 +143,6 @@ jobs:
          path: |
            .gitinfo
            translations
-            web/static/vite_dist
-            web/static/api/openapi.yml
  
  build:
    name: Build & Publish
--- a/90
+++ b/90
@ -58,8 +58,75 @@ RUN bash /bd_build/redis/setup.sh
 RUN bash /bd_build/cleanup.sh \
    && rm -rf /bd_build

+USER azuracast
+
+RUN touch /var/azuracast/.docker
+
+USER root
+
 VOLUME ["/var/azuracast/stations", "/var/azuracast/uploads", "/var/azuracast/backups", "/var/azuracast/sftpgo/persist", "/var/azuracast/servers/shoutcast2", "/var/azuracast/meilisearch/persist"]

+#
+# Development Build
+#
+FROM pre-final AS development
+
+# Dev build step
+COPY ./util/docker/common /bd_build/
+COPY ./util/docker/dev /bd_build/dev
+
+RUN bash /bd_build/dev/setup.sh \
+    && bash /bd_build/cleanup.sh \
+    && rm -rf /bd_build
+
+USER azuracast
+
+WORKDIR /var/azuracast/www
+
+COPY --chown=azuracast:azuracast . .
+
+RUN composer install --no-ansi --no-interaction
+
+WORKDIR /var/azuracast/www/frontend
+
+RUN npm ci --include=dev
+
+WORKDIR /var/azuracast/www
+
+USER root
+
+EXPOSE 80 443 2022
+EXPOSE 8000-8999
+
+# Sensible default environment variables.
+ENV TZ="UTC" \
+    LANG="en_US.UTF-8" \
+    PATH="${PATH}:/var/azuracast/servers/shoutcast2" \
+    DOCKER_IS_STANDALONE="true" \
+    APPLICATION_ENV="development" \
+    MYSQL_HOST="localhost" \
+    MYSQL_PORT=3306 \
+    MYSQL_USER="azuracast" \
+    MYSQL_PASSWORD="azur4c457" \
+    MYSQL_DATABASE="azuracast" \
+    ENABLE_REDIS="true" \
+    REDIS_HOST="localhost" \
+    REDIS_PORT=6379 \
+    REDIS_DB=1 \
+    NGINX_RADIO_PORTS="default" \
+    NGINX_WEBDJ_PORTS="default" \
+    COMPOSER_PLUGIN_MODE="false" \
+    ADDITIONAL_MEDIA_SYNC_WORKER_COUNT=0 \
+    PROFILING_EXTENSION_ENABLED=1 \
+    PROFILING_EXTENSION_ALWAYS_ON=0 \
+    PROFILING_EXTENSION_HTTP_KEY=dev \
+    PROFILING_EXTENSION_HTTP_IP_WHITELIST=* \
+    ENABLE_WEB_UPDATER="false"
+
+# Entrypoint and default command
+ENTRYPOINT ["tini", "--", "/usr/local/bin/my_init"]
+CMD ["--no-main-command"]
+
 #
 # Final build (Just environment vars and squishing the FS)
 #
@ -83,9 +150,21 @@ COPY --chown=azuracast:azuracast . .
 RUN composer dump-autoload --optimize --classmap-authoritative \
    && touch /var/azuracast/.docker

+WORKDIR /var/azuracast/www/frontend
+
+RUN npm ci --include=dev \
+    && npm run build
+
+WORKDIR /var/azuracast/www
+
+RUN php bin/console locale:import \
+    && php bin/console azuracast:api:docs \
+    && rm -rf ./translations \
+    && rm -rf ./frontend
+
 USER root

-EXPOSE 80 2022
+EXPOSE 80 443 2022
 EXPOSE 8000-8999

 # Sensible default environment variables.
@ -105,16 +184,9 @@ ENV TZ="UTC" \
    REDIS_DB=1 \
    NGINX_RADIO_PORTS="default" \
    NGINX_WEBDJ_PORTS="default" \
-    PREFER_RELEASE_BUILDS="false" \
    COMPOSER_PLUGIN_MODE="false" \
    ADDITIONAL_MEDIA_SYNC_WORKER_COUNT=0 \
-    PROFILING_EXTENSION_ENABLED=0 \
-    PROFILING_EXTENSION_ALWAYS_ON=0 \
-    PROFILING_EXTENSION_HTTP_KEY=dev \
-    PROFILING_EXTENSION_HTTP_IP_WHITELIST=* \
-    ENABLE_WEB_UPDATER="true" \
-    ENABLE_MEILISEARCH="true" \
-    MEILISEARCH_MASTER_KEY="zejNISMlGe_6IUGBsdjfG6c6Qi8g2RngTxOmWsTbwvw"
+    ENABLE_WEB_UPDATER="true"

 # Entrypoint and default command
 ENTRYPOINT ["tini", "--", "/usr/local/bin/my_init"]
--- a/9
+++ b/9
@ -35,7 +35,6 @@ update: # Update everything (i.e. after a branch update)
 	$(MAKE) down
 	docker-compose run --rm web gosu azuracast composer install
 	docker-compose run --rm web azuracast_cli azuracast:setup --update
-	$(MAKE) frontend-build
 	$(MAKE) up

 test:
@ -47,14 +46,6 @@ bash:
 bash-root:
 	docker-compose exec web bash

-frontend-bash:
-	docker-compose -p azuracast_frontend -f docker-compose.frontend.yml build
-	docker-compose -p azuracast_frontend -f docker-compose.frontend.yml run -e NODE_ENV=development --rm frontend
-
-frontend-build:
-	docker-compose -p azuracast_frontend -f docker-compose.frontend.yml build
-	docker-compose -p azuracast_frontend -f docker-compose.frontend.yml run -e NODE_ENV=development --rm frontend npm run build
-
 generate-locales:
 	docker-compose -p azuracast_frontend -f docker-compose.frontend.yml build
 	docker-compose -p azuracast_frontend -f docker-compose.frontend.yml run -e NODE_ENV=development --rm frontend npm run generate-locales
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@ -2,6 +2,7 @@ services:
  web:
    build:
      context: .
+      target: development
    ports:
      - "127.0.0.1:3306:3306" # MariaDB
      - "127.0.0.1:6025:6025" # Centrifugo
@ -9,6 +10,7 @@ services:
    volumes:
      - $PWD/util/local_ssl/default.crt:/var/azuracast/acme/ssl.crt:ro
      - $PWD/util/local_ssl/default.key:/var/azuracast/acme/ssl.key:ro
+      - $PWD/frontend/node_modules:/var/azuracast/www/frontend/node_modules
      - $PWD/vendor:/var/azuracast/www/vendor
      - $PWD:/var/azuracast/www
    extra_hosts:
--- a/docker-compose.frontend.yml
+++ b/docker-compose.frontend.yml
@ -1,11 +0,0 @@
-services:
-  frontend:
-    container_name: azuracast_frontend
-    build:
-      context: ./frontend
-    user: "${AZURACAST_PUID:-1000}:${AZURACAST_PGID:-1000}"
-    volumes:
-      - $PWD/frontend:/data/frontend
-      - $PWD/frontend/node_modules:/data/frontend/node_modules
-      - $PWD/translations:/data/translations
-      - $PWD/web/static:/data/web/static
--- a/frontend/package.json
+++ b/frontend/package.json
@ -3,6 +3,7 @@
  "license": "Apache-2.0",
  "scripts": {
    "build": "vite build",
+    "serve": "vite",
    "generate-locales": "vue-gettext-extract"
  },
  "dependencies": {
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -37,6 +37,12 @@ export default defineConfig({
        emptyOutDir: true,
        outDir: resolve(__dirname, '../web/static/vite_dist')
    },
+    server: {
+        strictPort: true,
+        fs: {
+            allow: ['..']
+        }
+    },
    resolve: {
        alias: {
            '!': resolve(__dirname),
--- a/src/Service/ServiceControl.php
+++ b/src/Service/ServiceControl.php
@ -86,6 +86,7 @@ final class ServiceControl
            'redis' => __('Cache'),
            'sftpgo' => __('SFTP service'),
            'centrifugo' => __('Live Now Playing updates'),
+            'vite' => __('Frontend Assets'),
        ];

        if (!$this->centrifugo->isSupported()) {
@ -100,6 +101,10 @@ final class ServiceControl
            unset($services['redis']);
        }

+        if (!$this->environment->isDevelopment()) {
+            unset($services['vite']);
+        }
+
        return $services;
    }
 }
--- a/src/View.php
+++ b/src/View.php
@ -67,14 +67,33 @@ final class View extends Engine
            }
        );

-        $vueComponents = Json::loadFromFile($environment->getBaseDirectory() . '/web/static/vite_dist/manifest.json');
+        $vueComponents = (!$environment->isDevelopment())
+            ? Json::loadFromFile($environment->getBaseDirectory() . '/web/static/vite_dist/manifest.json')
+            : [];
+
        $this->registerFunction(
            'getVueComponentInfo',
-            function (string $componentPath) use ($vueComponents) {
+            function (string $componentPath) use ($vueComponents, $environment) {
+                $assetRoot = '/static/vite_dist';
+
+                if ($environment->isDevelopment()) {
+                    return [
+                        'js' => $assetRoot . '/' . $componentPath,
+                        'css' => [],
+                        'prefetch' => [],
+                    ];
+                }
+
                if (!isset($vueComponents[$componentPath])) {
                    return null;
                }

+                $includes = [
+                    'js' => $assetRoot . '/' . $vueComponents[$componentPath]['file'],
+                    'css' => [],
+                    'prefetch' => [],
+                ];
+
                $assetRoot = '/static/vite_dist';
                $includes = [
                    'js' => $assetRoot . '/' . $vueComponents[$componentPath]['file'],
--- a/templates/partials/head.phtml
+++ b/templates/partials/head.phtml
@ -1,8 +1,15 @@
 <?php
 /**
 * @var App\Customization $customization
+ * @var App\Environment $environment
 */

+if ($environment->isDevelopment()) {
+    echo <<<HTML
+        <script type="module" src="/static/vite_dist/@vite/client"></script>
+    HTML;
+}
+
 $componentDeps = $this->getVueComponentInfo('js/layout.js');

 echo <<<HTML
--- a/util/docker/dev/service.full/vite.conf
+++ b/util/docker/dev/service.full/vite.conf
@ -0,0 +1,19 @@
+[program:vite]
+directory=/var/azuracast/www/frontend
+command=node ./node_modules/vite/bin/vite.js
+user=azuracast
+priority=700
+numprocs=1
+autostart=true
+autorestart=true
+
+stopasgroup=true
+killasgroup=true
+
+stdout_logfile=/var/azuracast/www_tmp/service_vite.log
+stdout_logfile_maxbytes=5MB
+stdout_logfile_backups=5
+redirect_stderr=true
+
+stdout_events_enabled = true
+stderr_events_enabled = true
--- a/util/docker/dev/setup.sh
+++ b/util/docker/dev/setup.sh
@ -0,0 +1,30 @@
+#!/bin/bash
+set -e
+set -x
+
+export DEBIAN_FRONTEND=noninteractive
+
+# apt-get update
+
+# Install common scripts
+# cp -rT /bd_build/dev/scripts/ /usr/local/bin
+
+# cp -rT /bd_build/dev/startup_scripts/. /etc/my_init.d/
+
+# cp -rT /bd_build/dev/service.minimal/. /etc/supervisor/minimal.conf.d/
+
+cp -rT /bd_build/dev/service.full/. /etc/supervisor/full.conf.d/
+
+# Run service setup for all setup scripts
+# for f in /bd_build/web/setup/*.sh; do
+#   bash "$f" -H
+# done
+
+# Cleanup
+# apt-get -y autoremove
+# apt-get clean
+# rm -rf /var/lib/apt/lists/*
+# rm -rf /tmp/tmp*
+
+# chmod -R a+x /usr/local/bin
+# chmod -R +x /etc/my_init.d
--- a/util/docker/web/nginx/azuracast.conf.tmpl
+++ b/util/docker/web/nginx/azuracast.conf.tmpl
@ -10,6 +10,10 @@ upstream centrifugo {
    server 127.0.0.1:6020;
 }

+upstream vite {
+    server 127.0.0.1:5173;
+}
+
 # Internal connection handler for PubSub and internal API calls
 server {
    listen 127.0.0.1:6010;
@ -110,9 +114,16 @@ server {
        try_files $uri =404;
    }

+    {{if eq .Env.APPLICATION_ENV "development"}}
+    location /static/vite_dist {
+        include proxy_params;
+        proxy_pass http://vite$request_uri;
+    }
+    {{else}}
    location /static/vite_dist {
        expires 365d;
    }
+    {{end}}

    location ~ ^/index\.php(/|$) {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
--- a/util/docker/web/service.full/centrifugo.conf
+++ b/util/docker/web/service.full/centrifugo.conf
@ -1,6 +1,6 @@
 [program:centrifugo]
+directory=/var/azuracast/centrifugo
 command=centrifugo -c /var/azuracast/centrifugo/config.yaml
-dir=/var/azuracast/centrifugo
 user=azuracast
 priority=700
 numprocs=1
--- a/util/docker/web/service.full/sftpgo.conf
+++ b/util/docker/web/service.full/sftpgo.conf
@ -1,6 +1,6 @@
 [program:sftpgo]
+directory=/var/azuracast/sftpgo
 command=sftpgo --config-dir=/var/azuracast/sftpgo serve -l ""
-dir=/var/azuracast/sftpgo
 user=azuracast
 priority=700
 numprocs=1
--- a/util/docker/web/setup/node.sh
+++ b/util/docker/web/setup/node.sh
@ -0,0 +1,6 @@
+#!/bin/bash
+set -e
+set -x
+
+curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
+apt-get install -y nodejs