Upload your first website using OPTA Cloud 
Tags: devops, cloud, aws, kubernetes
Published: 2023-03-20 16:05:44


<h3 class="graf graf--h3 graf--empty"></h3>
<p class="graf graf--p">Cloud computing is the availability of resources, services, and tools to enable the quick and effective deployment and management of services and projects on the cloud.</p>
<p class="graf graf--p">Our article breaks down cloud computing and explains how OPTA service makes deployment easy and user-friendly.</p>

<h3 class="graf graf--h3">OPTA</h3>
<p class="graf graf--p">OPTA is an Infrastructure as a Service IaC that allows you to build/deploy on the cloud without knowing anything about the cloud deployment process.</p>
<p class="graf graf--p">OPTA works seamlessly and is more granulated for new users with its well-structured and streamlined code blocks. You can start, deploy, manage and observe your applications without learning much about DevOps.</p>
<p class="graf graf--p">OPTA supports all major cloud service providers, GCP, Azure, and AWS, and you can work directly with your cloud provider and deploy using OPTA or build locally and use the deployment files .yaml files to deploy.</p>

<h3 class="graf graf--h3">Getting Started</h3>
<p class="graf graf--p">To follow this article, you must install the following in your system. Still, before we dive into installing our tools,</p>
<p class="graf graf--p">Find the complete documentation on OPTA <a class="markup--anchor markup--p-anchor" href="https://docs.opta.dev/getting-started/" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://docs.opta.dev/getting-started/">here</a>.</p>
<p class="graf graf--p">Our article will begin by building locally and see how to deploy a website on docker, and then we will take our knowledge and deploy it on the cloud using OPTA</p>

<h3 class="graf graf--h3">Perquisite</h3>
<ul class="postList">
 	<li class="graf graf--li"><a class="markup--anchor markup--li-anchor" href="https://www.docker.com/products/docker-desktop/" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://www.docker.com/products/docker-desktop/">Docker</a></li>
 	<li class="graf graf--li">Any Editor — I will be using <a class="markup--anchor markup--li-anchor" href="https://code.visualstudio.com/download" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://code.visualstudio.com/download">VScode</a></li>
 	<li class="graf graf--li"><a class="markup--anchor markup--li-anchor" href="https://docs.microsoft.com/en-us/windows/terminal/install" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://docs.microsoft.com/en-us/windows/terminal/install">Terminal</a></li>
 	<li class="graf graf--li"><a class="markup--anchor markup--li-anchor" href="https://github.com/" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://github.com/">Github</a></li>
 	<li class="graf graf--li">GCP Account</li>
</ul>
<h3 class="graf graf--h3">Docker Installation</h3>
<p class="graf graf--p">Go to the link <a class="markup--anchor markup--p-anchor" href="https://www.docker.com/products/docker-desktop/" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://www.docker.com/products/docker-desktop/">here</a> and download docker for your machine. If you are using Linux, macOS, or Windows, you can install your preferred version, but for this tutorial, I will explain Windows and a bit about macOS.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*ATasVkBuETEc-Rs2.PNG" data-image-id="0*ATasVkBuETEc-Rs2.PNG" data-width="1263" data-height="313" /></figure>
<p class="graf graf--p">Notice we have Containers/Apps, Images, and Volumes .</p>

<ul class="postList">
 	<li class="graf graf--li"><strong class="markup--strong markup--li-strong">Images: </strong>These are the environment that contains the underline software or OS of your choice that you want to build on.</li>
 	<li class="graf graf--li">For this article, we will use Nginx, one of the most resilient and stable images. Let’s go over to <a class="markup--anchor markup--li-anchor" href="https://hub.docker.com/" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://hub.docker.com/">Docker hub </a>and download our image.</li>
 	<li class="graf graf--li">Make sure you have docker installed and running on your system.</li>
</ul>
<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*eUqgi91t_6Y6epkB.PNG" data-image-id="0*eUqgi91t_6Y6epkB.PNG" data-width="1333" data-height="513" /></figure>
<p class="graf graf--p">We are going to open our terminal and run the docker — version to see what version we are currently on, I am running on version 20.10.13, but you might be running on a different version.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*mjB1Z5tXBH_Ux6x_.PNG" data-image-id="0*mjB1Z5tXBH_Ux6x_.PNG" data-width="645" data-height="49" /></figure>
<p class="graf graf--p">Next, we have to build our image, and we will build with docker pull nginx. It will install the latest Nginx image to our docker.</p>
<p class="graf graf--p">It might take some time so get a cup of coffee while you wait.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*qnSeNRtLje6byWws.PNG" data-image-id="0*qnSeNRtLje6byWws.PNG" data-width="787" data-height="297" /></figure>
<p class="graf graf--p">Notice that when we run the command, it pulls the latest version of the image since we did not specify a version of Nginx we wanted.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*g3QLrFNmjxyds_0x.PNG" data-image-id="0*g3QLrFNmjxyds_0x.PNG" data-width="1249" data-height="381" /></figure>
<p class="graf graf--p">Open your Docker desktop, and you will see under Images that we have the Nginx image or run docker images on your terminal.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*lrd7dZoj-ViH2ZxX.PNG" data-image-id="0*lrd7dZoj-ViH2ZxX.PNG" data-width="608" data-height="67" /></figure>
<ul class="postList">
 	<li class="graf graf--li">Containers/Apps: A container is a running instance of an image, so we take a snapshot of the image and build a container in which our application will run.</li>
 	<li class="graf graf--li">We have our image now; let’s run our container.</li>
</ul>
<p class="graf graf--p"><code class="markup--code markup--p-code">docker run —name myfirst_website -d -p 8080:80 nginx</code></p>
<p class="graf graf--p">After running this code, we see our new container has been created but let us break down our code block.</p>

<ul class="postList">
 	<li class="graf graf--li">docker run builds on the image which is nginx</li>
 	<li class="graf graf--li"> — name gives our new project a specific name we can remember as we do not want to an auto generated name.</li>
 	<li class="graf graf--li">-d runs the installation in detach modes so it does not show the logs.</li>
 	<li class="graf graf--li">-p maps our port 8080 to the nginx port 80</li>
</ul>
<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*tzkgkzLHRoZmavNO.PNG" data-image-id="0*tzkgkzLHRoZmavNO.PNG" data-width="1017" data-height="565" /></figure>
<p class="graf graf--p">If you go to localhost:8080 you will see a default Nginx page.</p>
<p class="graf graf--p">Volumes are the files or applications we put in our containers, which is the most critical part of this tutorial.</p>
<p class="graf graf--p">We will pull the website we have created and move it inside the container. You can refill your coffee before you start this part of the tutorial.</p>
<p class="graf graf--p">I would be using a template-based website from <a class="markup--anchor markup--p-anchor" href="https://startbootstrap.com/theme/creative" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://startbootstrap.com/theme/creative">here</a>, you can download this template or anyone of your choice to your local computer, but if you have designed your website, you can go ahead and use it.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*T1_EYuACdy7oaONh.PNG" data-image-id="0*T1_EYuACdy7oaONh.PNG" data-width="1232" data-height="192" /></figure>
<p class="graf graf--p">Before running the next line of code, please stop the container already running by docker stop myfirst_website and delete the container with docker rm myfirst_website</p>
<p class="graf graf--p">We are pulling it down so we can use the same port, although not really important as we can mount our container to a different port.</p>
<p class="graf graf--p">Let us now add our volume, which is our website like this</p>
<p class="graf graf--p">First, unzip if you downloaded a template or move your website files to a folder and navigate to that folder like so.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*59xJED_xJnS1UTNy.PNG" data-image-id="0*59xJED_xJnS1UTNy.PNG" data-width="596" data-height="368" /></figure>
<p class="graf graf--p">For windows, use the code below.</p>
<p class="graf graf--p">Remember to change the directory for yours.</p>
<p class="graf graf--p"><code class="markup--code markup--p-code">docker run --name website -v C:\Users\SpiderHunter\Desktop\website:/usr/share/nginx/html:ro -d -p 8080:80 nginx</code></p>
<p class="graf graf--p">For Mac, use the code below.</p>
<p class="graf graf--p"><code class="markup--code markup--p-code">docker run --name website -v $(pwd):/usr/share/nginx/html:ro -d -p 8080:80 nginx</code></p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*-E97imxAX6EMTaRU.PNG" data-image-id="0*-E97imxAX6EMTaRU.PNG" data-width="1272" data-height="94" /></figure>
<p class="graf graf--p">Go to localhost:8080 to see if your website is deployed and working.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*8TdWroACGc_qBVVQ.PNG" data-image-id="0*8TdWroACGc_qBVVQ.PNG" data-width="1151" data-height="846" /></figure>
<p class="graf graf--p">Voila, mine is working.</p>
<p class="graf graf--p">Let us use OPTA to deploy this to the cloud.</p>

<h3 class="graf graf--h3">Deploy with OPTA</h3>
<p class="graf graf--p">First, we will specify the cloud provider we will use, but I will use Google Cloud Service GCP.</p>
<p class="graf graf--p">To set up a GCP account, follow the <a class="markup--anchor markup--p-anchor" href="https://cloud.google.com/apigee/docs/hybrid/v1.2/precog-gcpaccount" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://cloud.google.com/apigee/docs/hybrid/v1.2/precog-gcpaccount">link</a></p>
<p class="graf graf--p">Make sure you register and have an account on GCP before you continue.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*ckwdZkyT2e-R74Mh.PNG" data-image-id="0*ckwdZkyT2e-R74Mh.PNG" data-width="1321" data-height="666" /></figure>
<p class="graf graf--p">You can upload your files to GitHub and clone into it from the terminal first, GCP will authenticate the connection.</p>
<p class="graf graf--p"><code class="markup--code markup--p-code">gh repo clone name/repo</code></p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*LZMx1IiQKtrzz0NK.png" data-image-id="0*LZMx1IiQKtrzz0NK.png" data-width="836" data-height="115" /></figure>
<p class="graf graf--p">Click on the terminal console at the top right corner, and it opens a terminal below.</p>
<p class="graf graf--p"><code class="markup--code markup--p-code">export ENV=[gcp]</code></p>
<p class="graf graf--p">We are saying that it should export our environment into the gcp. Platform.</p>
<p class="graf graf--p"><code class="markup--code markup--p-code">open env-${ENV}.yaml</code></p>
<p class="graf graf--p">This specifies where to change and add the information of the account and project name.</p>

<figure class="graf graf--figure"><img class="graf-image" src="https://cdn-images-1.medium.com/max/1600/0*OZ_pbwl0BkvianZg.png" data-image-id="0*OZ_pbwl0BkvianZg.png" data-width="522" data-height="243" /></figure>
<p class="graf graf--p">Let us deploy our service and push the image.</p>
<p class="graf graf--p"><code class="markup--code markup--p-code">opta deploy --image nginx --config env-gcp.yaml --auto-approve --env $ENV</code></p>
<p class="graf graf--p">We used the opta deploy to push our image of nginx with our underline infrastructure to GCP, and we also set up and deployed the Kubernetes.</p>
<p class="graf graf--p">Notice you do not have to know any of these steps, Opta does all the underline structure and deployment.</p>
<p class="graf graf--p">Woooow.</p>

<h3 class="graf graf--h3">Conclusion</h3>
<p class="graf graf--p">We are done, you have successfully created and deployed a website on docker and deployed it on GCP using Opta.</p>
<p class="graf graf--p"><strong class="markup--strong markup--p-strong">Resources</strong></p>

<ul class="postList">
 	<li class="graf graf--li"><a class="markup--anchor markup--li-anchor" href="https://github.com/run-x/opta-examples/tree/main/" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://github.com/run-x/opta-examples/tree/main/">Opta docs</a></li>
 	<li class="graf graf--li"><a class="markup--anchor markup--li-anchor" href="https://www.youtube.com/watch?v=vIKy3pDz3jM&amp;t=537s" target="_blank" rel="noreferrer nofollow noopener noopener" data-href="https://www.youtube.com/watch?v=vIKy3pDz3jM&amp;t=537s">Deploy a sample website on GCP</a></li>
 	<li><a href="http://blog.learnhub.africa">Cloud on LearnHub</a></li>
</ul>