Prepare for Docker publishing (#1771)

* prepare for docker publishing

* fix links

* remove that

* update README

* test publish worklofw

* build and push on master

* include gtag by default

.github/workflows/publish-docker.yml

@@ -15,6 +15,6 @@ jobs:
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-          repository: getexcalidraw/excalidraw
+          repository: excalidraw/excalidraw
           tag_with_ref: true
           tag_with_sha: true

Dockerfile

@@ -1,16 +1,31 @@
-FROM node:14-alpine AS build
+FROM node:14-alpine AS deps
+
+ARG REACT_APP_INCLUDE_GTAG=false
 
-WORKDIR /usr/src/app
+RUN mkdir /opt/node_app && chown node:node /opt/node_app
+WORKDIR /opt/node_app
+
+USER node
 
 COPY package.json package-lock.json ./
-RUN npm install
+RUN npm install --no-optional && npm cache clean --force
+ENV PATH /opt/node_app/node_modules/.bin:$PATH
 
+WORKDIR /opt/node_app
 COPY . .
-ENV NODE_ENV=production
+
+FROM node:14-alpine AS build
+
+ARG NODE_ENV=production
+ARG REACT_APP_INCLUDE_GTAG=false
+
+WORKDIR /opt/node_app
+COPY --from=deps /opt/node_app .
+RUN ls
 RUN npm run build:app
 
 FROM nginx:1.17-alpine
 
-COPY --from=build /usr/src/app/build /usr/share/nginx/html
+COPY --from=build /opt/node_app/build /usr/share/nginx/html
 
 HEALTHCHECK CMD wget -q -O /dev/null http://localhost || exit 1

README.md

@@ -10,6 +10,7 @@
     <a title="Crowdin" target="_blank" href="https://crowdin.com/project/excalidraw">
       <img src="https://badges.crowdin.net/excalidraw/localized.svg">
     </a>
+    <img src="https://img.shields.io/docker/pulls/excalidraw/excalidraw.svg">
   </p>
 </div>
 
@@ -50,10 +51,27 @@ git clone https://github.com/excalidraw/excalidraw.git
 
 #### Docker Compose
 
+You can use docker-compose to work on excalidraw locally if you don't want to setup a Node.js env.
+
 ```sh
 docker-compose up --build -d
 ```
 
+## Self hosting
+
+We publish a Docker image with the Excalidraw client at [excalidraw/excalidraw](https://hub.docker.com/r/excalidraw/excalidraw). You can use it to self host your own client under your own domain, on Kubernetes, AWS ECS, etc.
+
+```sh
+docker build -t excalidraw/excalidraw .
+docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest
+```
+
+The Docker image is free of analytics and other tracking libraries.
+
+**At the moment, self-hosting your own instance doesn't support sharing or collaboration features.**
+
+We are working towards providing a full-fledged solution for self hosting your own Excalidraw.
+
 ## Contributing
 
 Pull requests are welcome. For major changes, please [open an issue](https://github.com/excalidraw/excalidraw/issues/new) first to discuss what you would like to change.

docker-compose.yml

@@ -1,9 +1,27 @@
-version: "3"
+version: "3.8"
 
 services:
   excalidraw:
-    build: .
+    build:
+      context: .
+      args:
+        - NODE_ENV=development
+      target: deps
     container_name: excalidraw
     ports:
-      - "5000:80"
+      - "3000:3000"
     restart: on-failure
+    command: npm run start
+    stdin_open: true
+    healthcheck:
+      disable: true
+    environment:
+      - NODE_ENV=development
+    volumes:
+      - ./:/opt/node_app/app:delegated
+      - ./package.json:/opt/node_app/package.json
+      - ./package-lock.lock:/opt/node_app/package-lock.lock
+      - notused:/opt/node_app/app/node_modules
+
+volumes:
+  notused:

package.json

@@ -74,7 +74,7 @@
   "scripts": {
     "build": "npm run build:app && npm run build:zip",
     "build-node": "node ./scripts/build-node.js",
-    "build:app": "REACT_APP_GIT_SHA=$NOW_GITHUB_COMMIT_SHA react-scripts build",
+    "build:app": "REACT_APP_INCLUDE_GTAG=true REACT_APP_GIT_SHA=$NOW_GITHUB_COMMIT_SHA react-scripts build",
     "build:zip": "node ./scripts/build-version.js",
     "eject": "react-scripts eject",
     "fix": "npm run fix:other && npm run fix:code",

public/index.html

@@ -90,6 +90,7 @@
       style="--pwacompat-splash-font: 24px Virgil;"
     />
 
+    <% if (process.env.REACT_APP_INCLUDE_GTAG === 'true') { %>
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=UA-387204-13"
@@ -102,6 +103,7 @@
       gtag("js", new Date());
       gtag("config", "UA-387204-13");
     </script>
+    <% } %>
   </head>
 
   <body>