root: attempt to build static image without django's collectstatic (#360)

* root: attempt to build static image without django's collectstatic

* web: move static dockerfile to /web

* web: fix dockerfile path

* web: improve image size by not copying node_modules

.dockerignore

@@ -3,4 +3,4 @@ helm
 static
 htmlcov
 *.env.yml
-node_modules/**
+**/node_modules

.github/workflows/release.yml

@@ -45,7 +45,7 @@ jobs:
         run: docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD
       - name: Building Docker Image
         run: |
-          cd proxy
+          cd proxy/
           docker build \
           --no-cache \
           -t beryju/passbook-proxy:0.12.11-stable \
@@ -57,15 +57,6 @@ jobs:
         run: docker push beryju/passbook-proxy:latest
   build-static:
     runs-on: ubuntu-latest
-    services:
-      postgres:
-        image: postgres:latest
-        env:
-          POSTGRES_DB: passbook
-          POSTGRES_USER: passbook
-          POSTGRES_PASSWORD: "EK-5jnKfjrGRm<77"
-      redis:
-        image: redis:latest
     steps:
       - uses: actions/checkout@v1
       - name: Docker Login Registry
@@ -74,12 +65,13 @@ jobs:
           DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
         run: docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD
       - name: Building Docker Image
-        run: docker build
-          --no-cache
-          --network=$(docker network ls | grep github | awk '{print $1}')
-          -t beryju/passbook-static:0.12.11-stable
-          -t beryju/passbook-static:latest
-          -f static.Dockerfile .
+        run: |
+          cd web/
+          docker build \
+          --no-cache \
+          -t beryju/passbook-static:0.12.11-stable \
+          -t beryju/passbook-static:latest \
+          -f Dockerfile .
       - name: Push Docker Container to Registry (versioned)
         run: docker push beryju/passbook-static:0.12.11-stable
       - name: Push Docker Container to Registry (latest)

azure-pipelines.yml

@@ -371,27 +371,3 @@ stages:
             command: 'buildAndPush'
             Dockerfile: 'Dockerfile'
             tags: "gh-${{ variables.branchName }}"
-      - job: build_static
-        pool:
-          vmImage: 'ubuntu-latest'
-        steps:
-        - task: DockerCompose@0
-          displayName: Run services
-          inputs:
-            dockerComposeFile: 'scripts/ci.docker-compose.yml'
-            action: 'Run services'
-            buildImages: false
-        - task: Docker@2
-          inputs:
-            containerRegistry: 'dockerhub'
-            repository: 'beryju/passbook-static'
-            command: 'build'
-            Dockerfile: 'static.Dockerfile'
-            tags: "gh-${{ variables.branchName }}"
-            arguments: "--network=beryjupassbook_default"
-        - task: Docker@2
-          inputs:
-            containerRegistry: 'dockerhub'
-            repository: 'beryju/passbook-static'
-            command: 'push'
-            tags: "gh-${{ variables.branchName }}"

passbook/core/templates/base/skeleton.html

@@ -13,9 +13,9 @@
         <title>{% block title %}{% trans title|default:config.passbook.branding.title %}{% endblock %}</title>
         <link rel="icon" type="image/png" href="{% static 'dist/assets/images/logo.png' %}">
         <link rel="shortcut icon" type="image/png" href="{% static 'dist/assets/images/logo.png' %}">
-        <link rel="stylesheet" type="text/css" href="{% static 'node_modules/@patternfly/patternfly/patternfly.css' %}">
-        <link rel="stylesheet" type="text/css" href="{% static 'node_modules/@patternfly/patternfly/patternfly-addons.css' %}">
-        <link rel="stylesheet" type="text/css" href="{% static 'node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css' %}">
+        <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.css' %}">
+        <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly-addons.css' %}">
+        <link rel="stylesheet" type="text/css" href="{% static 'dist/fontawesome.min.css' %}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/passbook.css' %}">
         <script src="{% url 'javascript-catalog' %}"></script>
         <script src="{% static 'dist/main.js' %}" type="module"></script>

static.Dockerfile

@@ -1,51 +0,0 @@
-FROM python:3.9-slim-buster as locker
-
-COPY ./Pipfile /app/
-COPY ./Pipfile.lock /app/
-
-WORKDIR /app/
-
-RUN pip install pipenv && \
-    pipenv lock -r > requirements.txt && \
-    pipenv lock -rd > requirements-dev.txt
-
-FROM python:3.9-slim-buster as static-build
-
-COPY --from=locker /app/requirements.txt /app/
-COPY --from=locker /app/requirements-dev.txt /app/
-
-WORKDIR /app/
-
-RUN apt-get update && \
-    apt-get install -y --no-install-recommends postgresql-client-11 build-essential libxmlsec1-dev pkg-config && \
-    rm -rf /var/lib/apt/ && \
-    pip install -r requirements.txt  --no-cache-dir && \
-    apt-get remove --purge -y build-essential && \
-    apt-get autoremove --purge && \
-    adduser --system --no-create-home --uid 1000 --group --home /app passbook
-
-COPY ./passbook/ /app/passbook
-COPY ./manage.py /app/
-
-WORKDIR /app/
-
-ENV PASSBOOK_POSTGRESQL__HOST=postgres
-ENV PASSBOOK_REDIS__HOST=redis
-ENV PASSBOOK_POSTGRESQL__USER=passbook
-# CI Password, same as in .github/workflows/ci.yml
-ENV PASSBOOK_POSTGRESQL__PASSWORD="EK-5jnKfjrGRm<77"
-RUN mkdir -p /app/web && \
-    ./manage.py collectstatic --no-input
-
-FROM node as npm-builder
-
-COPY ./web /static/
-
-RUN cd /static && npm i && npm run build
-
-FROM nginx
-
-COPY --from=static-build /app/static /usr/share/nginx/html/static
-COPY --from=npm-builder /static/robots.txt /usr/share/nginx/html/robots.txt
-COPY --from=npm-builder /static/node_modules /usr/share/nginx/html/static/node_modules
-COPY --from=npm-builder /static/dist/* /usr/share/nginx/html/static/dist/

web/.dockerignore

@@ -0,0 +1,6 @@
+env
+helm
+static
+htmlcov
+*.env.yml
+**/node_modules

web/Dockerfile

@@ -0,0 +1,10 @@
+FROM node as npm-builder
+
+COPY . /static/
+
+RUN cd /static && npm i && npm run build
+
+FROM nginx
+
+COPY --from=npm-builder /static/robots.txt /usr/share/nginx/html/robots.txt
+COPY --from=npm-builder /static/dist/ /usr/share/nginx/html/static/dist/

web/azure-pipelines.yml

@@ -2,7 +2,7 @@ trigger:
   - master
 
 stages:
-  - stage: link
+  - stage: lint
     jobs:
       - job: lint
         pool:
@@ -21,7 +21,7 @@ stages:
               command: 'custom'
               workingDir: 'web/'
               customCommand: 'run lint'
-  - stage: Build
+  - stage: build_local
     jobs:
       - job: build
         pool:
@@ -40,3 +40,17 @@ stages:
               command: 'custom'
               workingDir: 'web/'
               customCommand: 'run build'
+  - stage: build_docker
+    jobs:
+      - job: build_static
+        pool:
+          vmImage: 'ubuntu-latest'
+        steps:
+        - task: Docker@2
+          inputs:
+            containerRegistry: 'dockerhub'
+            repository: 'beryju/passbook-static'
+            command: 'buildAndPush'
+            Dockerfile: 'web/Dockerfile'
+            tags: "gh-${{ variables.branchName }}"
+            buildContext: 'web/'

web/rollup.config.js

@@ -9,6 +9,10 @@ import copy from "rollup-plugin-copy";
 import externalGlobals from "rollup-plugin-external-globals";
 
 const resources = [
+    { src: "node_modules/@patternfly/patternfly/patternfly.css", dest: "dist/" },
+    { src: "node_modules/@patternfly/patternfly/patternfly-addons.css", dest: "dist/" },
+    { src: "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css", dest: "dist/" },
+    { src: "node_modules/@patternfly/patternfly/assets/*", dest: "dist/assets/" },
     { src: "src/index.html", dest: "dist" },
     { src: "src/passbook.css", dest: "dist" },
     { src: "src/assets/*", dest: "dist/assets" },