<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Caddy on Techformist</title>
    <link>https://techformist.com/tags/caddy/</link>
    <description>Recent content in Caddy on Techformist</description>
    <image>
      <url>https://techformist.com/logo.svg</url>
      <link>https://techformist.com/logo.svg</link>
    </image>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-us</language>
    <lastBuildDate>Wed, 17 Jun 2020 06:30:00 +0000</lastBuildDate><atom:link href="https://techformist.com/tags/caddy/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Using Caddy with Quasar</title>
      <link>https://techformist.com/quasar-vue-caddy/</link>
      <pubDate>Wed, 17 Jun 2020 06:30:00 +0000</pubDate>
      
      <guid>https://techformist.com/quasar-vue-caddy/</guid>
      <description>&lt;p&gt;I switched to Caddy recently on one of our servers to host multiple applications and am super happy about its simplicity and ease of use. Here&amp;rsquo;s how I use Caddy with Quasar.&lt;/p&gt;
&lt;h2 id=&#34;what-is-caddy&#34;&gt;What is Caddy?&lt;/h2&gt;
&lt;p&gt;&lt;a href=&#34;https://caddyserver.com/v2&#34;&gt;Caddy&lt;/a&gt; is a web server much like Nginx. It calls itself &amp;ldquo;a new kind of extensible platform for server apps&amp;rdquo;. Features include -&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Easy configuration (super readable config. files - we will get to this in a bit)&lt;/li&gt;
&lt;li&gt;Configuration is exposed as APIs (JSON files can be used to create/change configuration)&lt;/li&gt;
&lt;li&gt;An extensible plugin system&lt;/li&gt;
&lt;li&gt;Automatic https using Let&amp;rsquo;s Encrypt&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Caddy does all this with a single executable, and a single configuration file.&lt;/p&gt;</description>
      <content:encoded><![CDATA[<p>I switched to Caddy recently on one of our servers to host multiple applications and am super happy about its simplicity and ease of use. Here&rsquo;s how I use Caddy with Quasar.</p>
<h2 id="what-is-caddy">What is Caddy?</h2>
<p><a href="https://caddyserver.com/v2">Caddy</a> is a web server much like Nginx. It calls itself &ldquo;a new kind of extensible platform for server apps&rdquo;. Features include -</p>
<ol>
<li>Easy configuration (super readable config. files - we will get to this in a bit)</li>
<li>Configuration is exposed as APIs (JSON files can be used to create/change configuration)</li>
<li>An extensible plugin system</li>
<li>Automatic https using Let&rsquo;s Encrypt</li>
</ol>
<p>Caddy does all this with a single executable, and a single configuration file.</p>
<p><img loading="lazy" src="/2020/caddy.jpg" type="" alt="caddy"  /></p>
<p>Caddy version 2 caused some ground-breaking changes from v1. Since I did not quite use v1, can&rsquo;t really compare how they fare. Caddy is free to use and is licensed under Apache 2.0 open source license.</p>
<h2 id="why-use-caddy">Why use Caddy?</h2>
<p>The most important factor for me - Caddy enables quick setup of a server with multiple apps without spending hours on configuration.</p>
<p>As a non sysadmin developer, I approach server configuration with some skepticism. I cannot quite get away from it due to cheaper costs, but I would rather spend time creating something else rather than fiddling with server configuration.</p>
<p>Nginx has been a great companion. The configuration files are just ok and I don&rsquo;t mind them as long as they are setup only once. However, introducing multiple apps, APIs and static file hosting on same server confuses me and requires quite a bit of trial &amp; error configuration.</p>
<p>Over years I have tried solving the problem with a few options -</p>
<ul>
<li>Use cookie cutter config files with Nginx</li>
<li>Nginx configuration file generator</li>
<li>Alternate server options (there are many options but one needs to be careful about a solution that is too niche or has a thin community behind it)</li>
<li>Self-hosting solutions like Parse that let&rsquo;s me get away with backend configuration changes</li>
</ul>
<p>It is with that background that I find Caddy a refreshing change. With minimal configuration, easier changes and acceptable performance, Caddy works great for this use case.</p>
<h2 id="my-typical-use-case">My Typical Use Case</h2>
<p>My preferred architecture when using &ldquo;quick&rdquo; Vue apps -</p>
<ol>
<li>A node server that serves APIs and database on a 2-4 GB server</li>
<li>Front-end hosted on same server. VueJS is my framework of choice</li>
<li>Static content on Github, Netlify or similar</li>
</ol>
<p>Each server typically hosts 1-4 production apps or <code>x</code> test/MVP apps.</p>
<p>The Caddy server should -</p>
<ol>
<li>handle API requests and proxy them to Node server. The requests may be from the frontend application or from external systems</li>
<li>handle frontend requests when routing to different pages</li>
</ol>
<h2 id="caddy-configuration">Caddy Configuration</h2>
<p>While I found Caddy documentation to be great in general, the examples seem to be for a more &ldquo;in the know&rdquo; audience. The radical changes from v1 to v2 have made some of the previous content irrelevant.</p>
<p>I typically use <code>Caddyfile</code> to store Caddy configuration, which does not appear to be future-proof but is fully supported and quite easy to use. The structure looks somewhat like this -</p>
<pre tabindex="0"><code>example.com {
    root * /usr/www/example
    file_server
}
</code></pre><p>You can store this file wherever you please, but I use <code>/etc/caddy/Caddyfile</code>.</p>
<p>I can now start Caddy with -</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">sudo caddy start -config /etc/caddy/Caddyfile
</span></span></code></pre></div><p>I will switch to configuration using JSON at some point in time with a typical structure looking like this -</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;apps&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;tls&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;certificates&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="nt">&#34;automate&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;example.com&#34;</span><span class="p">,</span> <span class="s2">&#34;another-example.net&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">      <span class="p">}</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>The JSON format is not quite difficult to understand, but more &ldquo;typing&rdquo;. I don&rsquo;t send API requests to configure web servers (thank heavens), and the specific port remains closed in the firewall.</p>
<h2 id="caddy-and-quasar">Caddy and Quasar</h2>
<p>While I knew Caddy&rsquo;s configuration was quite simple, I could not get it to play nicely with client-side routing of Vue apps at the beginning.</p>
<p>After some hit &amp; miss, and lot of searching on Google, I have this configuration that simply works.</p>
<pre tabindex="0"><code># Caddyfile
example.com {
    root * /usr/www/example

    route {
        reverse_proxy /api/* localhost:3000
        try_files {path} {path}/ /index.html
        file_server
    }
}

another-example.net {
    root * /usr/www/anotherexample
    file_server
}
</code></pre><p>This file accomplishes the following -</p>
<ol>
<li>Host site <code>example.com</code>
<ul>
<li>redirect all requests with <code>/api/*</code> to <code>localhost:3000</code>. The node server listens on port 3000, and that port is not open to the Internet</li>
<li>redirect any request to <code>/</code> and allow Vue to handle routing. I do this using <code>try_files {path} {path}/ /index.html</code>, which tries locating for a file with the name passed from URL and redirects to it. If no file is found, it directs to <code>index.html</code></li>
<li>the <code>route</code> statement ensures that Caddy follows the given order while handling URLs. APIs with <code>/api/</code> are served by Node server and other URLs are served by client-side routing</li>
</ul>
</li>
<li>Host site <code>another-example.net</code>
<ul>
<li>serve files in <code>/usr/www/anotherexample</code></li>
</ul>
</li>
</ol>
<p>All I now need to is point the domain name to the IP address of this server and both <code>example.com</code> and <code>another-example.net</code> just work!</p>
<h2 id="when-not-to-use-caddy">When not to use Caddy?</h2>
<p>Caddy works great for all my use cases. I don&rsquo;t quite build Twitter or Facebook level apps - so I should be ok I guess.</p>
<p>At the same time, I will not quite migrate everything to Caddy at this time. If you have configured Nginx a couple of times, you know that all it takes is some &ldquo;lazy copy/paste&rdquo; to get the whole thing working. Simpler needs = simple tasks = no need to take drastic action to change status quo.</p>
<p>You may also not want to use Caddy if you -</p>
<ul>
<li>manage quite an intensive server that handles high traffic volumes. Nginx can manage twice the processing</li>
<li>want to consume as less memory as possible. Caddy is light-weight but not as much as Nginx, and can consume more than double the memory</li>
</ul>
<p>See -</p>
<ul>
<li><a href="https://community.centminmod.com/threads/caddy-v2-versus-centmin-mod-nginx-http-2-http-3-https-benchmarks.19700/">benchmarks for Caddy2 vs Nginx on Centminmod forums</a>.</li>
</ul>
<h2 id="finis">Finis</h2>
<p>I personally believe in a great future for Caddy. It has a great community, good documentation and is a delight to use.</p>
<p>Start using Caddy for your dev/test environments and see the difference. Migrating production environments may be a long drawn out decision based on your intended use.</p>
]]></content:encoded>
    </item>
    
  </channel>
</rss>
