0
0
0

Deploying to Kubernetes with Cloud Manager

Setting up a Static Web Site Tutorial
Docs EInnovator Posted 03 Feb 20

Deploying to Kubernetes with Cloud Manager: Setting Up a WebSite

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:

  • Basic introduction on how to setup a Space and a Domain
  • How to deploy a Nngix server
  • How to upload files to to the server, from your computer or from a GIT repository
  • How to make your website available to the world

Getting Started

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:

Cloud Manager Dashboard

Creating the First Space

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:

Space Details

(Name)Spaces need to have a unique name per Cluster — although you are free to select any display name.

Creating a DNS (Sub-)Domain

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.

Deploying a Nginx HTTP Server

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:

  • 1 single instance
  • Small amount of memory (e.g. 64Mb or 128Mb)
  • Small ephemeral disk size (e.g. 64Mb or 128Mb)
  • Zero permanent disk size

Click on INSTALL. This opens a modal (dialog panel) where you can provide additional details, including:

  • Unique name for your Deployment in the Space (e.g. web, www, or demo).
  • A DNS hostname or Route where you want the Nginx server to be available to the world. Can be the same as the unique deployment name.
  • Select as DNS Domain on of the domains available (created automatically for you or created by you – e.g. {username}.nativex.cloud or {username}.einnovator.cloud).
  • Keep the Auto-Start checkbox ON.
  • Press 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).

Uploading Files to Nginx Server

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.

Cloud Manager Dashboard

There are a fews options you can use to upload files to Nginx:

  • Upload individual files that you have in you computer (e.g. HTML or CSS files edited with your preferred editor)
  • Upload an archive file (e.g. .tar, .tgz, or .zip) that you extract manually with the integrated console
  • Upload files from a GIT Repository (recommended for non-trivial web-sites with frequent updates)
  • Create a new empty file, and edit directly on the server (not recommended unless you plan to download the file later on to your computer or a GIT repository)

We 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.

Uploading Archive Files

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.).

Uploading Files from a GIT Repository

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.

  • If the repository is public:
    • select the GIT generic “Version Control System” VCS (the default)
    • enter the URL of the git repository
    • Optionally, select the branch (if not the default).
  • If the repository is private:
    • you need to configure first a “Version Control System” VCS, with your access credentials
    • A wizard is available to configure easily some of the most popular hosted GIT providers (GitHub, BitBucket, GitLab, GCP, etc.)
    • when entering the GIT URL, select the created VCS

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.

Learning More

Comments and Discussion

Content