Cloud Manager is a Kubernetes (K8s) platform & web front-end (Web UI) aimed to simplify the experience of deploying, scaling and configuring applications, services, and jobs, and overall manage K8s resources in an effective way. You can use it to deploy application backends and front-ends, install services from a catalog, setup CI/CD pipelines to build docker images, enable cooperation in devops work between team members, use it as deployment and management platform for micro-services architecture, and much more.
In this tutorial, you learn how to get started quickly with Cloud Manager by deploying a simple static website. Other tutorials, cover other topics such as deploying apps with a backend, a database, and support services. In particular, we will cover:
Cloud Manager is deployed as a Docker image, and can be deployed on-premises and in public clouds. This tutorial assumes that you registered an account in einnovator public cloud in https://cloud.einnovator.org. This allows you to get started quickly without having to setup your own Kubernetes cluster. If have an account already, you are are done and can move forward with the rest of the tutorial. If you want to use your own cluster (e.g. your laptop or organizatio data-center), check the instructions on Deploying Cloud Manager on-permises.
When you login to Cloud Manager, you should be able to see the dashboard for Cloud Manager, as shown below:
A pre-requisite to deploy applications and services in Kubernetes and CloudManager, beyond setting up an account an having an accessible cluster, it to create a (Name)Space. In EInnovator public cloud, when you first login a space is automatically created for you with name {username}-default
. You can use this one, or another you that you create. To create a new Space press Add New in the Space list. Select a name that is available in the cluster. Once you have a Space created, you can navigate to the its details page. The UI shows different tabs corresponding to the different types of resources that can be created in a Space, as shown in the image below:
(Name)Spaces need to have a unique name per Cluster — although you are free to select any display name.
Almost always you want to make your websites and apps, and sometimes backend services as well, to be available to the world via a public URL. This is very easy to setup with the Cloud Manager by creating a Domain and Route for your application/website assigning a DNS hostname.domain
to your app. In EInnovator public cloud, when you first login a few (sub-)domains are automatically assigned to you, including: {username}.nativex.cloud
, and {username}.einnovator.cloud
. You can use one of this as part of the routes to your apps/websites. You can also create new (sub-)domains, by navigating to the Domains listing page and clicking Add Domain. In this tutorial, we assume that you have one domain created.
To deploy a website you need to first deploy a HTTP server. In this tutorial, we will use Nginx which is available a marketplace solution in CloudManager. You will use it to host and deliver the files in your website, including HTML pages, CSS stylesheets, media resources, Javascript components). You website can be made of simple static content pages, or have dynamic content of some sorts form interactive media to a WebGL game. You can also integrate with remote services, for example to pull/push data from/to a DB, or get resources or data from backend service hosted on a public cloud or that you build.
From the top-right toolbar press Marketplace button. Search and selected the Nginx solution. (Ignore solutions in Helm packaged catalogs for this tutorial.). Install the service with a Dedicated plan if you have upgrade your account, or with Sandbox plan if you have not upgrade your account.
If you selected the Dedicated plan enter the following resource settings:
Click on INSTALL. This opens a modal (dialog panel) where you can provide additional details, including:
web
, www
, or demo
).{username}.nativex.cloud
or {username}.einnovator.cloud
).INSTALL
, and wait a few seconds.The browser should lead you to the deployment details page, and shown in the image below. Confirm that the Nginx service started, and status shows RUNNING (green).
Click on Routes tab. Confirm that a Route was pre-created for you selected hostname. Click on the View App button, and confirm that Nginx initial landing page open in other browser tab. Close this browser tab.
Deploying a Nginx service in EInnovator Cloud required account upgrade when using the dedicated plan. So you need to upgrade your account, if you have not done yet so. However, when you upgrade only a small amount (1euro or 1USD) is charged for validation purposes, and you get 20 free credits. This means that you can safely run a the Nginx service and keep it running for a long time for a very small amount. As a rough estimate, details depending on your resource settings, it is possible to keep a Nginx based web-site running for a full month for about less than 1 euro or 1$ (USD). Alternatively, you can use the free shared Sandbox plan (not recommendeded for a popular website). You can also setup Cloud Manager in your own K8 cluster (on-premises or other cloud provider).
Next step, is to actually upload your website files to Nginx. Cloud Manager has an integrated File Manager that can be used to easily browse and upload files to a pod or the collection of pods in a deployment (the instances). Click on the Instances > Files tab, to open the File Manager view and list the files in the HTTP base folder of Nginx /usr/share/nginx/html
.
There are a fews options you can use to upload files to Nginx:
.tar
, .tgz
, or .zip
) that you extract manually with the integrated consoleWe will cover all these approaches in this tutorial. Starting with the first and simplest approach – uploading individual files one by one.
Start by creating a single HTML file index.html
and a single CSS files css/style.css
file. Use the file content shown below as starting point. You can create this files locally in your laptop and then upload the with the File Manager. You can also created them and edit them directly in the File Manager. Use the toolbar in the File Manager to create folders, create files, and upload a file.
index.html
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" id="theme-css" href="css/style.css"></link>
</head>
<body>
<h1>My Website</h1>
...
</body>
</html>
css/style.css
body {
background-color:#f8f8f8;
padding: 30px 40px;
}
h1 {
font-size: xx-large;
color: #00a;
}
After uploading or creating/editing the files open the web site again by clicking on View Site from the Routes tab. Confirm that the home page of Nginx has been updated with your content.
If you have a existing website or plan to create a website with many files (e.g. done from scratch or you using some base theme as starting point), uploading individual files is to very practical. A more convenient approach, it to package all the files in the web-site as an archive file (e.g. a *.tgz
), and upload the single archive file to some directory into Nginx container and extract the files inside the archive.
Cloud Manager has a built-in Console or terminal UI that allow up to execute shell commands inside the container. Its located just to the side of the Files tab. To untar/unzip the file rin the commands:
ls -l
tar -xvf mywebsite.tgz
If you don’t have a pre-package website, and you want to a quick try you can use one of the many free samples public available online. For example, one of material design templates:
https://code.getmdl.io/1.3.0/mdl-template-dashboard.zip
https://code.getmdl.io/1.3.0/mdl-template-blog.zip
https://code.getmdl.io/1.3.0/mdl-template-android-dot-com.zip
https://code.getmdl.io/1.3.0/mdl-template-portfolio.zip
https://code.getmdl.io/1.3.0/mdl-template-text-only.zip
https://code.getmdl.io/1.3.0/mdl-template-article.zip
You can also pull a fremium web template from one of the many available professional web-designer sites and use one of these as a starting point for your real web-site (e.g. https://colorlib.com
, https://webflow.com
, https://www.os-templates.com
, etc.).
If you store and manage the files as a GIT Repository, you can also upload the files to your website directly from the GIT repository. This is really the recommended approach for professional development, as you have a well defined way to store and updates your files. To upload files from GIT repository in Cloud Manager, go to tab CICD/Options
and click Add Repository
.
Once you setup the GIT repository, in the File Manager tab click in toolbar button UploadRepo
. Select the base/root directory in the repository from where you want the files to be uploaded. Files are uploaded to the currently selected directory in the File Manager, and sub-directories following the same tree structure as in the repository.
Comments and Discussion