diff --git a/.gitignore b/.gitignore index f5ab754..dd02e22 100644 --- a/.gitignore +++ b/.gitignore @@ -40,5 +40,5 @@ next-env.d.ts # docker .dockerignore -docker-compose.yaml -Dockerfile +*docker-compose*.yaml +*Dockerfile* diff --git a/content/blog/docker1.mdx b/content/blog/docker1.mdx new file mode 100644 index 0000000..514f9ce --- /dev/null +++ b/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"] +--- + +Docker1001 + +# 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: + +Docker1002 + +## What went wrong? + +```bash +docker ps +``` + +Docker1003 + +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 +``` + +Docker1004 + +Now, we can access our nginx container in the browser. Let’s verify our running containers: + +```bash +docker ps +``` + +Docker1005 + +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. diff --git a/content/blog/docker2.mdx b/content/blog/docker2.mdx new file mode 100644 index 0000000..8a64203 --- /dev/null +++ b/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"] +--- + +Docker2001 + +# 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. diff --git a/public/docker1001.png b/public/docker1001.png new file mode 100644 index 0000000..9af27aa Binary files /dev/null and b/public/docker1001.png differ diff --git a/public/docker1002.png b/public/docker1002.png new file mode 100644 index 0000000..d974424 Binary files /dev/null and b/public/docker1002.png differ diff --git a/public/docker1003.png b/public/docker1003.png new file mode 100644 index 0000000..07c6ad9 Binary files /dev/null and b/public/docker1003.png differ diff --git a/public/docker1004.png b/public/docker1004.png new file mode 100644 index 0000000..8b3a4fe Binary files /dev/null and b/public/docker1004.png differ diff --git a/public/docker1005.png b/public/docker1005.png new file mode 100644 index 0000000..b797902 Binary files /dev/null and b/public/docker1005.png differ diff --git a/public/docker1006.png b/public/docker1006.png new file mode 100644 index 0000000..ff441e6 Binary files /dev/null and b/public/docker1006.png differ diff --git a/public/docker2001.png b/public/docker2001.png new file mode 100644 index 0000000..cdf0953 Binary files /dev/null and b/public/docker2001.png differ