mirror of
https://github.com/caprover/caprover
synced 2026-05-26 21:30:59 +00:00
Kasra Bigdeli
66 lines
14 KiB
HTML
66 lines
14 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Static React App · CaptainDuckDuck</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<p><br/></p>
|
||
"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Static React App · CaptainDuckDuck"/><meta property="og:type" content="website"/><meta property="og:url" content="https://www.captainduckduck.com/index.html"/><meta property="og:description" content="<p><br/></p>
|
||
"/><meta property="og:image" content="https://www.captainduckduck.com/img/captainduckduck.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://www.captainduckduck.com/img/captainduckduck.png"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/css/main.css"/></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/captainduckduck.png" alt="CaptainDuckDuck"/><h2 class="headerTitleWithLogo">CaptainDuckDuck</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/get-started.html" target="_self">Docs</a></li><li class=""><a href="https://github.com/githubsaturn/captainduckduck" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Recipes and Tips</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Basics</h3><ul><li class="navListItem"><a class="navItem" href="/docs/get-started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/captain-definition-file.html">Captain Definition File</a></li><li class="navListItem"><a class="navItem" href="/docs/deployment-methods.html">Deployment Methods</a></li><li class="navListItem"><a class="navItem" href="/docs/app-configuration.html">App Configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/complete-webapp-tutorial.html">Complete Webapp Tutorial</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Do More</h3><ul><li class="navListItem"><a class="navItem" href="/docs/enabling-https.html">Enabling HTTPS</a></li><li class="navListItem"><a class="navItem" href="/docs/one-click-apps.html">One-Click Apps</a></li><li class="navListItem"><a class="navItem" href="/docs/resource-monitoring.html">Resource Monitoring</a></li><li class="navListItem"><a class="navItem" href="/docs/nginx-customization.html">NGINX Config</a></li><li class="navListItem"><a class="navItem" href="/docs/app-scaling-and-cluster.html">App Scaling & Cluster</a></li><li class="navListItem"><a class="navItem" href="/docs/pre-deploy-script.html">Pre-deploy Script</a></li><li class="navListItem"><a class="navItem" href="/docs/cli-commands.html">CLI Commands</a></li><li class="navListItem"><a class="navItem" href="/docs/run-locally.html">Run Locally</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Recipes and Tips</h3><ul><li class="navListItem navListItemActive"><a class="navItem" href="/docs/recipe-deploy-create-react-app.html">Static React App</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Help</h3><ul><li class="navListItem"><a class="navItem" href="/docs/server-purchase.html">Server Purchase</a></li><li class="navListItem"><a class="navItem" href="/docs/disk-cleanup.html">Disk Clean-Up</a></li><li class="navListItem"><a class="navItem" href="/docs/firewall.html">Firewall & Port Forwarding</a></li><li class="navListItem"><a class="navItem" href="/docs/troubleshooting.html">Troubleshooting</a></li></ul></div></div></section></div><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
const headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
if (event.target.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
if (!toggler) {
|
||
return;
|
||
}
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle">Static React App</h1></header><article><div><span><p><br/></p>
|
||
<h1><a class="anchor" aria-hidden="true" id="deploying-as-create-react-app-in-a-static-container"></a><a href="#deploying-as-create-react-app-in-a-static-container" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Deploying as <code>create-react-app</code> in a static container</h1>
|
||
<p>Here is a small step-by-step guide to deploy a <code>create-react-app</code> as a static site.
|
||
Unlike the regular <code>captainduckduck deploy</code> that would deploy source files on a <code>NodeJS</code> container then build your app and run a small node server to serve your files, this guide shows how you can build locally and deploy the static bundle in a simple static server container.</p>
|
||
<p>The big advantage of this technique is that the build happens on your machine where you already have <code>node_modules</code> and probably more computing power than on your server. You also only upload minified files and not the entire codebase. Because of these, the deployment is way faster and less computing intensive for your server.</p>
|
||
<p>While this guide uses <code>create-react-app</code> as an example, you can apply the same technique for any static project (VueJS, Parcel, Angular...).</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="build-your-app"></a><a href="#build-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Build your app</h2>
|
||
<p>The first thing you have to do is to build your app for production.</p>
|
||
<pre><code class="hljs css language-bash">npm run build
|
||
</code></pre>
|
||
<h2><a class="anchor" aria-hidden="true" id="create-captain-definition"></a><a href="#create-captain-definition" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Create <code>captain-definition</code></h2>
|
||
<p>Then create a <code>captain-definition</code> at the root of your project:</p>
|
||
<pre><code class="hljs css language-json">{
|
||
<span class="hljs-attr">"schemaVersion"</span>: <span class="hljs-number">1</span>,
|
||
<span class="hljs-attr">"dockerfileLines"</span>: [<span class="hljs-string">"FROM socialengine/nginx-spa:latest"</span>, <span class="hljs-string">"COPY ./src/build /app"</span>, <span class="hljs-string">"RUN chmod -R 777 /app"</span>]
|
||
}
|
||
</code></pre>
|
||
<p>This <code>captain-definition</code> uses <code>socialengine/nginx-spa</code> which is a simple static ngninx server that handle <code>pushState</code> (every request is routed to <code>/index.html</code> so you can use frontend routing).</p>
|
||
<p><strong>Note</strong>: If your <code>build</code> output in a diffent folder than <code>build</code> you need to change the <code>COPY ./src/build /app</code> into <code>COPY ./src/[my-output-folder] /app</code></p>
|
||
<h2><a class="anchor" aria-hidden="true" id="create-the-tar-file"></a><a href="#create-the-tar-file" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Create the <code>tar</code> file</h2>
|
||
<p>Now you need to create a <code>tar</code> file, usually you don't have to do this because <code>captainduckduck deploy</code> create one from you git repository but here we don't want to put the content of our repository in the <code>tar</code> but only the static files and <code>captain-definition</code> file.</p>
|
||
<pre><code class="hljs css language-bash">tar -cvf ./deploy.tar --exclude=<span class="hljs-string">'*.map'</span> ./captain-definition ./build/*
|
||
</code></pre>
|
||
<p><strong>Note</strong>: If your <code>build</code> output in a diffent folder than <code>build</code> you need to replace <code>./build/*</code> with <code>./[my-output-folder]/*</code></p>
|
||
<p><strong>Note</strong>: We also exclude <code>.map</code> files because these are usually quite big and make the upload longer. If you want <code>.map</code> files in production just remove the <code>--exclude='*.map'</code>.</p>
|
||
<p><strong>Tip</strong>: Add <code>deploy.tar</code> to your <code>.gitignore</code> to avoid accidentally pushing it 😉</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="deploy-with-captainduckduck"></a><a href="#deploy-with-captainduckduck" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Deploy with <code>captainduckduck</code></h2>
|
||
<p>Now all we have to do is to use the <code>captainduckduck</code> CLI with a <code>-t</code> argument to use our own <code>tar</code> file instead of the one made from the git repo.</p>
|
||
<pre><code class="hljs css language-bash">captainduckduck deploy -t ./deploy.tar
|
||
</code></pre>
|
||
<p>Then answer the questions as usual, wait for the upload and 🎉</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/run-locally.html"><span class="arrow-prev">← </span><span>Run Locally</span></a><a class="docs-next button" href="/docs/server-purchase.html"><span>Server Purchase</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#build-your-app">Build your app</a></li><li><a href="#create-captain-definition">Create <code>captain-definition</code></a></li><li><a href="#create-the-tar-file">Create the <code>tar</code> file</a></li><li><a href="#deploy-with-captainduckduck">Deploy with <code>captainduckduck</code></a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/captainduckduck.png" alt="CaptainDuckDuck" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/en/get-started.html">Getting Started</a></div><div><h5>Community</h5><a href="https://twitter.com/search?vertical=default&q=captainduckduck&src=typd" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://join.slack.com/t/captainduckduck/shared_invite/enQtNDEwMjc3MjcxNjUzLWQ4YjljN2JiMGU5Nzk5NjcwMDEzNDNiMTNkOTVhNTA4YTYwOThkNDkyMTlkMDFhMzAzOTA5YjcwY2E4NWRkYzk" target="_blank" rel="noreferrer noopener">Slack Group</a></div><div><h5>More</h5><a href="https://github.com/githubsaturn/captainduckduck" target="_blank">GitHub</a><a class="github-button" href="https://github.com/githubsaturn/captainduckduck" data-icon="octicon-star" data-count-href="/githubsaturn/captainduckduck/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2019 githubsaturn</section><script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-121064489-1"></script><script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
gtag('config', 'UA-121064489-1');
|
||
</script></footer></div></body></html> |