Using a Bind Mount to Modify Webpage Content

2. Start a container using the [httpd](https://hub.docker.com/_/httpd) image with the following command: ```console $ docker run -d -p 8080:80 --name my_site httpd:2.4 ``` This will start the `httpd` service in the background, and publish the webpage to port `8080` on the host. 3. Open the browser and access [http://localhost:8080](http://localhost:8080) or use the curl command to verify if it's working fine or not. ```console $ curl localhost:8080 ``` ### Use a bind mount Using a bind mount, you can map the configuration file on your host computer to a specific location within the container. In this example, you’ll see how to change the look and feel of the webpage by using bind mount: 1. Delete the existing container by using the Docker Desktop Dashboard: ![A screenshot of Docker Desktop Dashboard showing how to delete the httpd container](images/delete-httpd-container.webp?border=true) 2. Create a new directory called `public_html` on your host system. ```console $ mkdir public_html ``` 3. Navigate into the newly created directory `public_html` and create a file called `index.html` with the following content. This is a basic HTML document that creates a simple webpage that welcomes you with a friendly whale. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> My Website with a Whale & Docker!</title> </head> <body> <h1>Whalecome!!</h1> <p>Look! There's a friendly whale greeting you!</p> <pre id="docker-art"> ## . ## ## ## == ## ## ## ## ## === /"""""""""""""""""\___/ === { / ===- \______ O __/ \ \ __/ \____\_______/ Hello from Docker! </pre> </body> </html> ``` 4. It's time to run the container. The `--mount` and `-v` examples produce the same result. You can't run them both unless you remove the `my_site` container after running the first one. {{< tabs >}} {{< tab name="`-v`" >}} ```console $ docker run -d --name my_site -p 8080:80 -v .:/usr/local/apache2/htdocs/ httpd:2.4 ``` {{< /tab >}} {{< tab name="`--mount`" >}} ```console $ docker run -d --name my_site -p 8080:80 --mount type=bind,source=./,target=/usr/local/apache2/htdocs/ httpd:2.4 ``` {{< /tab >}} {{< /tabs >}} > [!TIP] > When using the `-v` or `--mount` flag in Windows PowerShell, you need to provide the absolute path to your directory instead of just `./`. This is because PowerShell handles relative paths differently from bash (commonly used in Mac and Linux environments).

This section demonstrates how to use a bind mount to change the look and feel of a webpage served by an httpd container. It guides the user through deleting the existing container, creating a 'public_html' directory with an 'index.html' file containing HTML content, and then running a new container with a bind mount that maps the host's 'public_html' directory to the container's web document root. Both `-v` and `--mount` flag examples are provided for creating the bind mount. The section includes a tip regarding the use of absolute paths in Windows PowerShell when using these flags.