Docker in the browser, or how to create and "share" a development environment

Docker now uses just lazy. Around this technology has happened is a very interesting mess, not least because of the technologies and products have integrated Docker, which became part of their infrastructure. Runners on Docker-this is almost a “must” for the cloud IDE. What can we say, if Google clearly recognized the advantages of running applications in containers rather than in the “pure iron”. However, it is the topic of another discussion.

Creating a development environment in the browser

So, Docker is likely to change the face of the technological world. Rather, it already changes it. All potentially active companies have already posted their Docker images that run their products. Either you set up the environment or setting environment variables... Downloaded the image, remontiroval local resources if necessary (the“source” of the project, a local repository, and so on), and grief do not know.

The market leader in conventional IDE went a little further in the use of Docker. The company has set itself 2 terms:

the

the
• no downloads, installations, and related chores
the
• user is not limited to the process of “building” the image of the development environment

In other words, to create a development environment, you only need a browser and an account in Codenvy. In order about everything.

Previously we wrote about cloud IDE, their advantages and disadvantages. One of the main disadvantages was the inability of “customization” environment. In other words, the user does not have access to the environment where is going and starts his project. This shortcoming was taken into account.

What does the user Codenvy? He gets access to the instance of the runner on which you have installed Docker. Of course, that access is limited to a few Docker commands that are not performed explicitly, but through buttons and menus in the web interface. The user can write a Dockerfile and click the Run button. In fact met 2 teams docker build, and after successful creation of the image is docker run. Of course, with a set of parameters.

Of course, offered and pre-runners over 20. But, if for some reason, Deputy runner is not suitable, there are more than 1 solution:

the

the
• 'extend' the existing environment. In other words, to inherit from a base image
the
• to create your own environment “from scratch”. DockerHub offers thousands of images, including official

In the end the user receives the CodeMirror editor with all the appropriate functionality (syntax highlighting, code folding, search, multicursor, AutoCorrect), the version control system Git integration with GitHub (oAuth is used. For other git hosting providers use manual SSH connection) Datasource plug-in for easy connection to databases and work with them (SQL editor with autocompletion and syntax highlighting).

In the image can be added as “source” and “build-artifacts” jar, war, apk etc. Build projects can arise as a native on a separate dB instance (currently supported by Maven and Ant) and directly in the “runtime” is in this case no restrictions on the use of the build system for Grails, Gradle, Leiningen, all without problems on my Linux installs axle (recommended lightweight Debian Jessie). For example, to install the Maven in your Codenvy environment, you need to perform some simple actions, not unlike the local experience:

the

RUN mkdir /home/user/maven3 && \
wget-qO- "http://archive.apache.org/dist/maven/maven-3/3.1.1/binaries/apache-maven-3.1.1-bin.tar.gz" | tar -zx --strip-components=1 -C /home/user/maven3
ENV M2_HOME /home/user/maven3 
RUN echo "export M2_HOME=$M2_HOME" >> /home/user/.bashrc
ENV PATH $M2_HOME/bin:$PATH
RUN echo "export PATH=$PATH" >> /home/user/.bashrc

Similarly configured any other build tool — download, unpack, set environment variables and write them in .bashrc. Of course, you can use ready-made images from DockerHub, where all this stuff is already defined.
As for adding source code and artifacts in the environment, then the developers Codenvy offer 2 variables, which are used to “sorrow” and “build artifacts”.

To add the source code of the script projects (PHP, Python, AngularJS) use the standard Docker ADD instruction with Codenvy variable:

the

ADD $app$ /destination/path/in/your/image/

In fact downloaded the archive with all application files and unpacked in the specified directory.

The same instruction for a Maven or Ant project will take to build the artifact, which then marks or “diploidy”, for example in Tomcat:

the

ADD $app$ /home/user/tomcat7/webapps/ROOT.war

And if you need to take sources of the Java project and compile it in runtime, use:

the

ADD $app_src$ /destination/path/in/your/image

In the case of using preinstalled runtime or inheritance Codenvy images, offers SSH access to the running container. For example, as a CMD command, you can write an infinite loop:

the

CMD white true; do true; done 

and execute commands in the Terminal tab.



As a SSH terminal use Shellinabox, however, the user may use “something different” — the iframe in the tab Terminal is listening to the port 4200. EXPOSE ports works the same as with a local build of the image. There is only one condition, if you open the port that the “client” need to know where to pick up the URL of the terminal and applications. The use of specific variables:

For terminal:

the

ENV CODENVY_WEB_SHELL_PORT <port>

For the application:

the

ENV CODENVY_APP_PORT_<port>_HTTP <port>

For example, if your Tomcat runs on port 8080, then the variable and its value will look as follows:

the

ENV CODENVY_APP_PORT_8080_HTTP 8080

That's basically all the “rules” to use Docker in Codenvy. Everything else depends on available resources and fantsie user. Imported the project, created development environment, added the source code was compiled and launched the project — all in the browser. From the interesting — using VNC to run desktop and mobile applications (e.g. Android emulator), as well as live-reload for scripting languages (preinstalled environment directory with the source code of the project is mounted in the image that allows you to get the changes without having to restart the app — everything is as locally on your desktop).

'Sharing' of the development environment

Probably many of you faced a situation when a colleague needed to run your project on your machine. Or colleague, and client. Acceptance or dev server, for example, are not suitable for some reason. With the project everything is OK, the app works like a clock, Yes, but the environment for it is not a simple one. And Docker client on Windows the laptop is not selected and you only need the Debian c Node, npm, nvm, grunt, gulp, bower and some other Ruby gems. Yes, there is "Doc". But, like a long time since you updated, and it seems like the last time you had a little dance with a tambourine, but it is not "plant" project. Of course, it's not entirely typical, but it happens. And after half a day of torment, a colleague or client says — "Not working". Well, you as a programmer say "I don't know. Works for me".

As this problem is solved, or trying to decide in Codenvy? Feature called Factories. In an open project, the user generates the URL c the hash, which is encrypted dozens of settings regarding the project itself, its environment, the behavior of the IDE... Specially trained API receives a POST request with these parameters and gives an URL, for example https://codenvy.com/f?id=djbxklig6ihr3cgn (opens in a new tab).

Clicking on the link, you can see that creates a temporary workspace where you cloned the source code of the project. Run, collect and run Docker image. The instructions spelled out the build with Grails and deploy war in Tomcat. Each time you click on the URL creates a new temporary workspace. Thus, the link one and the identical environments, even hundreds. The user can edit source code, make changes and rebuild/restart the app. After a while this odnorazovyj workspace dies, and the phrase "I don't know, works for me" is not needed in principle.
The URL is generated directly in the UI, however, there is advanced a method using the CLI or API, and JSON and with a set of parameters where you can specify the RAM required to "take-off" application, the environment in which you want to run the project "residence" of the source code (Git URL from GitHub, for example), the actions after creating the temporary workspace (open README file, for example), access restrictions, replace text and variables.

Another example. Node.js an application running with MongoDB https://github.com/andzdroid/mongo-express. To run locally, you need to install a lot of things. Or use the "factory" to launch the application in a temporary workspace startonut Mongo as a daemon and run itself Node app (open in a new tab):



Pros:

the

the
• do not need to install Docker
the
• do not need to download the image (once "pulling image", it remains in the cache Docker-and in the instance of the runner)
the
• start in 2 clicks — URLS and Run button in the Codenvy

Cons. They, of course, easy to find. Well, not to keep up with the cloud-based IDE for IntelliJ and Eclipse. Editing features are limited. By the way, Codenvy can be used in conjunction with the aforementioned IDE. For Eclipse there is a special plugin, which you can use to import projects from Codenvy to Eclipse, edit in your favorite IDE, and build and run projects in the cloud. In principle, you can use any IDE in conjunction with Codenvy CLI — sync source code, remotely build and run projects — all this is offered in the Codenvy CLI.

At this point, if the build of the app is in Docker-e, "client", specifically, the Java editor knows nothing about it. Hence Olustee code autocompletion and false errors. Assistant in the writing code is also missing for all languages except Java. The problem, according to developers themselves, will be addressed, as the builders will also be transferred to Docker in the near future.

Code navigation and sync files between the project and the "runner" also in the nearest future. In short, enough work.

And finally, several Factories (to open in new tabs)

Android File Manager collected Gradleand running in the default Android emulator (see the instructions in the WELCOME file):



Java game the application running means of the Java GAE SDK. Going to the tab Terminal, it is possible to "deploy" the app on GAE (the instructions in the WELCOME file, do not forget to mention your application ID in appengine-web.xml). By the way, full integration with GAE on the way.



AngularJS project:



Instead of conclusions

Well, with great progress Docker, it became clear that a cloud-based IDE, and Codenvy, in particular, do not set themselves the goal of replacing a desktop. It does not say, and the local environment and closer and clearer. However, the possibility of creating a development environment in the browser, and effective sharing of project+runtime can make life significantly easier in certain circumstances. For example, a languid statement that starts with "install Java, Maven m2 plugin and another dozen toolsover", you can replace a button or link that the user does not need to download half the Internet to try out a framework or a new library. Recent example — testing Arquillian framework. Pay attention to the number of instructions in the Getting Started link. But the same thing, but in the Codenvy factory (open in a new tab):



Instead of an epilogue

The lab on the 'pros' had to be done. To install all was laziness. Zayuzat Codenvy. This is a review of one of the users.

Article based on information from habrahabr.ru