enhance dockerfile

- use slim base image
- use multi stage image
- fix tagging with :masterr

.github/workflows/docker-image.yml

@@ -29,4 +29,4 @@ jobs:
           platforms: linux/amd64
           push: true
           tags: |
-            ${{ secrets.DOCKER_USERNAME }}/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
+            ${{ secrets.DOCKER_USERNAME }}/${{ env.IMAGE_NAME }}

Dockerfile

@@ -1,4 +1,15 @@
-FROM node:16-buster
+FROM node:16-buster-slim
+
+# install dev dependencies for sui2/live-server
+WORKDIR /live-server
+ADD live-server/package.json ./
+RUN npm i --dev
+
+# build sui2/live-server frontend
+ADD live-server ./
+RUN npm run build
+
+FROM node:16-buster-slim
 
 ENV TINI_VERSION v0.19.0
 ADD https://github.com/krallin/tini/releases/download/${TINI_VERSION}/tini /tini
@@ -10,18 +21,16 @@ WORKDIR /app
 ADD package.json ./
 RUN npm i
 
-# install dependencies for sui2/live-server
+# install prod dependencies for sui2/live-server
 WORKDIR /app/live-server
 ADD live-server/package.json ./
-RUN npm i
+RUN npm i --omit=dev
 
 # add all files
-WORKDIR /app
-ADD . .
+ADD . /app
 
-# build sui2/live-server frontend
-WORKDIR /app/live-server
-RUN npm run build
+# copy editor dist from the last image
+COPY --from=0 /live-server/editor/dist ./editor/dist
 
 ENV DATA_DIR /data
 CMD ["node", "app.js"]

README.md

@@ -59,7 +59,7 @@ For the live editor, open `http//DOCKER_HOST:3000/editor/`, there's no link for
 ## `data.json` editing
 
 There's a full example in [data.example.json](https://github.com/reorx/sui2/blob/master/data.example.json),
-it's pretty easy to understand so I not going to write too much about it, maybe a json schema will be created as a supplement in the future.
+it's self explanatory so I'm not going to write too much about it, maybe a json schema will be created as a supplement in the future.
 
 The only thing worth mentioning here is the `icon` attribute,
 it uses the [MDI icon set from Iconify](https://icon-sets.iconify.design/mdi/), you can find any icon you like in this page, and use the name after `mdi:` as the value for the `icon` attribute. For example `mdi:bread-slice` should be used as `"icon": "bread-slice"` in `data.json`.

live-server/package.json

@@ -9,10 +9,11 @@
     "clean": "rm -rf data editor/dist"
   },
   "dependencies": {
-    "express": "^4.18.1",
-    "monaco-editor": "^0.34.0"
+    "express": "^4.18.1"
   },
   "devDependencies": {
-    "nodemon": "^2.0.20"
+    "monaco-editor": "^0.34.0",
+    "nodemon": "^2.0.20",
+    "vite": "^3.0.7"
   }
 }