mirror of
https://github.com/LukeHagar/jims-blog.git
synced 2025-12-09 12:37:48 +00:00
11 lines
20 KiB
HTML
11 lines
20 KiB
HTML
<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="ie=edge"><link rel=icon href=/fav.png type=image/png><link rel=preconnect href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=preload as=style href="https://fonts.googleapis.com/css2?family=Alata&family=Lora&family=Muli:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto&family=Muli:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Alata&family=Lora&family=Muli:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto&family=Muli:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" media=print onload='this.media="all"'><noscript><link href="https://fonts.googleapis.com/css2?family=Alata&family=Lora&family=Muli:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto&family=Muli:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel=stylesheet></noscript><link rel=stylesheet href=/css/font.css media=all><meta property="og:title" content="Connecting your Domain.com domain name to your web app during an MLH hackathon"><meta property="og:description" content="You’re at an MLH Hackathon and you decide you want to win the Domain.com prize for the best domain name registered at the event. You’ve decided on the ultimate name, and now you want to use it for your hack… Here’s how to connect it to Azure app service."><meta property="og:type" content="article"><meta property="og:url" content="https://jimbobbennett.dev/blogs/connecting-your-domain-com-domain-name-to-azure-app-services/"><meta property="og:image" content="https://jimbobbennett.dev/blogs/connecting-your-domain-com-domain-name-to-azure-app-services/banner.png"><meta property="article:section" content="blogs"><meta property="article:published_time" content="2019-11-27T01:55:32+00:00"><meta property="article:modified_time" content="2019-11-27T01:55:32+00:00"><meta property="og:site_name" content="JimBobBennett"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://jimbobbennett.dev/blogs/connecting-your-domain-com-domain-name-to-azure-app-services/banner.png"><meta name=twitter:title content="Connecting your Domain.com domain name to your web app during an MLH hackathon"><meta name=twitter:description content="You’re at an MLH Hackathon and you decide you want to win the Domain.com prize for the best domain name registered at the event. You’ve decided on the ultimate name, and now you want to use it for your hack… Here’s how to connect it to Azure app service."><meta name=twitter:site content="@jimbobbennett"><meta name=twitter:creator content="@jimbobbennett"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css integrity=sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3 crossorigin=anonymous><link rel=stylesheet href=/css/header.css media=all><link rel=stylesheet href=/css/footer.css media=all><link rel=stylesheet href=/css/theme.css media=all><link rel="shortcut icon" type=image/png href=/fav.png><link rel="shortcut icon" sizes=192x192 href=/fav.png><link rel=apple-touch-icon href=/fav.png><link rel=alternate type=application/rss+xml href=https://jimbobbennett.dev/index.xml title=JimBobBennett><script type=text/javascript>(function(e,t,n,s,o,i,a){e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},i=t.createElement(s),i.async=1,i.src="https://www.clarity.ms/tag/"+o,a=t.getElementsByTagName(s)[0],a.parentNode.insertBefore(i,a)})(window,document,"clarity","script","dctc2ydykv")</script><style>:root{--text-color:#343a40;--text-secondary-color:#6c757d;--background-color:#000;--secondary-background-color:#64ffda1a;--primary-color:#007bff;--secondary-color:#f8f9fa;--text-color-dark:#e4e6eb;--text-secondary-color-dark:#b0b3b8;--background-color-dark:#000000;--secondary-background-color-dark:#212529;--primary-color-dark:#ffffff;--secondary-color-dark:#212529}body{background-color:#000;font-size:1rem;font-weight:400;line-height:1.5;text-align:left}</style><meta name=description content><link rel=stylesheet href=/css/index.css><link rel=stylesheet href=/css/single.css><link rel=stylesheet href=/css/projects.css media=all><script defer src=/fontawesome-5/all-5.15.4.js></script><title>Connecting your Domain.com domain name to your web app during an MLH hackathon | JimBobBennett</title></head><body class=light onload=loading()><header><nav class="pt-3 navbar navbar-expand-lg"><div class="container-fluid mx-xs-2 mx-sm-5 mx-md-5 mx-lg-5"><a class="navbar-brand primary-font text-wrap" href=/><img src=/fav.png width=30 height=30 class="d-inline-block align-top">
|
|
JimBobBennett</a>
|
|
<button class=navbar-toggler type=button data-bs-toggle=collapse data-bs-target=#navbarContent aria-controls=navbarContent aria-expanded=false aria-label="Toggle navigation"><svg aria-hidden="true" height="24" viewBox="0 0 16 16" width="24" data-view-component="true"><path fill-rule="evenodd" d="M1 2.75A.75.75.0 011.75 2h12.5a.75.75.0 110 1.5H1.75A.75.75.0 011 2.75zm0 5A.75.75.0 011.75 7h12.5a.75.75.0 110 1.5H1.75A.75.75.0 011 7.75zM1.75 12a.75.75.0 100 1.5h12.5a.75.75.0 100-1.5H1.75z"/></svg></button><div class="collapse navbar-collapse text-wrap primary-font" id=navbarContent><ul class="navbar-nav ms-auto text-center"><li class="nav-item navbar-text"><a class=nav-link href=/ aria-label=home>Home</a></li><li class="nav-item navbar-text"><a class=nav-link href=/#about aria-label=about>About</a></li><li class="nav-item navbar-text"><a class=nav-link href=/#projects aria-label=projects>Recent Highlights</a></li><li class="nav-item navbar-text"><a class=nav-link href=/blogs title="Blog posts">Blog</a></li><li class="nav-item navbar-text"><a class=nav-link href=/videos title=Videos>Videos</a></li><li class="nav-item navbar-text"><a class=nav-link href=/livestreams title=Livestreams>Livestreams</a></li><li class="nav-item navbar-text"><a class=nav-link href=/conferences title=Conferences>Conferences</a></li><li class="nav-item navbar-text"><a class=nav-link href=/resume title=Resume>Resume</a></li></ul></div></div></nav></header><div id=content><section id=projects><div class="container pt-5" id=list-page><div class="row justify-content-center px-3 px-md-5"><h1 class="text-left pb-2 content">Connecting your Domain.com domain name to your web app during an MLH hackathon</h1><div class="text-left content">Jim Bennett
|
|
<small>|</small>
|
|
Nov 27, 2019</div></div></div></section><section id=single><div class=container><div class="row justify-content-center"><div class="col-sm-12 col-md-12 col-lg-9"><div class=pr-lg-4><article class="page-content p-2"><p>You’re at an <a href=https://mlh.io>MLH Hackathon</a> and you decide you want to win the Domain.com prize for the best domain name registered at the event. You’ve decided on the ultimate name, and now you want to use it for your hack…</p><p>But what do you do next? How can you take your amazing code and have it appear across the internet using your new domain name? Well this post is here to help!</p><h1 id=deploy-your-code-to-the-cloud>Deploy your code to the cloud</h1><p>The first thing to do is deploy your code to the cloud, ready to have the domain name assigned. To do this, you will need to deploy it to an Azure App Service.</p><p>If you don’t already have an Azure account, sign up for a free account now!</p><ul><li>Students can sign up at <a href=https://aka.ms/freestudentazure>aka.ms/FreeStudentAzure</a> and get US$100 to use for 12 months, along with free tiers of a load of services for 12 months along with other services free for life, and after that 12 months is up, as long as you are still a student you can renew each year and get another US$100/12 months of free stuff. No credit card required.</li><li>If you are not a student, you can sign up at <a href=https://aka.ms/freeaz>aka.ms/FreeAz</a> and get US$200 to use in the first 30 days, as well as 12 months of free services along with other services free for life.</li></ul><p>Next deploy your code to Azure App Service. App Service is a fully managed platform to run your web apps, be they Flask, Node, PHP, ASP .NET, whatever. You supply the code and App Service will host it for you. There are loads of ways to deploy to App Service, so I won’t cover them all here. You can read about deployments on the <a href="https://docs.microsoft.com/azure/app-service/deploy-local-git/?WT.mc_id=domaincom-blog-jabenn">App Service docs</a>. My personal favorite is the <a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice&WT.mc_id=domaincom-blog-jabenn">Azure App Service extension for VSCode</a>, and the instructions for using it are in their <a href=https://github.com/Microsoft/vscode-azureappservice/blob/master/README.md>GitHub ReadMe</a>.</p><p>One thing to note - you cannot assign a custom domain to a Free Tier app service, you will need to use a higher tier, such as the B1 tier. At the time of writing in the US this is about US$13 a month, so don’t forget to delete this resource after the hackathon if you don’t want to keep being billed! It’s also free for the first 30 days, so you won’t need to pay anything during the weekend.</p><p>If you’ve already configured your App Service using the free tier, don’t worry - you can scale it up from the Azure Portal. All the instructions are in the <a href="https://docs.microsoft.com/azure/app-service/app-service-web-tutorial-custom-domain?WT.mc_id=domaincom-blog-jabenn#prepare-the-app">App Service docs</a>.</p><h1 id=configure-your-domain-to-point-to-your-app>Configure your domain to point to your app</h1><p>Once your app is deployed you need to point your new domain at it. This is a two step process - you need to tell Domain.com that you want to point your domain to your App Service, and then tell your App Service to handle requests at that domain.</p><h2 id=configuring-domaincom>Configuring Domain.com</h2><p>The first thing to do is to get the IP address of your App Service. You can do this from the Azure Portal or the command line.</p><h4 id=from-the-portal>From the portal:</h4><ul><li>Log into the <a href="https://portal.azure.com/?WT.mc_id=domaincom-blog-jabenn">Azure Portal</a>, and find your App Service resource.</li><li>Select the <strong>Custom domains</strong> menu item. From here, copy the IP address.</li></ul><figure><img src=2019-11-26_17-25-57-3.png></figure><h4 id=from-the-command-line>From the command line:</h4><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-sh data-lang=sh><span style=display:flex><span>nslookup <your-app-service>.azurewebsites.net
|
|
</span></span></code></pre></div><p>Substitute <code><your-app-service></code> with the name of your App Service.</p><figure><img src=2019-11-26_18-12-44.png></figure><p>Next you need to configure domain.com to point to this IP address.</p><ul><li>Log in to Domain.com and select the <strong>Domains</strong> tab. Then click the <strong>Manage</strong> button for the domain you want to manage.</li></ul><figure><img src=2019-11-26_17-18-46-1.png></figure><ul><li>Select the <strong>DNS and Nameservers</strong> option from the menu on the left</li></ul><figure><img src=2019-11-26_17-22-18.png></figure><ul><li>Under the <strong>DNS Records</strong> section there will be a number of records. One will have a <strong>Record</strong> of <em>A</em>, a <strong>Name</strong> of <em>@</em> and the <strong>Content</strong> set to an IP address. Click the three downwards ellipses at the end of the row and select <strong>Edit</strong>.</li></ul><figure><img src=2019-11-26_17-29-08.png></figure><ul><li>Set the <strong>IP address</strong> to be the IP address you copied from the Azure portal, then select <strong>Update DNS</strong>.</li></ul><figure><img src=2019-11-26_17-31-44-1.png></figure><ul><li>Look for a <strong>TXT</strong> record with a name of <em>@</em>. Edit this record and update the <strong>Content</strong> to be the URL of your App Service which will be <code><your-app-name>.azurewebsites.net</code>.</li></ul><figure><img src=2019-11-26_17-35-02.png></figure><h2 id=configuring-app-service>Configuring App Service</h2><p>Once Domain.com has been configured, you need to tell your App Service to use it. This can be done from the Azure Portal, or the cli.</p><h4 id=from-the-azure-portal>From the Azure Portal</h4><ul><li>Select the <strong>Custom domains</strong> tab</li><li>Select <strong>+ Add custom domain</strong></li></ul><figure><img src=2019-11-26_17-37-44.png></figure><ul><li>In the blade that pops up, enter your domain name that you registered with Domain.com. Then select <strong>Validate</strong>. This will validate that the records are set up correctly and the hostname is available. If everything is valid you will see two green ticks at the bottom.</li></ul><blockquote><p>In theory the DNS record updates can take up to 48 hours to propagate, but in my experience it happens in a few minutes. If the validation fails then wait a minute and try again.</p></blockquote><figure><img src=2019-11-26_17-40-39.png></figure><ul><li>Once everything has been validated, select <strong>Add custom domain</strong>.</li></ul><h4 id=from-the-azure-cli>From the Azure CLI</h4><ul><li>Make sure you have the Azure CLI installed. If not, follow the <a href="https://docs.microsoft.com/cli/azure/install-azure-cli/?WT.mc_id=domaincom-blog-jabenn">installation instructions</a>. Otherwise use the online cloud shell at <a href="https://shell.azure.com/?WT.mc_id=domaincom-blog-jabenn">shell.azure.com</a>.</li><li>Enter the following command:</li></ul><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-sh data-lang=sh><span style=display:flex><span>az webapp config hostname add --webapp-name <your-app-servce> --resource-group <your-resource-group> --hostname <domain-name>
|
|
</span></span></code></pre></div><p>Substitute <code><your-app-servce></code> with your app service name, <code><your-resource-group></code> with the name of the resource group your app service lives in, and <code><domain-name></code> with the domain name from Domain.com.</p><p>If you see any errors, wait a few minutes are try again as the DNS records may not have propagated.</p><h1 id=done>Done!</h1><p>That’s it - everything should now work. Head to <code>http://<your-new-domain>.<tech/online/site></code> and you should see the app you deployed to App Service.</p><p>You may see a 404 or 403 error to start with - this is because DNS records are cached for a while to save lookups, and your browser is using an old record. To fix this you can either try a new browser or browser window (this sometimes works), or flush your DNS cache.</p><ul><li>On Windows launch a command prompt and run:</li></ul><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-sh data-lang=sh><span style=display:flex><span>ipconfig /flushdns
|
|
</span></span></code></pre></div><ul><li>On macOS launch the Terminal and run:</li></ul><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-sh data-lang=sh><span style=display:flex><span>sudo killall -HUP mDNSResponder;
|
|
</span></span></code></pre></div><p>Enter your password when asked.</p><ul><li>On Linux this depends on which distro you are using, so it would be easier to search for the relevant instructions using <a href=https://www.bing.com/>Bing</a>.</li></ul><p>Good luck with your hackathon, and I hope you win!</p></article></div></div><div class="col-sm-12 col-md-12 col-lg-3"><div class=sticky-sidebar><aside class=toc><h5>Table Of Contents</h5><div class=toc-content><nav id=TableOfContents><ul><li><a href=#configuring-domaincom>Configuring Domain.com</a><ul><li></li></ul></li><li><a href=#configuring-app-service>Configuring App Service</a><ul><li></li></ul></li></ul></nav></div></aside><aside class=tags><h5>Tags</h5><ul class="tags-ul list-unstyled list-inline"><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/technology target=_blank>technology</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/azure target=_blank>azure</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/app-service target=_blank>app service</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/domain.com target=_blank>domain.com</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/dnsimple target=_blank>dnsimple</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/domain target=_blank>domain</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/hackathon target=_blank>hackathon</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/mlh target=_blank>mlh</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/prizes target=_blank>prizes</a></li></ul></aside></div></div></div><div class=row><div class="col-sm-12 col-md-12 col-lg-9 p-4"><div id=disqus_thread></div><script>var disqus_config=function(){this.page.url="https://jimbobbennett.dev/blogs/connecting-your-domain-com-domain-name-to-azure-app-services/",this.page.identifier="73c7220ce1a55c328e26c458f6193de5"};(function(){if(window.location.hostname=="localhost")return;var e=document,t=e.createElement("script");t.src="https://jimbobbennett.disqus.com/embed.js",t.setAttribute("data-timestamp",+new Date),(e.head||e.body).appendChild(t)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript></div></div></div><button class="p-2 px-3" onclick=topFunction() id=topScroll>
|
|
<i class="fas fa-angle-up"></i></button></section><script>var topScroll=document.getElementById("topScroll");window.onscroll=function(){scrollFunction()};function scrollFunction(){document.body.scrollTop>20||document.documentElement.scrollTop>20?topScroll.style.display="block":topScroll.style.display="none"}function topFunction(){document.body.scrollTop=0,document.documentElement.scrollTop=0}</script></div><footer><div class="container py-4"><div class="row justify-content-center"><div class="col-md-4 text-center">© 2023 All Rights Reserved</div></div></div></div></footer><script src=https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js integrity=sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13 crossorigin=anonymous></script>
|
|
<script>document.body.className.includes("light")&&(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))</script><script>let loadingIcons;function loading(){myVar=setTimeout(showPage,100)}function showPage(){try{document.getElementById("loading-icons").style.display="block"}catch{}}</script><script>function createCopyButton(e,t){const n=document.createElement("button");n.className="copy-code-button",n.type="button",n.innerText="Copy",n.addEventListener("click",()=>copyCodeToClipboard(n,e,t)),addCopyButtonToDom(n,e)}async function copyCodeToClipboard(e,t,n){const s=t.querySelector("pre > code").innerText;try{n.writeText(s)}finally{codeWasCopied(e)}}function codeWasCopied(e){e.blur(),e.innerText="Copied!",setTimeout(function(){e.innerText="Copy"},2e3)}function addCopyButtonToDom(e,t){t.insertBefore(e,t.firstChild);const n=document.createElement("div");n.className="highlight-wrapper",t.parentNode.insertBefore(n,t),n.appendChild(t)}if(navigator&&navigator.clipboard)document.querySelectorAll(".highlight").forEach(e=>createCopyButton(e,navigator.clipboard));else{var script=document.createElement("script");script.src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js",script.integrity="sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=",script.crossOrigin="anonymous",script.onload=function(){addCopyButtons(clipboard)},document.querySelectorAll(".highlight").forEach(e=>createCopyButton(e,script)),document.body.appendChild(script)}</script></body></html> |