Google Git
Sign in
eclipse/gerrit/www.eclipse.org/che/refs/heads/CheConf18/./docs/tutorials/multi-machine/index.html
blob: d5f28120b6ef0e7df5149f7d4fc40b0fdf77f8b9 [file]
<!-- jQuery Eclipse IP approval https://dev.eclipse.org/ipzilla/show_bug.cgi?id=10801 -->
<script type="text/javascript" charset="utf8" src="../../../docs/assets/scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" charset="utf8">
$(document).ready(function(){
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var image = images[i];
var parentElement = image.parentElement;
var a = document.createElement('a');
if (! image.getAttribute('src').includes("logo-codenvy.svg") && ! image.getAttribute('src').includes("codenvy-contribute.svg") ){
a.href = image.getAttribute('src');
a.target = "_blank";
a.appendChild(image);
parentElement.appendChild(a);
}
}
});
</script>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Multi-Machine Workspaces -
Tutorials
- Eclipse Che</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Jekyll v3.5.1">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
<link rel="stylesheet" href="../../../docs/assets/css/screen.css">
<link rel="icon" type="image/x-icon" href="../../../docs/assets/imgs/favicon.ico">
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="wrap">
<header>
<nav class="mobile-nav show-on-mobiles">
<ul>
<li class="">
<a href="../../../docs/index.html">Docs</a>
</li>
<li class="current">
<a href="../../../docs/tutorials/multi-machine/index.html">Tutorials</a>
</li>
<li class="">
<a href="../../../docs/openshift/config/index.html">OpenShift</a>
</li>
<li>
<a href="https://github.com/eclipse/che-docs/tree/master/src/main">GitHub</a>
</li>
</ul>
</nav>
<div class="grid">
<div class="unit one-third center-on-mobiles">
<a href="https://eclipse.org/che/">
<span class="sr-only">Eclipse Che</span>
<img src="../../../docs/assets/imgs/logo-eclipseche.svg" alt="Eclipse Che Logo" width="249" height="115">
</a>
</div>
<nav class="main-nav unit two-thirds hide-on-mobiles">
<ul>
<li class="">
<a href="../../../docs/index.html">Docs</a>
</li>
<li class="current">
<a href="../../../docs/tutorials/multi-machine/index.html">Tutorials</a>
</li>
<li class="">
<a href="../../../docs/openshift/config/index.html">OpenShift</a>
</li>
<li>
<a href="https://github.com/eclipse/che-docs/tree/master/src/main">GitHub</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="tutorials">
<div class="grid">
<div class="docs-nav-mobile unit whole show-on-mobiles">
<select onchange="if (this.value) window.location.href=this.value">
<option value="">Navigate the docs…</option>
<optgroup label="User Tutorials">
<ul>
</ul>
<ul>
<li class="current"><a href="../../../docs/tutorials/multi-machine/index.html">Multi-Machine Workspaces</a></li>
<li class=""><a href="../../../docs/tutorials/maven/index.html">Java+Maven</a></li>
<li class=""><a href="../../../docs/tutorials/gradle/index.html">Java+Gradle</a></li>
<li class=""><a href="../../../docs/tutorials/java/index.html">Java Console Apps</a></li>
<li class=""><a href="../../../docs/tutorials/swing/index.html">Java Swing</a></li>
<li class=""><a href="../../../docs/tutorials/nodejs/index.html">Node.js</a></li>
<li class=""><a href="../../../docs/tutorials/angular2/index.html">Angular 2</a></li>
<li class=""><a href="../../../docs/tutorials/meteor/index.html">Meteor</a></li>
<li class=""><a href="../../../docs/tutorials/wordpress/index.html">Wordpress</a></li>
<li class=""><a href="../../../docs/tutorials/php/index.html">PHP</a></li>
<li class=""><a href="../../../docs/tutorials/composer/index.html">Composer</a></li>
<li class=""><a href="../../../docs/tutorials/android/index.html">Android</a></li>
<li class=""><a href="../../../docs/tutorials/spring-boot/index.html">Spring Boot</a></li>
<li class=""><a href="../../../docs/tutorials/rails/index.html">Rails</a></li>
<li class=""><a href="../../../docs/tutorials/laravel/index.html">Laravel</a></li>
<li class=""><a href="../../../docs/tutorials/tomee/index.html">TomEE</a></li>
<li class=""><a href="../../../docs/tutorials/che-in-che/index.html">Che in Che</a></li>
<li class=""><a href="../../../docs/tutorials/gae/index.html">Google App Engine</a></li>
<li class=""><a href="../../../docs/tutorials/che-and-appfog/index.html">AppFog</a></li>
<li class=""><a href="../../../docs/tutorials/subversion/index.html">Subversion Repos</a></li>
<li class=""><a href="../../../docs/tutorials/ftpsftp/index.html">FTP/SFTP</a></li>
<li class=""><a href="../../../docs/tutorials/cuba/index.html">Cuba Platform</a></li>
<li class=""><a href="../../../docs/tutorials/sourcegraph/index.html">Sourcegraph</a></li>
<li class=""><a href="../../../docs/tutorials/vaadin/index.html">Vaadin</a></li>
<li class=""><a href="../../../docs/tutorials/platformio/index.html">PlatformIO</a></li>
</ul>
</optgroup>
</select>
</div>
<div class="unit four-fifths">
<article>
<div class="improve right hide-on-mobiles">
<a href="https://github.com/codenvy/che-docs/blob/master/src/main/_docs/tutorials/tutorial-multi-machine.md"><i class="fa fa-pencil"></i> &nbsp;Improve this page</a>
<!--<a href="https://github.com/eclipse/che/blob/master/docs/_docs/tutorials/tutorial-multi-machine.md"><i class="fa fa-pencil"></i> &nbsp;Improve this page</a>-->
</div>
<div class="doc-title">
<h1>Multi-Machine Workspaces</h1>
<div class="doc-title-border">
</div>
</div>
<p>A multi-machine recipe allows multiple runtimes to communicate/share data. In this tutorial we will be looking at an existing Java and MySQL application called Pet Clinic. The tutorial will help show how to create a multi-machine from an existing <a href="../../../docs/devops/runtime-stacks/index.html">runtime stack</a> called “Java-MySQL”, execute commands on different target runtimes, startup the Pet Clinic Tomcat server, view/interact with the Pet Clinic web page, and take a closer look at the “Java-MySQL” <a href="../../../docs/devops/runtime-stacks/index.html">runtime stack</a> /<a href="../../../docs/devops/runtime-recipes/index.html">runtime recipe</a> to get a better understanding of how multi-machine runtimes are created.</p>
<h1 id="1-pre-reqs">1. Pre-Reqs</h1>
<p>Use your Codenvy.io account for the following or if you are using Eclipse Che refer to the <a href="../../../docs/setup/getting-started/index.html">getting started documentation</a></p>
<h1 id="2-create-workspace">2. Create Workspace</h1>
<p>Click the “Dashboard” menu item in the dashboard. Click the “Create Workspace” button if there are existing workspaces.</p>
<p><img src="../../../docs/assets/imgs/che-multimachine-tutorial3.jpg" alt="che-multimachine-tutorial3.jpg" style="width: 60%" /></p>
<p>Select “Multi Machine” section and “Java-MySQL” stack from the list of available stacks.</p>
<p><img src="../../../docs/assets/imgs/che-multimachine-tutorial1.jpg" alt="che-multimachine-tutorial1.jpg" style="width: 60%" /></p>
<p>The other workspace information can remain as it is. Click the “create” button at the bottom or at the right top to create the workspace.</p>
<p><img src="../../../docs/assets/imgs/che-multimachine-tutorial2.jpg" alt="che-multimachine-tutorial2.jpg" style="width: 60%" /></p>
<h1 id="3-using-ide">3. Using IDE</h1>
<p>Once the workspace is created, the IDE will be loaded in the browser.</p>
<p>Each runtime can be identified in the processes section of the IDE. It will list the runtimes of “dev-machine” and “db” of our multi-machine workspace. The “db” runtime for this tutorial provides the database for the Java Spring application to use.</p>
<p>To make sure that the database is running we will issue the “show database” command to the “db” runtime. Select the “db” runtime item from the target drop down menu. Then make sure that “show databases” is selected in the command drop down menu and hit the play button.</p>
<p><img src="../../../docs/assets/imgs/che-multimachine-tutorial4.jpg" alt="che-multimachine-tutorial4.jpg" /></p>
<p>This will run the “show databases” command in the “db” runtime and display the available database at the bottom in the processes section. Note that it is not required to know the database listed for this tutorial and this step merely shows how to successfully target different runtimes.</p>
<p>Switch the target back to “dev-machine”, select the “web-java-petclinic: build and deploy” command, and click the play button. The Pet Clinic Java code will be compiled and the tomcat server started. The tomcat server when it is ready will output <code class="highlighter-rouge">Server startup in &lt;time&gt; ms</code>. Click on the preview url link after the tomcat server is started to open the Pet Clinic web page.</p>
<p><img src="../../../docs/assets/imgs/che-multimachine-tutorial6.jpg" alt="che-multimachine-tutorial6.jpg" /></p>
<p>The web page can interact in various ways with the database. Data can be added to the data by clicking the “Find owner” link, clicking the “Add owner” link, and filing in the form.</p>
<p><img src="../../../docs/assets/imgs/che-multimachine-tutorial7.jpg" alt="che-multimachine-tutorial7.jpg" style="width: 40%" /></p>
<h1 id="4-editing-building-and-debugging">4. Editing, Building and Debugging</h1>
<p>Che is a fully featured IDE that just happens to be in the browser. You can explore the <a href="../../../docs/ide/editor-settings/index.html">editor</a> which includes <a href="../../../docs/ide/intellisense/index.html">intellisense</a> for some languages and <a href="../../../docs/ide/intellisense/index.html#refactoring">refactoring</a>. It also includes <a href="../../../docs/ide/git-svn/index.html">git and svn</a> support built-in.</p>
<p>The example app has built in commands for <a href="../../../docs/ide/build/index.html">building</a> and <a href="../../../docs/ide/run/index.html#web-apps">running</a> the app. You can also <a href="../../../docs/ide/debug/index.html">debug</a> right inside Che.</p>
<h1 id="5-about-docker-and-compose">5. About Docker and Compose</h1>
<p>Read this section to understand more about the multi-machine “Java-MySQL” <a href="../../../docs/devops/runtime-stacks/index.html">runtime stack</a> used and its <a href="../../../docs/devops/runtime-recipes/index.html">runtime recipe</a>. The “Java-MySQL” stack configuration is located in the “stacks” section in the dashboard. This stack can be found easier by typing “java” in the filter form.</p>
<p><img src="../../../docs/assets/imgs/che-multimachine-tutorial8.jpg" alt="che-multimachine-tutorial8.jpg" /></p>
<p>Click on the “Java-MySQL” menu item which will bring up the stack’s configuration page. There is various useful configuration information provided on this page as well as the <a href="../../../docs/devops/runtime-stacks/index.html">Runtime Stacks</a> and <a href="../../../docs/devops/runtime-recipes/index.html">Runtime Recipes</a> documentation pages. For this tutorial, we will be focusing on the recipe configuration and dockerfile provided in the “Java-MySQL” stack.</p>
<p>The recipe uses docker compose syntax. Due to the limitation of the JSON syntax the compose recipe is written as a single line with <code class="highlighter-rouge">\n</code> indicating carriage return. The following is the recipe in expanded form to make reading easier.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">services</span><span class="pi">:</span>
<span class="s">db</span><span class="pi">:</span>
<span class="s">image</span><span class="pi">:</span> <span class="s">mysql</span>
<span class="s">environment</span><span class="pi">:</span>
<span class="s">MYSQL_ROOT_PASSWORD</span><span class="pi">:</span> <span class="s">password</span>
<span class="s">MYSQL_DATABASE</span><span class="pi">:</span> <span class="s">petclinic</span>
<span class="s">MYSQL_USER</span><span class="pi">:</span> <span class="s">petclinic</span>
<span class="s">MYSQL_PASSWORD</span><span class="pi">:</span> <span class="s">password</span>
<span class="s">mem_limit</span><span class="pi">:</span> <span class="s">1073741824</span>
<span class="s">dev-machine</span><span class="pi">:</span>
<span class="s">image</span><span class="pi">:</span> <span class="s">eclipse/ubuntu_jdk8</span>
<span class="s">mem_limit</span><span class="pi">:</span> <span class="s">2147483648</span>
<span class="s">depends_on</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">db</span>
</code></pre>
</div>
<p>Examining the code above you will see our two runtime machines “db” and “dev-machine”. Every workspace requires a <a href="../../../docs/devops/runtime-machines/index.html">machine</a> named “dev-machine”.</p>
<p>In the recipe the <code class="highlighter-rouge">depends_on</code> parameter of the “dev-machine” allows it to connect to the “db” machine MySQL process’ port 3306. The “dev-machine” configures its MySQL client connection in the projects source code at <code class="highlighter-rouge">src/main/resources/spring/data-access.properties</code>. The url is defined by <code class="highlighter-rouge">jdbc.url=jdbc:mysql://db:3306/petclinic</code> which uses the database machine’s name “db” and the MySQL server default port 3306.</p>
<p>Port 3306 is exposed in the “db” machines Dockerfile during build but is not required for “dev-machine” to connect to it. Exposing port 3306 is done to provide access to database that is external to “db” machine network via a random ephemeral port assigned by docker. The “dev-machine” by setting <code class="highlighter-rouge">depends_on: - db</code> creates a private network that allows it use of “db” machine’s name as hostname and port 3306 without having to determine the ephemeral port docker assigned.</p>
<p>Exposing port 3306 is done to provide an option for an external administrator to log into the “db” machine MySQL server through a MySQL client on the ephemeral port assigned. The workspace runtime configuration interface provides the external ephemeral ports assigned by docker for all machines’ exposed ports. Image below indicates only external ephemeral port 32778 assigned to “db” machine’s exposed port 3306.</p>
<p><img src="../../../docs/assets/imgs/che-mysql-tutorial1.jpg" alt="che-mysql-tutorial1.jpg" /></p>
<p>The “db” machine contains a MySQL database created by MySQL’s official Docker image “mysql”. Within MySQL runtime information for the “db” machine there are four environment variables set that are used by <a href="https://github.com/docker-library/mysql/blob/master/5.7/docker-entrypoint.sh">MySQL docker image’s entrypoint script</a> that sets the database name and authentication information.</p>
<p><img src="../../../docs/assets/imgs/che-multimachine-tutorial9.jpg" alt="che-multimachine-tutorial9.jpg" style="width: 80%" /></p>
</article>
</div>
<div class="unit one-fifth hide-on-mobiles">
<aside>
<h4>User Tutorials</h4>
<ul>
<li class="current"><a href="../../../docs/tutorials/multi-machine/index.html">Multi-Machine Workspaces</a></li>
<li class=""><a href="../../../docs/tutorials/maven/index.html">Java+Maven</a></li>
<li class=""><a href="../../../docs/tutorials/gradle/index.html">Java+Gradle</a></li>
<li class=""><a href="../../../docs/tutorials/java/index.html">Java Console Apps</a></li>
<li class=""><a href="../../../docs/tutorials/swing/index.html">Java Swing</a></li>
<li class=""><a href="../../../docs/tutorials/nodejs/index.html">Node.js</a></li>
<li class=""><a href="../../../docs/tutorials/angular2/index.html">Angular 2</a></li>
<li class=""><a href="../../../docs/tutorials/meteor/index.html">Meteor</a></li>
<li class=""><a href="../../../docs/tutorials/wordpress/index.html">Wordpress</a></li>
<li class=""><a href="../../../docs/tutorials/php/index.html">PHP</a></li>
<li class=""><a href="../../../docs/tutorials/composer/index.html">Composer</a></li>
<li class=""><a href="../../../docs/tutorials/android/index.html">Android</a></li>
<li class=""><a href="../../../docs/tutorials/spring-boot/index.html">Spring Boot</a></li>
<li class=""><a href="../../../docs/tutorials/rails/index.html">Rails</a></li>
<li class=""><a href="../../../docs/tutorials/laravel/index.html">Laravel</a></li>
<li class=""><a href="../../../docs/tutorials/tomee/index.html">TomEE</a></li>
<li class=""><a href="../../../docs/tutorials/che-in-che/index.html">Che in Che</a></li>
<li class=""><a href="../../../docs/tutorials/gae/index.html">Google App Engine</a></li>
<li class=""><a href="../../../docs/tutorials/che-and-appfog/index.html">AppFog</a></li>
<li class=""><a href="../../../docs/tutorials/subversion/index.html">Subversion Repos</a></li>
<li class=""><a href="../../../docs/tutorials/ftpsftp/index.html">FTP/SFTP</a></li>
<li class=""><a href="../../../docs/tutorials/cuba/index.html">Cuba Platform</a></li>
<li class=""><a href="../../../docs/tutorials/sourcegraph/index.html">Sourcegraph</a></li>
<li class=""><a href="../../../docs/tutorials/vaadin/index.html">Vaadin</a></li>
<li class=""><a href="../../../docs/tutorials/platformio/index.html">PlatformIO</a></li>
</ul>
</aside>
</div>
<div class="clear"></div>
</div>
</section>
<script>
var anchorForId = function (id) {
var anchor = document.createElement("a");
anchor.className = "header-link";
anchor.href = "#" + id;
anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
anchor.title = "Permalink";
return anchor;
};
var linkifyAnchors = function (level, containingElement) {
var headers = containingElement.getElementsByTagName("h" + level);
for (var h = 0; h < headers.length; h++) {
var header = headers[h];
if (typeof header.id !== "undefined" && header.id !== "") {
header.appendChild(anchorForId(header.id));
}
}
};
document.onreadystatechange = function () {
if (this.readyState === "complete") {
var contentBlock = document.getElementsByClassName("artik")[0] || document.getElementsByClassName("openshift")[0] || document.getElementsByClassName("tutorials")[0] || document.getElementsByClassName("docs")[0] || document.getElementsByClassName("news")[0];
if (!contentBlock) {
return;
}
for (var level = 1; level <= 6; level++) {
linkifyAnchors(level, contentBlock);
}
}
};
</script>
</body>
</html>