Improve project setup with Docker

Dockerfile

@@ -11,6 +11,14 @@ COPY . .
 COPY --from=deps /opt/app/node_modules ./node_modules
 RUN npm run build
 
+FROM node:16-alpine AS script-builder
+WORKDIR /opt/app
+COPY .setup .setup
+WORKDIR /opt/app/.setup
+RUN npm install
+RUN npm i -g @vercel/ncc
+RUN ncc build index.ts
+
 # Production image, copy all the files and run next
 FROM node:16-alpine AS runner
 WORKDIR /opt/app
@@ -19,6 +27,13 @@ COPY --from=builder /opt/app/next.config.js ./
 COPY --from=builder /opt/app/public ./public
 COPY --from=builder /opt/app/.next ./.next
 COPY --from=builder /opt/app/node_modules ./node_modules
-COPY   ./.env ./
+COPY --from=script-builder /opt/app/.setup/dist/index.js ./scripts/setup.js
+
+COPY .env.example .env
+COPY entrypoint.sh .
+RUN apk add --no-cache --upgrade bash
+RUN ["chmod", "+x", "./entrypoint.sh"]
+ENTRYPOINT ["./entrypoint.sh"]
+
 EXPOSE 3000
 CMD ["node_modules/.bin/next", "start"]

README.md

@@ -20,39 +20,29 @@ Pingvin Share uses Appwrite as backend. You have to install and setup Appwrite f
 2.  Create an Account on your Appwrite instance
 3.  Change the `_APP_STORAGE_LIMIT` variable in the `.env` file of Appwrite to your prefered max size limit per share
 
-### 2. Setup script
+### 2. Frontend
 
-To setup the backend structure of Pingvin Share you have to run the setup script.
+First of all you have to start the Docker container.
 
-1.  [Install Node](https://nodejs.org/en/download/)
+1. Clone the `docker-compose.yml` file and the `.env.example` file from this repository
-2.  Clone the repository with `git clone https://github.com/stonith404/pingvin-share`
+2. Rename the `.env.example` file to `.env`
-3.  Visit the repository directory with `cd pingvin-share`
+3. Start the container with `docker-compose up -d`
-4.  Run `npm run init:appwrite`
 
-### 3. Frontend
+The container is now running. Now you have to setup the Appwrite structure, but no worries I made a setup script.
 
-To set up the frontend of Pingvin Share follow these steps.
+To start the script run `docker-compose exec pingvin-share node scripts/setup.js`.
+
+You're almost done, now you have to change your environment variables that they fit to your setup.
 
 1.  Go to your Appwrite console, visit "API Keys" and copy the "Functions API Key" secret to your clipboard.
-2.  Rename the `.env.example` file to `.env`
+2.  Paste the key to the `APPWRITE_FUNCTION_API_KEY` variable in the `.env` file
-3.  Paste the key in the `.env` file
+3.  Change `NEXT_PUBLIC_APPWRITE_HOST` in the `.env` file to the host where your Appwrite instance runs
-4.  Change `NEXT_PUBLIC_APPWRITE_HOST` in the `.env` file to the host where your Appwrite instance runs
+4.  Change `NEXT_PUBLIC_MAX_FILE_SIZE` in the `.env` file to the max file size limit you want
-5.  Change `NEXT_PUBLIC_MAX_FILE_SIZE` in the `.env` file to the max file size limit you want
-
-Start the frontend:
-
-With docker:
-
-1. Run `docker-compose up -d --build`
-
-Without docker:
-
-1. Run `npm install`
-2. Run `npm run build && npm run start`
-
 
 ## Known issues / Limitations
+
 Pingvin Share is currently in beta and there are issues and limitations that should be fixed in the future.
+
 - `DownloadAll` generates the zip file on the client side. This takes alot of time. Because of that I temporarily limited this function to maximal 150 MB.
 - If a user knows the share id, he can list and download the files directly from the Appwrite API even if the share is secured by a password or a visitor limit.
 

docker-compose.yml

@@ -4,5 +4,7 @@ services:
         ports:
             - '3000:3000'
         image: stonith404/pingvin-share
-        build:
+        environment:
-          context: ./
+            - APPWRITE_FUNCTION_API_KEY=${APPWRITE_FUNCTION_API_KEY}
+            - NEXT_PUBLIC_APPWRITE_HOST=${NEXT_PUBLIC_APPWRITE_HOST}
+            - NEXT_PUBLIC_MAX_FILE_SIZE=${NEXT_PUBLIC_MAX_FILE_SIZE}

entrypoint.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+# This script is used to inject env variables in Docker after the build. 
+# Normally the env variables get injecten while the build. This means, you can't add env variables when you start the conatainer.
+# Source of the script: https://raphaelpralat.medium.com/system-environment-variables-in-next-js-with-docker-1f0754e04cde
+
+set +x
+
+envFilename='.env'
+nextFolder='./.next/'
+function apply_path {
+  # read all config file  
+  while read line; do
+    # no comment or not empty
+    if [ "${line:0:1}" == "#" ] || [ "${line}" == "" ]; then
+      continue
+    fi
+    
+    # split
+    configName="$(cut -d'=' -f1 <<<"$line")"
+    configValue="$(cut -d'=' -f2 <<<"$line")"    
+    # get system env
+    envValue=$(env | grep "^$configName=" | grep -oe '[^=]*$');
+    
+    # if config found
+    if [ -n "$configValue" ] && [ -n "$envValue" ]; then
+      # replace all
+      echo "Replace: ${configValue} with: ${envValue}"
+      find $nextFolder \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#$configValue#$envValue#g"
+    fi
+  done < $envFilename
+  }
+  
+apply_path
+echo "Starting Nextjs"
+exec "$@"

package.json

@@ -8,7 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "init:appwrite": "cd .setup && npm install && npx ts-node index.ts",
-    "deploy": "docker build -t git.elias.li/stonith404/pingvin-share:latest . && docker push git.elias.li/stonith404/pingvin-share:latest"
+    "deploy": "docker buildx build -t stonith404/pingvin-share --platform linux/amd64,linux/arm64  --push ."
   },
   "dependencies": {
     "@mantine/core": "^4.2.0",