build(docker): improve cache on web-builder stage (#1034)

* upgrade pnpm

* add postcss-import npm dependency

* fix postcss.config.js lint

* improve cache for Docker web-builder stage

Dockerfile

@@ -1,10 +1,14 @@
 # build web
 FROM node:18.17.0-alpine3.18 AS web-builder
-COPY . ./
+RUN corepack enable
+
 WORKDIR /web
-RUN corepack enable && \
-    pnpm install --frozen-lockfile && \
-    pnpm run build
+
+COPY web/package.json web/pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+COPY web ./
+RUN pnpm run build
 
 # build app
 FROM golang:1.20-alpine3.18 AS app-builder
@@ -13,7 +17,7 @@ ARG VERSION=dev
 ARG REVISION=dev
 ARG BUILDTIME
 
-RUN apk add --no-cache git make build-base tzdata
+RUN apk add --no-cache git build-base tzdata
 
 ENV SERVICE=autobrr
 
@@ -23,7 +27,6 @@ COPY go.mod go.sum ./
 RUN go mod download
 
 COPY . ./
-
 COPY --from=web-builder /web/dist ./web/dist
 COPY --from=web-builder /web/build.go ./web
 
@@ -54,4 +57,3 @@ COPY --from=app-builder /src/bin/autobrrctl /usr/local/bin/
 EXPOSE 7474
 
 ENTRYPOINT ["/usr/local/bin/autobrr", "--config", "/config"]
-#CMD ["--config", "/config"]

web/package.json

@@ -3,7 +3,7 @@
   "version": "0.2.0",
   "private": true,
   "homepage": ".",
-  "packageManager": "pnpm@8.6.2",
+  "packageManager": "pnpm@8.6.11",
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
@@ -55,6 +55,7 @@
     "formik": "^2.4.3",
     "http-proxy-middleware": "^2.0.6",
     "postcss": "^8.4.27",
+    "postcss-import": "^15.1.0",
     "react": "^18.2.0",
     "react-debounce-input": "^3.3.0",
     "react-dom": "^18.2.0",

web/pnpm-lock.yaml

@@ -86,6 +86,9 @@ dependencies:
   postcss:
     specifier: ^8.4.27
     version: 8.4.27
+  postcss-import:
+    specifier: ^15.1.0
+    version: 15.1.0(postcss@8.4.27)
   react:
     specifier: ^18.2.0
     version: 18.2.0

web/postcss.config.js

@@ -1,8 +1,8 @@
-module.exports = {  
-    plugins: {
-      "postcss-import": {},
-      "tailwindcss/nesting": {},
-      tailwindcss: {},    
-      autoprefixer: {},  
-    }
-  }
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};