Stage 46: 2 new posts

.gitignore

@@ -40,5 +40,5 @@ next-env.d.ts
 
 # docker
 .dockerignore
-docker-compose.yaml
-Dockerfile
+*docker-compose*.yaml
+*Dockerfile*

content/blog/docker1.mdx

@@ -0,0 +1,126 @@
+---
+title: Get started with Docker
+description: Basic Docker stuff to get you started on your DevOps journey
+date: 2024-10-19
+published: true
+tags: ["linux", "macos", "docker", "coding", "devops"]
+---
+
+<Image alt="Docker1001" src="/docker1001.png" width={400} height={400} />
+
+# Introduction
+
+I’ve recently had the chance to explore **Docker** more, and it’s truly
+amazing! Containerizing your environments offers a lot of benefits. It’s
+essential to learn this if you’re getting started in **DevOps**.
+
+> "It works on my system!"
+
+With **Docker**, containerizing environments makes them portable. You can
+define prerequisites and their versions while configuring the containers,
+ensuring they behave the same on different computers or servers.
+
+This is basic stuff. There are hundreds of posts like this online, so feel free
+to move on to more interesting topics. However, it’s here if needed as context
+for more advanced content to come.
+
+# The Basics
+
+On **Docker Hub**, there are tons of useful container images to help you get
+started containerizing your projects. Let’s run our first container:
+
+```bash
+docker run -d nginx
+```
+
+This command pulls the nginx image from Docker Hub (if it’s not already on your
+system) and then starts a container running that image.
+
+Let’s test it:
+
+<Image alt="Docker1002" src="/docker1002.png" width={800} height={800} />
+
+## What went wrong?
+
+```bash
+docker ps
+```
+
+<Image alt="Docker1003" src="/docker1003.png" width={800} height={800} />
+
+As you can see, the container is running. Under PORTS, you’ll notice that the
+container is running on 80/tcp internally, but we forgot to expose it on a
+specific port. Let’s fix this.
+
+## Some Docker networking
+
+We'll recreate the container and then make it accessible outside the container with these
+commands:
+
+```bash
+docker stop nostalgic_torvalds
+docker run -d -p 80:80 nginx
+```
+
+<Image alt="Docker1004" src="/docker1004.png" width={800} height={800} />
+
+Now, we can access our nginx container in the browser. Let’s verify our running containers:
+
+```bash
+docker ps
+```
+
+<Image alt="Docker1005" src="/docker1005.png" width={800} height={800} />
+
+To stop all running containers, use this command:
+
+```bash
+docker stop $(docker ps -a -q)
+```
+
+# Docker files
+
+When creating your own containers, using the docker run command can become
+lengthy and difficult to manage in the shell. Often, you’ll need to create your
+own images tailored to your application’s needs.
+
+## Dockerfile
+
+The Dockerfile is used to build Docker images. Here’s an example that builds an
+Apache server running on Ubuntu:
+
+```Dockerfile
+FROM ubuntu
+
+RUN apt-get update && \
+  apt-get install -y apache2 apache2-utils && \
+  apt-get clean
+
+EXPOSE 80
+
+CMD ["apache2ctl", "-D", "FOREGROUND"]
+```
+
+## docker-compose
+
+The docker-compose.yaml file is a YAML file for creating and running
+containers. Running `docker compose up` will start the container with the
+configured settings from docker-compose.yaml. Without any -f (file) parameters,
+the command looks for a Dockerfile in the current directory to build the image
+before running the container.
+
+```yaml
+version: "3.8"
+
+services:
+  web:
+    build: .
+    ports:
+      - "80:80"
+    restart: always
+```
+
+## .dockerignore
+
+If you are copying files in your Dockerfile, creating a .dockerignore file
+allows you to ignore certain files or folders, similar to how .gitignore works.

content/blog/docker2.mdx

@@ -0,0 +1,113 @@
+---
+title: Creating a Docker Dev Container for a NextJS App
+description: A practical DevOps example using Docker for testing a NextJS Web App
+date: 2024-10-20
+published: true
+tags: ["linux", "macos", "docker", "coding", "nextjs", "devops"]
+---
+
+<Image alt="Docker2001" src="/docker2001.png" width={400} height={400} />
+
+# Introduction
+
+This blog is built with Next.js. I'll share how I test changes in my blog
+before publishing them on Vercel. By using Docker, I can spin up a test
+environment anywhere without risking issues caused by platform differences.
+
+The project doesn't have all the code under a **/src** folder, which makes some
+configuration look a bit messy. I'll definitely organize this differently in
+future projects.
+
+# Building the Docker Image
+
+We'll start by dockerizing the development environment with a **Dockerfile**.
+To avoid unnecessary bloat, we'll use a **Node Docker image** running on an
+**Alpine** Linux distribution, which only takes up around 5MB of space.
+
+**dev.Dockerfile**
+
+```Dockerfile
+FROM node:22-alpine
+
+WORKDIR /app
+
+# For caching optimization, copy files in stages. This stage builds the dev dependancies
+COPY package*.json .
+RUN npm ci
+
+# Let's copy the rest of the code and config
+COPY . .
+
+#Execute the NextJS Dev Environment
+CMD [ "npm", "run", "dev" ]
+```
+
+# Docker Compose
+
+The container will run the image from the **Dockerfile** with the following configuration:
+
+**docker-compose.dev.yaml**
+
+```yaml
+services:
+  app:
+    container_name: app
+    build:
+      context: .
+      dockerfile: dev.Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      NODE_ENV: development
+    # Volumes for the Dev Server to detect code changes
+    volumes:
+      - ./app:/app/app
+      - ./lib:/app/lib
+      - ./assets:/app/assets
+      - ./content:/app/content
+      - ./config:/app/config
+      - ./public:/app/public
+      - ./styles:/app/styles
+      - ./components:/app/components
+```
+
+# Files and folder to be ignored in the container
+
+Some files and folders are not needed in the container. For example,
+./node_modules will be generated by the following two lines from the
+dev.Dockerfile:
+
+```
+COPY package*.json .
+RUN npm ci
+```
+
+**.dockerignore**
+
+```
+.git
+*Dockerfile*
+*docker-compose*
+node_modules
+README.md
+.next
+npm-debug.log
+```
+
+# Running the container
+
+The command below will spin up the Dev Container:
+
+```bash
+docker compose -f docker-compose.dev.yaml up
+```
+
+# Summary
+
+We have now containerized the development environment of a static web app. We
+don't really need custom file names like dev.Dockerfile and
+docker-compose.dev.yaml, but I chose to use them to prepare for creating a
+production container. My blog is currently running on Vercel, but if I decide
+to move to a VPS, I'll prepare a production container and share it in the
+future. I'll also create a staging environment if I make significant changes to
+the code, to ensure everything builds properly.