Docker improvement (#2311)

* Exclude node_modules from the Docker build context.

* Add the example .env-file.

* Improve the Docker image by building in stages and creating a minimal runtime environment.

* Add docker-compose.yaml to simplify build and setup of the application and the database.

* Improve and restructure parts of the documentation to reflect the addition of Docker Compose.

.dockerignore

@@ -1,2 +1,3 @@
 .git
-.vs_code
+.vs_code
+node_modules/

.env-example

@@ -0,0 +1,11 @@
+MONGO_INITDB_ROOT_USERNAME=""
+MONGO_INITDB_ROOT_PASSWORD=""
+
+FIREBASE_API_KEY=""
+FIREBASE_AUTH_DOMAIN=""
+FIREBASE_PROJECT_ID=""
+FIREBASE_STORAGE_BUCKET=""
+FIREBASE_MESSAGING_SENDER_ID=""
+FIREBASE_APP_ID=""
+FIREBASE_CLIENT_EMAIL=""
+FIREBASE_PRIVATE_KEY=""

Dockerfile

@@ -1,11 +1,27 @@
-# using alpine version of node reduces image size
-FROM node:20.16-alpine
+# Build Step 1 - Create the base
+FROM node:20.18-alpine AS base
 RUN apk add git --no-cache
-COPY ./ /app
-WORKDIR /app
+COPY ./ /usr/src/app
+WORKDIR /usr/src/app
 RUN npm install
 RUN npm run download-music
 RUN npm run assetpack
+
+# Build Step 2 - Build the application
+FROM base AS builder
+WORKDIR /usr/src/app
+RUN npm run build
+
+# Build Step 3 - Build a minimal production-ready image
+#
+# --ignore-scripts is used in the `npm install` to ignore the postinstall-script
+# because in the production-ready image we do not need the sources for
+# the assetpack or music assets in the isolated image for running the app.
+
+FROM node:20.18-alpine
+WORKDIR /usr/src/app
+COPY package*.json ./
+RUN npm install --only=production --ignore-scripts
+COPY --from=builder /usr/src/app/app/public/dist ./app/public/dist
 EXPOSE 9000
-RUN touch /app/.env
-ENTRYPOINT ["npm", "run", "dev"]
+ENTRYPOINT ["node", "app/public/dist/server/app/index.js"]

docker-compose.yaml

@@ -0,0 +1,28 @@
+services:
+
+  mongo:
+    image: mongo:8.0.0-noble
+    restart: always
+    ports:
+      - 27017:27017
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: ${MONGO_INITDB_ROOT_USERNAME}
+      MONGO_INITDB_ROOT_PASSWORD: ${MONGO_INITDB_ROOT_PASSWORD}
+
+  app:
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    restart: always
+    ports:
+      - 9000:9000
+    environment:
+      FIREBASE_API_KEY: ${FIREBASE_API_KEY}
+      FIREBASE_AUTH_DOMAIN: ${FIREBASE_AUTH_DOMAIN}
+      FIREBASE_PROJECT_ID: ${FIREBASE_PROJECT_ID}
+      FIREBASE_STORAGE_BUCKET: ${FIREBASE_STORAGE_BUCKET}
+      FIREBASE_MESSAGING_SENDER_ID: ${FIREBASE_MESSAGING_SENDER_ID}
+      FIREBASE_APP_ID: ${FIREBASE_APP_ID}
+      FIREBASE_CLIENT_EMAIL: ${FIREBASE_CLIENT_EMAIL}
+      FIREBASE_PRIVATE_KEY: ${FIREBASE_PRIVATE_KEY}
+      MONGO_URI: "mongodb://${MONGO_INITDB_ROOT_USERNAME}:${MONGO_INITDB_ROOT_PASSWORD}@mongo:27017/dev?authSource=admin"

docker/README.md

@@ -1,21 +1,91 @@
 # Deploy Pokemon-Auto-Chess With Docker
 
-This method is for people who have a VPS or a free dedicated server or a home server and would like to host pokemon-auto-chess without messing up with installed files in their system. Docker image makes it possible to run multiple game servers by changing the port binding settings and access different database.
+This methods suites anyone who has an environment with Docker and would like to host pokemon-auto-chess in an isolated containerized environment. This could be a VPS, a dedicated server, or a home server. The Docker image also makes it possible to run multiple game servers by changing the port binding settings and access different databases.
+
+This method also sets up a local mongodb-server in the `docker-compose.yaml`-file so you only need to setup Firebase to get Pokemon-Auto-Chess up and running with Docker.
 
 ## Pre-requisite
-- some medium level docker expertise
-- comfortable using command line interface / terminal
 
-## Docker image creation
-- Go to [this docker install guide page](https://docs.docker.com/engine/install/) and follow the instructions.
-- Clone the github repository or download and extract release file
+To work with the Docker image, you should comfortable with:
+- Building and running Docker images
+- Basic Linux and
+- Working with command line interface
+
+## Building the Docker Image
+
+- First, follow the instructions on the [Official Install Docker Engine](https://docs.docker.com/engine/install/) documentation.
+- Clone the GitHub repository or download and extract a release file.
 - Open terminal/cmd application and navigate to pokemonAutoChess directory
-- run `docker build .` and wait for the build process to finish
-- if the build process was successful you'll see `Successfully built abcdef123456`, where the example `abcdef123456` would be the image id of the server image.
-- optionally you can rename the image for example as "pokemon-auto-chess:test" with command `docker tag abcdef123456 pokemon-auto-chess:test`. Don't forget to replace `abcdef123456` with the output of your build.
+- Run `docker compose build` and wait for the build process to finish.
+- If the build process was successful you'll see `[+] Building 176.2s (19/19) FINISHED`. Note: This finish message will show on top.
+
+## Running / Deploying the Docker Image
+
+### Preparations
+Now that the image has been built, continue with setting up Firebase from the [Deployment Tutorial](/deployment/README.md). Copy the `.env.EXAMPLE`-file and name it `.env`, `.env.development`, or `.env.production` as it suits you.
+
+For MongoDB you will need to create an initial root user, and root password, like the following example. When MongoDB first starts up, it reads this value and adds the user/password to the admin-database. Which is why we need to specify the authSource in the MongoDB connection string; `MONGO_URI: "mongodb://${MONGO_INITDB_ROOT_USERNAME}:${MONGO_INITDB_ROOT_PASSWORD}@mongo:27017/dev?authSource=admin"
+
+```
+MONGO_INITDB_ROOT_USERNAME="root"
+MONGO_INITDB_ROOT_PASSWORD="VERY-SECURE-PASSWORD"
+```
+
+### Run Docker Compose
+
+The following command starts the database and the application and runs it in the background
+
+```
+$ docker compose up -d
+[+] Running 2/2
+ ✔ Container pokemonautochess-mongo-1  Started                               0.2s
+ ✔ Container pokemonautochess-app-1    Started                               0.2s
+$
+```
+
+### Watch application logs from Docker Compose
+
+You can simply run `docker compose logs -f` to start tailing the logs of both the application and database server.
+
+If you want to just watch the logs from the application, run `docker compose logs -f app`.
+Or similiar for the database, run `docker compose logs -f mongo`.
+
+```
+$ docker compose logs -f app
+app-1  | ℹ️  optional .env file not found: .env.development, .env
+app-1  | precompute-types: 7.409ms
+app-1  | precompute-rarity: 3.459ms
+app-1  | precompute-pokemon-data: 215.524ms
+app-1  | precompute-types-and-categories: 8.66ms
+app-1  | Refreshing leaderboards...
+app-1  | ✅ Express initialized
+app-1  |
+app-1  |        ___      _
+app-1  |       / __\___ | |_   _ ___  ___ _   _ ___
+app-1  |      / /  / _ \| | | | / __|/ _ \ | | / __|
+app-1  |     / /__| (_) | | |_| \__ \  __/ |_| \__ \
+app-1  |     \____/\___/|_|\__, |___/\___|\__,_|___/
+app-1  |                   |___/
+app-1  |
+app-1  | Multiplayer Framework for Node.js · Open-source
+app-1  |
+app-1  | 💖 Sponsor Colyseus on GitHub → https://github.com/sponsors/endel
+app-1  | 🌟 Give it a star on GitHub → https://github.com/colyseus/colyseus
+app-1  | ☁️  Deploy and scale your project on Colyseus Cloud → https://cloud.colyseus.io
+app-1  |
+app-1  | ⚔️  Listening on http://localhost:9000
+app-1  | create lobby ut88uWcHQ
+app-1  | init lobby cron jobs
+app-1  | init cron jobs
+```
+
+## Access the Application
+
+If you installed docker on your own PC/notebook, you can now use the pokemon-auto-chess server on `http://localhost:9000`
+If you installed docker on your server, you can now use the pokemon-auto-chess server on `http://<server_ip_address>:9000`
+
+### Access the Database - MongoDB
 
-## Deploying the image
-Now that the image had been built, continue with setting up MongoDB and Firebase from the deployment tutorial. Name your env file as `env` and run your server by inputting this command:  
-`docker run -d -v "$(pwd)"/env:/app/.env --name auto-chess --restart unless-stopped -p 9000:9000 pokemon-auto-chess:test`
+If you need to access the database directly, port 27017 is exposed in the `docker-compose.yaml`-file to make it easy to connect from e.g. MongoDB Compass or MongoDB Shell locally. Use the root-user and -password specified earlier and connect to localhost:27017.
 
-If you installed docker in your own PC/notebook, you can now try the pokemon-auto-chess server on `http://localhost:9000`. If you installed the docker on your server, try the server on `http://<server_ip_address>:9000`
+`mongodb://root:VERY-SECURE-PASSWORD@localhost:27017/?authSource=admin`