blog/vychytávky/2022/05/31/codespaces.html
2022-11-05 11:35:49 +00:00

761 lines
19 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c">
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>GitHub Codespaces aneb VS Code na VPS | Matyáš Caras</title>
<meta name="generator" content="Jekyll v4.3.1">
<meta property="og:title" content="GitHub Codespaces aneb VS Code na VPS">
<meta name="author" content="hernikplays">
<meta property="og:locale" content="en_US">
<meta name="description" content="Nedávno mi přišel e-mail, že jsem byl přidán do beta testování funkce Codespaces na GitHubu. Stručně, Codespaces má být systém ve kterém si vytvoříte vlastní prostředí pro váš repozitář, do kterého si nainstalujete všechny potřebné knihovny, SDK a balíky. Server, na kterém to všechno běží, si platíte u GitHubu a můžete na něj kdekoliv a kdykoliv přejít přes web do webové, narozdíl od výchozího webového VS Code plně vybavené, verzi VS Code nebo nainstalovaný VS Code a upravovat nebo testovat kód.">
<meta property="og:description" content="Nedávno mi přišel e-mail, že jsem byl přidán do beta testování funkce Codespaces na GitHubu. Stručně, Codespaces má být systém ve kterém si vytvoříte vlastní prostředí pro váš repozitář, do kterého si nainstalujete všechny potřebné knihovny, SDK a balíky. Server, na kterém to všechno běží, si platíte u GitHubu a můžete na něj kdekoliv a kdykoliv přejít přes web do webové, narozdíl od výchozího webového VS Code plně vybavené, verzi VS Code nebo nainstalovaný VS Code a upravovat nebo testovat kód.">
<link rel="canonical" href="https://caras.cafe/vychyt%C3%A1vky/2022/05/31/codespaces.html">
<meta property="og:url" content="https://caras.cafe/vychyt%C3%A1vky/2022/05/31/codespaces.html">
<meta property="og:site_name" content="Matyáš Caras">
<meta property="og:type" content="article">
<meta property="article:published_time" content="2022-05-31T00:00:00+00:00">
<meta name="twitter:card" content="summary">
<meta property="twitter:title" content="GitHub Codespaces aneb VS Code na VPS">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"hernikplays"},"dateModified":"2022-05-31T00:00:00+00:00","datePublished":"2022-05-31T00:00:00+00:00","description":"Nedávno mi přišel e-mail, že jsem byl přidán do beta testování funkce Codespaces na GitHubu. Stručně, Codespaces má být systém ve kterém si vytvoříte vlastní prostředí pro váš repozitář, do kterého si nainstalujete všechny potřebné knihovny, SDK a balíky. Server, na kterém to všechno běží, si platíte u GitHubu a můžete na něj kdekoliv a kdykoliv přejít přes web do webové, narozdíl od výchozího webového VS Code plně vybavené, verzi VS Code nebo nainstalovaný VS Code a upravovat nebo testovat kód.","headline":"GitHub Codespaces aneb VS Code na VPS","mainEntityOfPage":{"@type":"WebPage","@id":"https://caras.cafe/vychyt%C3%A1vky/2022/05/31/codespaces.html"},"url":"https://caras.cafe/vychyt%C3%A1vky/2022/05/31/codespaces.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-noto-sans@0.0.72/index.min.css">
<link rel="stylesheet" href="/assets/css/main.css">
<script src="/assets/js/main.js"></script><link type="application/atom+xml" rel="alternate" href="https://caras.cafe/feed.xml" title="Matyáš Caras">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/go.min.js"></script>
<script>
// Init highlight js
document.addEventListener('DOMContentLoaded', function(event) {
var els = document.querySelectorAll('pre code')
function addLangData(block) {
var outer = block.parentElement.parentElement.parentElement;
var lang = block.getAttribute('data-lang');
for (var i = 0; i < outer.classList.length; i++) {
var cls = outer.classList[i];
if (cls.startsWith('language-')) {
lang = cls;
break;
}
}
if (!lang) {
cls = block.getAttribute('class');
lang = cls ? cls.replace('hljs ', '') : '';
}
if (lang.startsWith('language-')) {
lang = lang.substr(9);
}
block.setAttribute('class', 'hljs ' + lang);
block.parentNode.setAttribute('data-lang', lang);
}
function addBadge(block) {
var enabled = ('true' || 'true').toLowerCase();
if (enabled == 'true') {
var pre = block.parentElement;
pre.classList.add('badge');
}
}
function handle(block) {
addLangData(block);
addBadge(block)
hljs.highlightBlock(block);
}
for (var i = 0; i < els.length; i++) {
var el = els[i];
handle(el);
}
});
</script>
<style>
/* code language badge */
pre.badge::before {
content: attr(data-lang);
color: #fff;
background-color: #ff4e00;
padding: 0 .5em;
border-radius: 0 2px;
text-transform: uppercase;
text-align: center;
min-width: 32px;
display: inline-block;
position: absolute;
right: 0;
}
/* fix wrong badge display for firefox browser */
code > table pre::before {
display: none;
}
</style>
</head>
<body>
<header class="site-header " role="banner">
<div class="wrapper">
<div class="site-header-inner">
<span class="site-brand"><a class="site-brand-inner" rel="author" href="/">
<img class="site-favicon" title="Matyáš Caras" src="" onerror="this.style.display='none'">
Matyáš Caras
</a>
</span><nav class="site-nav">
<input type="checkbox" id="nav-trigger" class="nav-trigger">
<label for="nav-trigger">
<span class="menu-icon">
<svg viewbox="0 0 18 15" width="18px" height="15px">
<path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"></path>
</svg>
</span>
</label>
<div class="trigger">
<a class="page-link" href="/about.html">ABOUT</a><a class="page-link" href="/archives.html">ARCHIVES</a><a class="page-link" href="/categories.html">CATEGORIES</a><a class="page-link" href="/">HOME</a><a class="page-link" href="/tags.html">TAGS</a>
</div>
</nav>
</div>
</div>
</header>
<script>
function initHeader() {
var lastScrollY = getScrollPos().y;
var documentElement = document.documentElement;
function storeScrollData() {
var y = getScrollPos().y;var scrollStatus = "";
if (y <= 0) {
scrollStatus = "top";
} else if ((window.innerHeight + y) >= document.body.offsetHeight) {
scrollStatus = "bottom";
} else {
var isScrollDown = (y - lastScrollY > 0) ? true : false;
scrollStatus = isScrollDown ? "down" : "up";
}
lastScrollY = y;
documentElement.setAttribute("data-scroll-status", scrollStatus);
}
window.addEventListener('scroll', function(e) {
storeScrollData();
});
storeScrollData();
}
document.addEventListener('DOMContentLoaded', initHeader);
</script>
<script>
function hashLocate(hashValue) {
hashValue = hashValue.replace(/^.*#h-/, '');
hashValue = decodeURIComponent(hashValue);
var element = document.getElementById(hashValue);
if (!element) {
return;
}
var header = document.querySelector('header.site-header');
var headerRect = header.getBoundingClientRect();
var headerTop = Math.floor(headerRect.top);
var headerHeight = Math.floor(headerRect.height);
var scrollPos = getScrollPos();
var offsetY = element.offsetTop - (headerTop + headerHeight + 20);
if (offsetY == scrollPos.y) {
return;
}
if (headerTop == 0 && offsetY > scrollPos.y) {
offsetY += headerHeight + 2;
} else if (headerTop < 0 && offsetY < scrollPos.y) {
offsetY -= headerHeight - 2;
}
smoothScrollTo(offsetY);
}
// The first event occurred
window.addEventListener('load', function(event) {
if (window.location.hash) {
hashLocate(window.location.hash);
}
});
// The first event occurred
window.addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() == 'a') {
hashLocate(event.target.getAttribute('href'));
}
});
</script>
<div class="theme-toggle">
<input type="checkbox" id="theme-switch">
<label for="theme-switch">
<div class="toggle"></div>
<div class="names">
<p class="light">Light</p>
<p class="dark">Dark</p>
</div>
</label>
</div>
<script>
(function() {
var sw = document.getElementById('theme-switch');
var html = document.getElementsByTagName('html')[0];
var nightModeOption = ('auto' || 'auto').toLowerCase();
var storage = nightModeOption === 'manual'
? localStorage
: sessionStorage;
var themeData = loadThemeData();
function saveThemeData(data) {
storage.setItem('theme', JSON.stringify(data));
}
function loadThemeData() {
var data = storage.getItem('theme');
try {
data = JSON.parse(data ? data : '');
} catch(e) {
data = { nightShift: undefined, autoToggleAt: 0 };
saveThemeData(data);
}
return data;
}
function handleThemeToggle(nightShift) {
themeData.nightShift = nightShift;
saveThemeData(themeData);
html.dataset.theme = nightShift ? 'dark' : 'light';
setTimeout(function() {
sw.checked = nightShift ? true : false;
}, 50);
}
function autoThemeToggle() {
// Next time point of theme toggle
var now = new Date();
var toggleAt = new Date();
var hours = now.getHours();
var nightShift = hours >= 19 || hours <=7;
if (nightShift) {
if (hours > 7) {
toggleAt.setDate(toggleAt.getDate() + 1);
}
toggleAt.setHours(7);
} else {
toggleAt.setHours(19);
}
toggleAt.setMinutes(0);
toggleAt.setSeconds(0);
toggleAt.setMilliseconds(0)
var delay = toggleAt.getTime() - now.getTime();
// auto toggle theme mode
setTimeout(function() {
handleThemeToggle(!nightShift);
}, delay);
return {
nightShift: nightShift,
toggleAt: toggleAt.getTime()
};
}
// Listen the theme toggle event
sw.addEventListener('change', function(event) {
handleThemeToggle(event.target.checked);
});
if (nightModeOption == 'auto') {
var data = autoThemeToggle();
// Toggle theme by local setting
if (data.toggleAt > themeData.autoToggleAt) {
themeData.autoToggleAt = data.toggleAt;
handleThemeToggle(data.nightShift);
} else {
handleThemeToggle(themeData.nightShift);
}
} else if (nightModeOption == 'manual') {
handleThemeToggle(themeData.nightShift);
} else {
var nightShift = themeData.nightShift;
if (nightShift === undefined) {
nightShift = nightModeOption === 'on';
}
handleThemeToggle(nightShift);
}
})();
</script>
<div id="click-to-top" class="click-to-top">
<i class="fa fa-arrow-up"></i>
</div>
<script>
(function () {
const clickToTop = document.getElementById('click-to-top');
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
clickToTop.classList.add('show')
}else {
clickToTop.classList.remove('show')
}
});
clickToTop.addEventListener('click', () => {
window.smoothScrollTo(0);
});
})();
</script>
<main class="page-content" aria-label="Content">
<div class="wrapper">
<div class="framework">
<section class="main">
<div class="post">
<section>
<header class="post-header">
<h1 class="post-title p-name" itemprop="name headline">GitHub Codespaces aneb VS Code na VPS</h1>
<h2 class="post-subtitle">Dopřejte si trochu luxusu</h2>
<p class="post-meta">
<time class="dt-published" datetime="2022-05-31T00:00:00+00:00" itemprop="datePublished"><i class="fa fa-calendar"></i> May 31, 2022
</time>
<span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> About 2 mins</span>
</p>
<div class="post-tags">
<a class="post-tag" href="/tags.html#github">#github</a><a class="post-tag" href="/tags.html#vps">#vps</a>
</div></header>
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
<div class="post-content e-content" itemprop="articleBody">
<p>Nedávno mi přišel e-mail, že jsem byl přidán do beta testování funkce Codespaces na GitHubu. Stručně, Codespaces má být systém ve kterém si vytvoříte vlastní prostředí pro váš repozitář, do kterého si nainstalujete všechny potřebné knihovny, SDK a balíky. Server, na kterém to všechno běží, si platíte u GitHubu a můžete na něj kdekoliv a kdykoliv přejít přes web do webové, narozdíl od výchozího webového VS Code plně vybavené, verzi VS Code nebo nainstalovaný VS Code a upravovat nebo testovat kód.</p>
<p>Hodí se pro lidi, kteří nechtějí tahat např. do školy nebo do práce, kde nesmí instalovat externí aplikace, svůj vlastní notebook.
Parametry</p>
<p>V betě je možné testovat pouze výchozí možnost 4 jádra + 8GB RAM + 32GB úložiště, což definitivně stačí pro osobní a malé projekty. Do konce bety neplatíte nic, ale 4 jádra vyjdou na $0.36 (asi 8,3 kč) za hodinu, tj za hodinu aktivního používání. Codespace se vám automaticky vypne, pokud není po stanovenou dobu nepoužíván, takže můžete předejít placení katastrofických částek.
<img src="/assets/images/codespaces/1.jpg" alt="Ceny Codespaces"></p>
<p>Je to určitě výhodnější, než si platit např. hotové VPS, pokud ho tedy nepoužíváte i na něco smysluplnějšího.
Moje zkušenost</p>
<p>Samozřejmě jsem nemohl odolat a na OpenCanteen jsem si jeden nechal vytvořit, aniž bych věděl do čeho se vrhám.</p>
<p>Codespace se vytváří jednoduše kliknutím na tlačítko “Code” ve vašem repozitáří, kde se vám nově zobrazí možnost si Codespace vytvořit.</p>
<p>Ve výchozím stavu běží server na Ubuntu. Pokud nenajdete docker obraz nebo devcontainer konfigurační soubor, musíte si samozřejmě vše nainstalovat sami, což zas tolik nevadí, protože to nejspíš budete dělat jen jednou, pokud si nebudete s obrazem stroje nějak zahrávat.</p>
<p>Instalace všeho však probíhá svižně, jelikož asi v Microsoftu mají na rychlejší internet, než já. Samozřejmě vše musíte instalovat skrze terminál (což mě celkem ranilo, jelikož instalovat Android SDK pro flutter byla celkem fuška).</p>
<p>Pokud používáte Settings Sync ve VS Code, automaticky se vám synchronizují nastavení a rozšíření. Pro pokročilé upravení prostředí slouží konfigurační soubor devcontainer.json
<img src="/assets/images/codespaces/2.jpg" alt="Ceny Codespaces"></p>
<p>Jakmile máte všechno nastavené, už stačí jen využít starého známého Visual Studio Code, které funguje úplně stejně jako na lokálním zařízení. Na Codespace se můžete kdykoli připojit přes webovou adresu.</p>
<p>Za mě velice praktické pro dříve uvedené typy lidí, už jen záleží, jestli se to zrovna vám za ty peníze vyplatí. Dokumentace je možná trochu chaotická, alespoň pro uživatele co se nevyznají v technologiích jako kontejnery či docker a většiny funkcí využije jen skutečný poweruser (což já určitě nejsem).</p>
</div>
</article>
<div class="post-nav">
<a class="previous" href="/programov%C3%A1n%C3%AD/2022/05/22/automatizace.html" title="Automatizace, automatizace, automatizace">Automatizace, automatizace, automatizace</a><a class="next" href="/bezpe%C4%8D%C3%AD/2022/07/19/nordvpn.html" title="NordVPN - Jste opravdu v takovém nebezpečí?">NordVPN - Jste opravdu v takovém...</a>
</div>
<div class="post-related">
<div>Related Articles</div>
<ul>
<li><a class="post-link" href="/vychyt%C3%A1vky/2022/05/31/codespaces.html" title="NordVPN - Jste opravdu v takovém nebezpečí?">GitHub Codespaces aneb VS Code na VPS</a></li>
<li><a class="post-link" href="/bezpe%C4%8D%C3%AD/2022/07/19/nordvpn.html" title="NordVPN - Jste opravdu v takovém nebezpečí?">NordVPN - Jste opravdu v takovém nebezpečí?</a></li>
<li><a class="post-link" href="/programov%C3%A1n%C3%AD/2022/05/22/automatizace.html" title="NordVPN - Jste opravdu v takovém nebezpečí?">Automatizace, automatizace, automatizace</a></li>
<li><a class="post-link" href="/tutori%C3%A1l/2022/10/22/rpi-arch.html" title="NordVPN - Jste opravdu v takovém nebezpečí?">Instalujeme Arch Linux ARM na Raspberry Pi 3</a></li>
</ul>
</div>
<div class="post-comments"> <div id="gitment_thread" class="giscus"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/default.css">
<script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/gitment.browser.js"></script>
<script src="https://giscus.app/client.js" data-repo="hernikplays/blog" data-repo-id="R_kgDOHr2B6w" data-category="General" data-category-id="DIC_kwDOHr2B684CSIhA" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="transparent_dark" data-lang="en" data-loading="lazy" crossorigin="anonymous" async>
</script>
</div></section>
</div>
</section>
<section class="sidebar" style="margin-left: 15px;">
<!-- Get sidebar items --></section>
</div>
</div>
</main><footer class="site-footer h-card">
<data class="u-url" href="/"></data>
<div class="wrapper">
<div class="site-footer-inner">
<div>Copyright © 2021-2022 hernikplays</div>
<div>Powered by <a title="Jekyll is a simple, blog-aware, static site
generator." href="https://jekyllrb.com/">Jekyll</a> &amp; <a title="Yat, yet
another theme." href="https://github.com/jeffreytse/jekyll-theme-yat">Yat Theme</a>.</div>
<div><a rel="me" href="https://social.linux.pizza/@hernik">Mastodon</a></div>
<div class="footer-col rss-subscribe">Subscribe <a href="/feed.xml">via RSS</a>
</div>
</div>
</div>
</footer>
</body>
</html>