<p>Up to this point, we’ve gone over Docker installation and Docker concepts. In the last lesson, we also learned how to simply launch a Docker image straight from a downloaded image off the web in one command line command. Docker is very powerful and flexible. In this lesson, we want to continue the beginner lab and go to the next lesson. BUT we will also take that next lesson to the next logical level. Let’s start by going back to the <a href="https://docs.docker.com/">Docker Docs Site</a>.</p>
<p>Find this and all the other lessons in this Docker Mastery journey in my <a href="https://dagshub.com/ThomIves/Docker_Mastery">Docker Mastery</a> repo on <a href="https://dagshub.com/">DagsHub</a> - the Cloud Git Repo system for data scientists and machine learning engineers. Note that you can get a free account on DagsHub.</p>
<p>Let’s return to the <strong>Get Started</strong> area again. Then we pick the <strong>Samples</strong> tab.</p>
<p>From there, let’s pick the top item - <a href="https://github.com/docker/labs/tree/master/beginner/">Docker for Beginners</a>. This will take us back to a GitHub page that has no cloning setup. The <strong>readme.md</strong> serves as our launch point for our second <em>learn</em> by <em>DOing</em> lesson.</p>
<p>In the previous lesson, we looked at my repo <a href="https://dagshub.com/ThomIves/Docker_Mastery/src/master/3_BEing_a_Docker_User_by_DOing">BEing a Docker User by DOing</a> in my <a href="https://dagshub.com/">DagsHub</a> repo for <a href="https://dagshub.com/ThomIves/Docker_Mastery">Docker Mastery</a>. We went over lesson 1.0 of the Beginner Lab for Docker.</p>
<p>Today we will do the <strong>2.0 Webapps with Docker</strong> lesson. After that lesson, we will do a slightly more advanced step. We will start from our own HTML file and Dockerfile.</p>
<h2 id="the-webapps-with-docker-lesson">The “Webapps with Docker” Lesson</h2>
<p>The steps below are from the <strong>2.0 Webapps with Docker</strong> lesson. We only repeat them here for your convenience. It would be good to follow the steps from the Docker for Beginners repo though. This next command really does it all. We will want to modify it for our specific needs.</p>
<p><strong>NOTE</strong> that I usually start my commands with <code>sudo</code> below, because I am working in Linux. Your OS likely won’t require this unless you are running in Linux. Just saying.</p>
<p>In the above command: * -d will create a container with the process detached from our terminal * -P will publish all the exposed container ports to random ports on the Docker host * -e is how you pass environment variables to the container * –name allows you to specify a container name * AUTHOR is the environment variable name and Your Name is the value that you can pass</p>
<p>We are passing in a rich number of options to the <code>run</code> command. To see all <code>run</code> options, use the following command at a command line for your OS.</p>
<p><code>sudo docker run --help</code></p>
<p>Now we want to modify the above example line to our specific needs.</p>
<p>With the <code>-d</code> option, the terminal will return to our control. We need to run the following to discover the port on our machine that our new Docker container is serving our static website to.</p>
<pre class="shell"><code>thom@thom-PT5610:~$ sudo docker port static-site
443/tcp -> 0.0.0.0:49159
443/tcp -> :::49159
80/tcp -> 0.0.0.0:49160
80/tcp -> :::49160
thom@thom-PT5610:~$ </code></pre>
<p>You’ll see later that we can also use <code>sudo docker ps</code> to find the port number that we need. PLEASE do not expect to see the same port numbers for your run. Remember that the <code>-P</code> option created random port numbers for us. In a web browser, enter the following for a URL - <code>http://localhost:49160/</code>. Nice! We get our Docker served static website from NGINX running in our Docker container!</p>
<figure>
<img src="Docker_NGINX_Static_Website_from_Samples.png" alt="Docker NGINX Static Website from Samples" /><figcaption>Docker NGINX Static Website from Samples</figcaption>
</figure>
<h2 id="doing-more-ourselves">DOing MORE Ourselves</h2>
<p>What I want to learn is how to do this WITHOUT automatically pulling <code>dockersamples/static-site</code> from Docker Hub. This will prepare us for knowing how to launch our own static websites AND MORE. So let’s write our own HTML. OK, I confess! The HTML5 Boilerplate package wrote most of this in VS Code. I added very little to it and deleted even more.</p>
<a class="sourceLine" id="cb3-12" title="12"> <span class="kw"><h1></span>Hi Friend and the Data Science Community<span class="kw"></h1></span></a>
<a class="sourceLine" id="cb3-13" title="13"> <span class="kw"><p></span>This is running in a Docker Container with a base NGINX image!<span class="kw"></p></span></a>
<a class="sourceLine" id="cb3-14" title="14"> <span class="kw"><p></span>More to come ...<span class="kw"></p></span></a>
<p>Now we also need our own <code>Dockerfile</code>. I heavily plagiarized the one from the beginner lab. It’s worth understanding what each step of that <code>CMD</code> line is doing.</p>
<p>For the CMD line: 1. change the directory to <code>/usr/share/nginx/html</code> in the NGINX server (NOTE that NGINX has many layers itself - it’s NGINX running on top of a Linux OS layer) 1. <code>&&</code> means to only do the next commands IF the previous command was successful 1. <code>sed -e s/Friend/"$FRIEND"/ Hello_Docker.html</code> is a fun command - you should study it with a web search - it essentially finds Friend in the html and replaces it with the value for the $FRIEND environment variable 1. direct the <code>Hello_Docker.html</code> file to a new file <code>index.html</code> 1. <code>;</code> indicates the next command 1. learning more about <code>nginx -g 'daemon off;'</code> is left as an exercise to the student (I hated reading that when I was an undergrad - NOW I love to write that when I am lazy!)</p>
<p>Now, we can build our static website with our own modified HTML code and <code>Dockerfile</code>. Let’s break down this next command a bit. The <code>docker build</code> part is straight forward enough. The <code>-t</code> in case you haven’t seen the previous documents in the repo or a LinkedIn post means add the tag_name that follows.</p>
<p>GREAT! It built successfully. Now we need to run it. Remember, the <code>-d</code> means to detach the run from the terminal that it started it. The -P is a constructively lazy way to randomly create the port numbers needed to serve the page.</p>
<pre class="shell"><code>thom@thom-PT5610:~/Dir_with_Dockerfile$ sudo docker run -d -P my_static_website
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
f0974b625626 my_static_website "/docker-entrypoint.…" 4 seconds ago Up 3 seconds 0.0.0.0:49158->80/tcp, :::49158->80/tcp elastic_herschel
thom@thom-PT5610:~/image.png$ </code></pre>
<p>BOOM! It worked. We are a step closer to building our own websites using Docker and NGINX. We are also a step closer to serving up our own websites using a cloud service such as Digital Ocean or one of those other 3 big cloud services.</p>
<p>That was MORE FUN than we should be allowed to have! But let’s have it anyway! Next step? Let’s continue in this lab next time. Then let’s learn enough to put this website up in the wild.</p>
Press p or to see the previous file or,
n or to see the next file
Comments
Integrate AWS S3
Use S3 remote
Select bucket
Access key
Finish
Use AWS S3 as storage!
Browsing data directories saved to S3 is possible with DAGsHub. Let's configure
your repository to easily display your data in the context of any commit!
Specify your S3 bucket
Select Region
af-south-1 - Africa (Cape Town)
ap-northeast-1 - Asia Pacific (Tokyo)
ap-northeast-2 - Asia Pacific (Seoul)
ap-south-1 - Asia Pacific (Mumbai)
ap-southeast-1 - Asia Pacific (Singapore)
ap-southeast-2 - Asia Pacific (Sydney)
ca-central-1 - Canada (Central)
eu-central-1 - EU (Frankfurt)
eu-north-1 - EU (Stockholm)
eu-west-1 - EU (Ireland)
eu-west-2 - EU (London)
eu-west-3 - EU (Paris)
sa-east-1 - South America (São Paulo)
us-east-1 - US East (N. Virginia)
us-east-2 - US East (Ohio)
us-gov-east-1 - US Gov East 1
us-gov-west-1 - US Gov West 1
us-west-1 - US West (N. California)
us-west-2 - US West (Oregon)
Congratulations!
Docker_Mastery is now integrated with AWS S3!
Delete Storage Key
Are you sure you want to delete this access key?
No
Yes
Integrate Google Cloud Storage
Use Google Storage
Select bucket
Upload key
Finish
Use Google Cloud Storage!
Browsing data directories saved to Google Cloud Storage is possible with DAGsHub. Let's configure
your repository to easily display your data in the context of any commit!
Specify your Google Storage bucket
Congratulations!
Docker_Mastery is now integrated with Google Cloud Storage!
Delete Storage Key
Are you sure you want to delete this access key?
No
Yes
Integrate Azure Cloud Storage
Use Azure Storage
Select bucket
Set key
Finish
Use Azure Cloud Storage!
Browsing data directories saved to Azure Cloud Storage is possible with DAGsHub. Let's configure
your repository to easily display your data in the context of any commit!
Specify your Azure Storage bucket
Congratulations!
Docker_Mastery is now integrated with Azure Cloud Storage!
Delete Storage Key
Are you sure you want to delete this access key?
No
Yes
Integrate S3 compatible storage
Use S3 like remote
Select bucket
Access key
Finish
Use any S3 compatible storage!
Browsing data directories saved to S3 compatible storage is possible with DAGsHub. Let's configure
your repository to easily display your data in the context of any commit!
Specify your S3 bucket
Bucket name cannot be the same as the repository name. Please change one of them.
Check this box only if you trust this domain, otherwise your data and credentials might be
stolen by man in the middle or spoofing attacks.
Congratulations!
Docker_Mastery is now integrated with your S3 compatible storage!
Models
Annotations
Connect to our Discord channel