latest changes

.history/Tutorial_20241002182307.qmd

@@ -0,0 +1,162 @@
+---
+title: "A Guide to Start Your Project with Docker"
+format: html
+---
+
+## Step 1: Installing Docker on Your Mac
+
+### 1. Download Docker Desktop for Mac: 
+   - Go to [Docker Website](https://www.docker.com/)
+   - Click on "Get Started"
+   ![](assets/get_started.png)
+
+### 2. Install Docker Desktop:  
+   ![](assets/get_started2.png)
+   - Open the downloaded `.dmg` file.
+   - Drag the Docker icon to the Applications folder to install it.
+   ![](assets/get_started3.png)
+   - Open Docker from your Applications folder.
+   - You may be prompted to enter your email, so follow the on-screen instructions.
+   ![](assets/get_started4.png)
+
+### 3. Verify the Installation:
+   - Open a terminal and type the following command to check if Docker is installed correctly:
+
+     ```bash
+     docker --version
+     ```
+
+   ![](assets/get_started5.png)
+
+### 4. Run a Test Container:
+   - To ensure Docker is functioning properly, run a simple container like "Hello World":
+
+     ```bash
+     docker run hello-world
+     ```
+   - This command will download a test image and run it, outputting a message that confirms Docker is installed and working.
+   ![](assets/get_started6.png)
+   - If you run a Docker command like `docker run hello-world` for the first time and see a message saying, "Unable to find the image locally", don't worry! This just means the image isn't on your machine yet. 
+   - Docker will automatically start downloading the image from Docker Hub. Once the image is downloaded, it will run. 
+
+## Step 2: Selecting a Base Image for Your Website 
+
+When building a website using Docker, selecting the right base image is crucial. The base image provides the underlying operating system and the necessary software components. 
+
+The choice of a base image depends on the needs of your project. Here are some common scenarios and the recommended base images:
+
+::: {.callout-note}
+# Prepare Your Website Files
+Before you proceed, make sure you have the static files (HTML, CSS, JavaScript) for your website ready in a folder. This folder will also be where you create your Dockerfile.
+:::
+
+### 1. Static Websites
+   - **Nginx**: Ideal for serving static content such as HTML, CSS, and JavaScript.
+   - Use `nginx:alpine` for a lightweight, secure, and efficient static web server.
+
+##### Create a Dockerfile
+   - Create a txt file and paste the the lines below
+
+     ```bash
+        FROM nginx:latest
+        COPY ./my-folder/index.html /usr/share/nginx/html/
+        COPY ./my-folder/styles.css /usr/share/nginx/html/
+        COPY ./my-folder/script.js /usr/share/nginx/html/
+     ```
+
+   - Save the file as Dockerfile in the root of your project directory where your website files are located (e.g., HTML, CSS, JavaScript files).
+
+#### Build the Docker Image Using Command Line 
+   - Open a terminal or command prompt.
+   - Navigate to the directory where your Dockerfile is located.
+   - Run the following command to build the Docker image:
+
+     ```bash
+        docker build -t my-website .
+     ```
+
+   - You can replace `my-website` with any name you prefer for your Docker image
+
+##### Run the Docker Container 
+   - Once the image is built, run it by typing:
+
+     ```bash
+        docker run -d -p 8080:80 my-website
+     ```
+
+##### Verify the container is running
+
+   - Run the following command to ensure your container is up and running:
+
+     ```bash
+        docker ps
+     ```
+
+##### Access the Website
+   Now, go to your browser and visit `http://localhost:8080` to see your website.
+
+  ![](assets/rundocker_cl.png)
+
+##### Use Docker Volume Mounting 
+
+   - You can mount your local project directory as a volume in the container. By mounting your local files as a volume, any changes you make to your `index.html`, `style.css`, or `script.js` will be immediately reflected inside the running container, allowing you to see updates without rebuilding the image or restarting the container.
+
+   - Run the command below to find ContainerID
+
+     ```bash
+         docker ps
+     ```
+
+   - Stop the current container (if it's using)
+
+     ```bash
+         docker stop <container-id>
+     ```
+
+   - Run the container with a volume mount
+
+     ```bash
+        docker run -d -p 8080:80 -v $(pwd)/my-folder:/usr/share/nginx/html my-website
+     ```
+   ![](assets/re-run-container.png)
+   
+## Step 3: Using Docker Compose
+
+   - Docker Compose is a tool that lets you define and run multi-container applications. With one command, you can create and launch all the services defined in the `docker-compose.yml` file.
+   - If Docker Desktop is installed on your machines, Docker Compose should already be included. If not, they need to install it separately. You can check if it’s installed by running:
+
+     ```bash
+        docker-compose --version
+     ```
+
+##### Create a `docker-compose.yml` File
+
+   - Navigate to the root of your project where Dockerfile is also located, create a `docker-compose.yml` file. Below is a simple docker-compose.yml for a static site served by Nginx.
+
+     ```bash
+         version: '3.8'
+         services:
+         nginx:
+            image: nginx:alpine
+            ports:
+               - "8089:80"
+            volumes:
+               - ./my-folder:/usr/share/nginx/html
+     ```
+
+##### Build and Run Containers
+
+   - Run the command below in your terminal from the root of your project
+  
+     ```bash
+         docker-compose up -d
+     ```
+
+   ![](assets/docker-compose-run.png)
+
+   - The `-d` flag runs containers in the background.
+   - Open a web browser and navigate to http://localhost:<port>/ to verify that your service is running correctly.
+   - Adjust <port> based on your docker-compose.yml settings. In my example I use port 8089
+   - Use `docker-compose ps` to check the status of running services.
+
+ 

.history/Tutorial_20241002192111.qmd

@@ -0,0 +1,162 @@
+---
+title: "A Guide to Start Your Project with Docker"
+format: html
+---
+
+## Step 1: Installing Docker on Your Mac
+
+### 1. Download Docker Desktop for Mac: 
+   - Go to [Docker Website](https://www.docker.com/)
+   - Click on "Get Started"
+   ![](assets/get_started.png)
+
+### 2. Install Docker Desktop:  
+   ![](assets/get_started2.png)
+   - Open the downloaded `.dmg` file.
+   - Drag the Docker icon to the Applications folder to install it.
+   ![](assets/get_started3.png)
+   - Open Docker from your Applications folder.
+   - You may be prompted to enter your email, so follow the on-screen instructions.
+   ![](assets/get_started4.png)
+
+### 3. Verify the Installation:
+   - Open a terminal and type the following command to check if Docker is installed correctly:
+
+     ```bash
+     docker --version
+     ```
+
+   ![](assets/get_started5.png)
+
+### 4. Run a Test Container:
+   - To ensure Docker is functioning properly, run a simple container like "Hello World":
+
+     ```bash
+     docker run hello-world
+     ```
+   - This command will download a test image and run it, outputting a message that confirms Docker is installed and working.
+   ![](assets/get_started6.png)
+   - If you run a Docker command like `docker run hello-world` for the first time and see a message saying, "Unable to find the image locally", don't worry! This just means the image isn't on your machine yet. 
+   - Docker will automatically start downloading the image from Docker Hub. Once the image is downloaded, it will run. 
+
+## Step 2: Selecting a Base Image for Your Website 
+
+When building a website using Docker, selecting the right base image is crucial. The base image provides the underlying operating system and the necessary software components. 
+
+The choice of a base image depends on the needs of your project. Here are some common scenarios and the recommended base images:
+
+::: {.callout-note}
+# Prepare Your Website Files
+Before you proceed, make sure you have the static files (HTML, CSS, JavaScript) for your website ready in a folder. This folder will also be where you create your Dockerfile.
+:::
+
+### 1. Static Websites
+   - **Nginx**: Ideal for serving static content such as HTML, CSS, and JavaScript.
+   - Use `nginx:alpine` for a lightweight, secure, and efficient static web server.
+
+##### Create a Dockerfile
+   - Create a txt file and paste the the lines below
+
+     ```bash
+        FROM nginx:latest
+        COPY ./my-folder/index.html /usr/share/nginx/html/
+        COPY ./my-folder/styles.css /usr/share/nginx/html/
+        COPY ./my-folder/script.js /usr/share/nginx/html/
+     ```
+
+   - Save the file as Dockerfile in the root of your project directory where your website files are located (e.g., HTML, CSS, JavaScript files).
+
+#### Build the Docker Image Using Command Line 
+   - Open a terminal or command prompt.
+   - Navigate to the directory where your Dockerfile is located.
+   - Run the following command to build the Docker image:
+
+     ```bash
+        docker build -t my-website .
+     ```
+
+   - You can replace `my-website` with any name you prefer for your Docker image
+
+##### Run the Docker Container 
+   - Once the image is built, run it by typing:
+
+     ```bash
+        docker run -d -p 8080:80 my-website
+     ```
+
+##### Verify the container is running
+
+   - Run the following command to ensure your container is up and running:
+
+     ```bash
+        docker ps
+     ```
+
+##### Access the Website
+   Now, go to your browser and visit `http://localhost:8080` to see your website.
+
+  ![](assets/rundocker_cl.png)
+
+##### Use Docker Volume Mounting 
+
+   - You can mount your local project directory as a volume in the container. By mounting your local files as a volume, any changes you make to your `index.html`, `style.css`, or `script.js` will be immediately reflected inside the running container, allowing you to see updates without rebuilding the image or restarting the container.
+
+   - Run the command below to find ContainerID
+
+     ```bash
+         docker ps
+     ```
+
+   - Stop the current container (if it's using)
+
+     ```bash
+         docker stop <container-id>
+     ```
+
+   - Run the container with a volume mount
+
+     ```bash
+        docker run -d -p 8080:80 -v $(pwd)/my-folder:/usr/share/nginx/html my-website
+     ```
+   ![](assets/re-run-container.png)
+   
+## Step 3: Using Docker Compose
+
+   - Docker Compose is a tool that lets you define and run multi-container applications. With one command, you can create and launch all the services defined in the `docker-compose.yml` file.
+   - If Docker Desktop is installed on your machines, Docker Compose should already be included. If not, they need to install it separately. You can check if it’s installed by running:
+
+     ```bash
+        docker-compose --version
+     ```
+
+##### Create a `docker-compose.yml` File
+
+   - Navigate to the root of your project where Dockerfile is also located, create a `docker-compose.yml` file. Below is a simple docker-compose.yml for a static site served by Nginx.
+
+     ```bash
+         version: '3.8'
+         services:
+         nginx:
+            image: nginx:alpine
+            ports:
+               - "8089:80"
+            volumes:
+               - ./my-folder:/usr/share/nginx/html
+     ```
+
+##### Build and Run Containers
+
+   - Run the command below in your terminal from the root of your project
+  
+     ```bash
+         docker-compose up -d
+     ```
+
+   ![](assets/docker-compose-run.png)
+
+   - The `-d` flag runs containers in the background.
+   - Open a web browser and navigate to http://localhost:<port>/ to verify that your service is running correctly.
+   - Adjust <port> based on your docker-compose.yml settings. In my example I use port 8089
+   - Use `docker-compose ps` to check the status of running services.
+
+