ci: 📦 Docker Support

Add support for docker using docker file and docker compose which spins up the database and the site in their respective containers

Author: FallenDeity

.dockerignore

@@ -0,0 +1,9 @@
+.idea/
+.vscode/
+.git/
+node_modules/
+.next/
+.github/
+coverage/
+dist/
+logs/

.env.example

@@ -13,7 +13,24 @@ EMAIL_FROM=
 NEXTAUTH_URL=
 NEXTAUTH_SECRET=
 NEXT_PUBLIC_BASE_URL=
+
+# LOCAL
 DATABASE_USER=
+DATABASE_URL=
 NEXT_PUBLIC_DATABASE_HOST=
 NEXT_PUBLIC_DATABASE_PORT=
-DATABASE_URL=
+
+# DOCKER PRODUCTION
+# DATABASE_USER=
+# NEXT_PUBLIC_DATABASE_HOST=
+# NEXT_PUBLIC_DATABASE_PORT=
+# PGPASSWORD=
+# PGDATABASE=
+# DATABASE_URL=
+
+
+# VERCEL PRODUCTION
+# DATABASE_USER=
+# NEXT_PUBLIC_DATABASE_HOST=
+# NEXT_PUBLIC_DATABASE_PORT=
+# DATABASE_URL=

Dockerfile

@@ -0,0 +1,41 @@
+FROM node:18-alpine AS base
+
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+RUN npm install -g --arch=x64 --platform=linux --libc=glibc sharp
+
+FROM base AS builder
+WORKDIR /app
+COPY . .
+COPY --from=deps /app/node_modules ./node_modules
+ENV BUILD_STANDALONE 1
+ENV NEXT_TELEMETRY_DISABLED 1
+RUN npm run build
+
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV production
+ENV NEXT_SHARP_PATH=/usr/local/lib/node_modules/sharp
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+COPY --from=deps --chown=nextjs:nodejs /usr/local/lib/node_modules/sharp /usr/local/lib/node_modules/sharp
+COPY --from=builder /app/public ./public
+RUN mkdir dist
+RUN chown nextjs:nodejs dist
+COPY --from=builder --chown=nextjs:nodejs /app/dist/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/dist/static ./dist/static
+
+USER nextjs
+EXPOSE 3000
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

README.md

@@ -81,3 +81,32 @@ Finally, you can run the project with the following command:
 ```bash
 npm run start
 ```
+
+## Docker
+
+The project can also be run using `docker-compose`. To run the project using `docker-compose`, you need to create a `.env` file in the root directory of the project and add above mentioned variables.
+
+Set the following additional variables in the `.env` file:
+
+```bash
+PGPASSWORD= # Database password
+PGDATABASE= # Database name
+```
+
+This is required to spin up the database container. You don't need to create the database manually as it will be created automatically by the database container.
+
+To run the project using `docker-compose`, you can use the following command:
+
+```bash
+docker compose up production --build
+```
+
+To create the required tables, you can use the following command:
+
+```bash
+cat ./src/bin/tables.sql | docker exec -i datacanvas_db psql -U <DATABASE_USER> -d <PGDATABASE>
+```
+
+# Contributing
+
+Contributions are always welcome! Feel free to open any issues or send pull requests.

docker-compose.yaml

@@ -0,0 +1,32 @@
+services:
+    database:
+        container_name: datacanvas_db
+        image: postgres:16.1-alpine
+        restart: always
+        profiles:
+            - production
+        volumes:
+            - postgres_data:/var/lib/postgresql/data
+        environment:
+            - POSTGRES_USER=${DATABASE_USER}
+            - POSTGRES_PASSWORD=${PGPASSWORD}
+            - POSTGRES_DB=${PGDATABASE}
+        ports:
+            - "5433:5432"
+    production:
+        build:
+            context: .
+            dockerfile: Dockerfile
+        container_name: datacanvas
+        restart: always
+        depends_on:
+            - database
+        links:
+            - database
+        profiles:
+            - production
+        ports:
+            - "3000:3000"
+
+volumes:
+    postgres_data:

next.config.js

@@ -12,6 +12,7 @@ const nextConfig = {
 			},
 		],
 	},
+	output: process.env.BUILD_STANDALONE ? "standalone" : undefined,
 	reactStrictMode: true,
 	distDir: "dist",
 };

package-lock.json

@@ -33,7 +33,7 @@
 		"@types/react-responsive-masonry": "^2.1.3",
 		"@typescript-eslint/eslint-plugin": "^5.59.6",
 		"@typescript-eslint/parser": "^5.59.6",
-		"autoprefixer": "^10.4.14",
+		"autoprefixer": "^10.4.17",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^7.2.0",
 		"eslint-import-resolver-typescript": "^3.6.1",

package.json

@@ -27,7 +27,7 @@ export default class Database {
 	private constructor() {
 		this.pool = new pg.Pool({
 			connectionString: process.env.DATABASE_URL,
-			ssl: !process.env.DATABASE_URL?.includes("localhost"),
+			ssl: !process.env.DATABASE_URL?.includes("localhost") && !process.env.DATABASE_URL?.includes("docker"),
 		});
 	}
 
@@ -45,7 +45,7 @@ export default class Database {
 		}
 		const client = new pg.Client({
 			connectionString: url,
-			ssl: !process.env.DATABASE_URL?.includes("localhost"),
+			ssl: !process.env.DATABASE_URL?.includes("localhost") && !process.env.DATABASE_URL?.includes("docker"),
 		});
 		await client.connect();
 		Database.clientPool[session.user.id] = client;