Docker in the browser, or how to create and "share" the development environment
Docker now does not use only lazy. A very interesting mess brewed around this technology, not least thanks to the technologies and products that integrated Docker, which has become part of their infrastructure. Runners on Docker are almost the “must” for cloud-based IDEs. What can we say, if Google clearly recognized the advantages of running applications in containers, and not on “pure hardware”. However, this is a topic for another discussion.
Creating a development environment in the browser
So, the Docker is likely to change the face of the technological world. Rather, he already changes it. All more or less active companies have already posted their docker images in which their products are launched. Neither the environment settings, nor the setting of environment variables ... I downloaded the image, mounted local resources, if necessary (the project’s “sorts”, local repository, etc.), and you don’t know grief.
')
The market leader for conventional IDE went a little further in using Docker. The company has set itself 2 conditions:
In other words, to create a development environment, you just need a browser and an account in Codenvy. In order of everything.
Earlier, we already wrote about cloud IDE, their advantages and disadvantages. One of the main drawbacks was the impossibility of “customizing” the environment. In other words, the user does not have access to the environment where his project is built and run. This flaw was taken into account.
What does the Codenvy user get? It gets access to the runner instance on which the Docker is installed. Of course, this access is limited to several Docker commands that are executed not explicitly, but through buttons and menus of the web interface. The user can independently write a Dockerfile and click the Run button. In fact, 2 commands will be executed - docker build , and after successful image creation - docker run . Of course, with a set of parameters.
Of course, pre-runners are also offered - there are more than 20 of them. But, if for some reason, the defot runner is not suitable, there is more than 1 solution:
As a result, the user receives a CodeMirror editor with all the relevant functionality (syntax highlighting, code folding, search, multi-cursor, automatic replacement), Git version control system, GitHub integration (using oAuth. For other git hosting providers, a manual SSH connection is used) plugin for convenient connection to databases and work with them (SQL editor with autocomplete and syntax highlighting).
In the image you can add both the “sorts” of the project, and “build artifacts”, jar, war, apk etc. A project build can occur both natively on a separate instance (currently supported by Maven and Ant), and directly in runtime - in this case there are no restrictions on using the build system - Grails, Gradle, Leiningen - all this is installed on Linux without any problems axis (lightweight Debian Jessie recommended). So, for example, to install Maven in your Codenvy environment, you need to perform some simple actions, not unlike local experience:
Any other build tool is configured in the same way - download, unpack, set environment variables and write them to .bashrc. Of course, you can use ready-made images with DockerHub, where all this stuff is already pre-installed.
As for adding source code and artifacts to the environment, here the Codenvy developers offer 2 variables, which are used differently for “sorts” and for “build artifacts”.
To add source code for script projects (PHP, Python, AngularJS) use the standard Docker ADD instruction with Codenvy variable:
In fact, the archive with all the files of the application is downloaded and unpacked into the specified directory.
The same instruction for the Maven or Ant project will pick up the build artifact, which will then be executed or “deployed”, for example in Tomcat:
And if you need to take Java project sources and build it in runtime, use:
In case of using the pre-installed runtime or inheriting Codenvy images, SSH access to the running container is offered. For example, as an CMD command, you can write an infinite loop:
and execute commands by hand in the Terminal tab.
Shellinabox is used as the SSH terminal, however, the user has the right to use “something of his own” - iframe in the Terminal tab listens to port 4200. EXPOSE ports works the same as in the local build of the image. There is only one condition, if you open a port, the “client” needs to know where to get the terminal URL and applications. Special variables are used for this:
For terminal:
For application:
For example, if your Tomcat is running on a standard port 8080, then the variable and its value will look like this:
Here are all the “rules” of using Docker at Codenvy. Everything else depends on the resources available and the user's fantasy. We imported the project, created the development environment, added the source code, collected and launched the project - all in the browser. Of interest is the use of VNC to launch desktop and mobile applications (for example, Android emulator), as well as live-reload for scripting languages ​​(in the preinstalled environment, the project source code directory is mounted into an image, which allows you to catch changes without needing to restart the application - everything is as and locally on the desktop).
'Sharing' development environment
Probably many of you are faced with a situation where a colleague needs to run your project on your machine. Or not to a colleague, but to a client. Acceptance or dev-server, say, not suitable for some reason. With the project, everything is OK, the application works like a clock, only the environment is not simple. And the client’s Docker on a Windows laptop is not installed, and you only need Debian with Node, npm, nvm, grunt, gulp, bower and some other Ruby gems. Yes, there is a "dock". But it seems that you didn’t update it for quite a while, and it seemed like the last time you had to dance a little with a tambourine, otherwise the project didn’t start. Of course, this is not a typical situation, but it happens. And after a half-day of torment, a colleague or client says - "Does not work." Well, and you, as a real programmer, say “Well, I don’t know. It works for me. ”
How to solve this problem, or trying to solve it in Codenvy? The chip is called Factories. In an open project, a user generates a URL with a hash code in which dozens of parameters are encrypted concerning the project itself, its environment, IDE behavior ... A specially trained API receives a POST request with these parameters and issues a URL, for example https://codenvy.com/ f? id = djbxklig6ihr3cgn (open in a new tab).
Clicking on the link, we see that a temporary workspace is created, where the source code of the project is being cloned. By clicking on the Run button, we collect and launch the Docker image. The instructions include a build using Grails and war on Tomcat. Each time you click on a URL, a new temporary workspace is created. Thus, the link is one - and identical environments at least a hundred. In this case, the user can edit the source code, make changes and rebuild / restart the application. After some time, such a single development workshop dies, and the phrase “I don’t know, it works for me” is not necessary in principle.
The URL is generated directly in the UI, but there is also an advanced method using the CLI or API, and JSON with a set of parameters in which you can specify the RAM required for the application to “take off”, the environment in which the project should be launched, the registration of the source code (Git URL with GitHub, for example), actions after creating a temporary workspace (opening a README file, for example), restricting access, replacing text and variables.
One more example. Node.js application that works with MongoDB https://github.com/andzdroid/mongo-express . To run locally, you need to install a lot of things. Or use the “factory”, start the application in temporary workspace, start Mongo as a daemon and start the Node application itself (open in a new tab):
Pros:
Minuses. Of course, they are easy to find. Well, keep up the cloud IDE with IntelliJ and Eclipse. Editor features are limited. By the way, Codenvy can be used in conjunction with the above IDE. For Eclipse there is a special plugin with which you can import projects from Codenvy into Eclipse, edit in your favorite IDE, and collect and run projects in the cloud. In principle, you can use any IDE in conjunction with the Codenvy CLI - source code synchronization, remote build and launch of projects - all this is offered in the Codenvy CLI.
At the moment, if the application build is running in Docker, then the “client”, and specifically, the Java editor does not know anything about it. Hence the code autocompletion and false errors. Code Writing Assistant is also missing for all languages ​​except Java. The problem, according to the developers themselves, will be solved, since the builders will also be transferred to Docker in the near future.
Code navigation and file synchronization between the project and the runner are also in the near future. In short, there is enough work.
And finally, some Factories (open in new tabs)
Android File Manager compiled by Gradle and running in the default Android emulator (see instructions in the WELCOME file):
Java GAE application launched with Java GAE SDK. Going to the Terminal tab, you can “plug” the application on GAE (instructions in the WELCOME file, do not forget to specify your application ID in appengine-web.xml). By the way, full integration with GAE on the way.
AngularJS project :
Instead of conclusions
Well, with Docker’s frantic progress, it became clear that the cloud-based IDE, and Codenvy, in particular, do not set a goal for themselves - to replace the desktop. How not cool, and the local environment and closer and clearer. However, the ability to create a development environment in the browser, and the effective “sharing” of projects + runtime can make life easier in certain circumstances. For example, languid instructions starting with “install Java, Maven, m2 plugin and a dozen more tools” can be replaced with one button or link, and the user does not need to download half of the Internet to try out the framework or new library in action. From the latest examples - Arquillian testing framework . Pay attention to the number of instructions in Getting Started by reference. But the same thing, but in the Codenvy factory (open in a new tab):
Instead of an epilogue
Laba by 'pluses' needed to be done. Install all was lazy. Zouzal Codenvy . This is a comment from one of the users.
Creating a development environment in the browser
So, the Docker is likely to change the face of the technological world. Rather, he already changes it. All more or less active companies have already posted their docker images in which their products are launched. Neither the environment settings, nor the setting of environment variables ... I downloaded the image, mounted local resources, if necessary (the project’s “sorts”, local repository, etc.), and you don’t know grief.
')
The market leader for conventional IDE went a little further in using Docker. The company has set itself 2 conditions:
- no downloads, installations or attendant troubles
- the user is not limited by the process of “building” the image of the development environment
In other words, to create a development environment, you just need a browser and an account in Codenvy. In order of everything.
Earlier, we already wrote about cloud IDE, their advantages and disadvantages. One of the main drawbacks was the impossibility of “customizing” the environment. In other words, the user does not have access to the environment where his project is built and run. This flaw was taken into account.
What does the Codenvy user get? It gets access to the runner instance on which the Docker is installed. Of course, this access is limited to several Docker commands that are executed not explicitly, but through buttons and menus of the web interface. The user can independently write a Dockerfile and click the Run button. In fact, 2 commands will be executed - docker build , and after successful image creation - docker run . Of course, with a set of parameters.
Of course, pre-runners are also offered - there are more than 20 of them. But, if for some reason, the defot runner is not suitable, there is more than 1 solution:
- “Expand” the existing environment. In other words, inherit the base image.
- create your own environment from scratch. DockerHub offers thousands of images, including official ones
As a result, the user receives a CodeMirror editor with all the relevant functionality (syntax highlighting, code folding, search, multi-cursor, automatic replacement), Git version control system, GitHub integration (using oAuth. For other git hosting providers, a manual SSH connection is used) plugin for convenient connection to databases and work with them (SQL editor with autocomplete and syntax highlighting).
In the image you can add both the “sorts” of the project, and “build artifacts”, jar, war, apk etc. A project build can occur both natively on a separate instance (currently supported by Maven and Ant), and directly in runtime - in this case there are no restrictions on using the build system - Grails, Gradle, Leiningen - all this is installed on Linux without any problems axis (lightweight Debian Jessie recommended). So, for example, to install Maven in your Codenvy environment, you need to perform some simple actions, not unlike local experience:
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 Any other build tool is configured in the same way - download, unpack, set environment variables and write them to .bashrc. Of course, you can use ready-made images with DockerHub, where all this stuff is already pre-installed.
As for adding source code and artifacts to the environment, here the Codenvy developers offer 2 variables, which are used differently for “sorts” and for “build artifacts”.
To add source code for script projects (PHP, Python, AngularJS) use the standard Docker ADD instruction with Codenvy variable:
ADD $app$ /destination/path/in/your/image/ In fact, the archive with all the files of the application is downloaded and unpacked into the specified directory.
The same instruction for the Maven or Ant project will pick up the build artifact, which will then be executed or “deployed”, for example in Tomcat:
ADD $app$ /home/user/tomcat7/webapps/ROOT.war And if you need to take Java project sources and build it in runtime, use:
ADD $app_src$ /destination/path/in/your/image In case of using the pre-installed runtime or inheriting Codenvy images, SSH access to the running container is offered. For example, as an CMD command, you can write an infinite loop:
CMD white true; do true; done and execute commands by hand in the Terminal tab.
Shellinabox is used as the SSH terminal, however, the user has the right to use “something of his own” - iframe in the Terminal tab listens to port 4200. EXPOSE ports works the same as in the local build of the image. There is only one condition, if you open a port, the “client” needs to know where to get the terminal URL and applications. Special variables are used for this:
For terminal:
ENV CODENVY_WEB_SHELL_PORT <port> For application:
ENV CODENVY_APP_PORT_<port>_HTTP <port> For example, if your Tomcat is running on a standard port 8080, then the variable and its value will look like this:
ENV CODENVY_APP_PORT_8080_HTTP 8080 Here are all the “rules” of using Docker at Codenvy. Everything else depends on the resources available and the user's fantasy. We imported the project, created the development environment, added the source code, collected and launched the project - all in the browser. Of interest is the use of VNC to launch desktop and mobile applications (for example, Android emulator), as well as live-reload for scripting languages ​​(in the preinstalled environment, the project source code directory is mounted into an image, which allows you to catch changes without needing to restart the application - everything is as and locally on the desktop).
'Sharing' development environment
Probably many of you are faced with a situation where a colleague needs to run your project on your machine. Or not to a colleague, but to a client. Acceptance or dev-server, say, not suitable for some reason. With the project, everything is OK, the application works like a clock, only the environment is not simple. And the client’s Docker on a Windows laptop is not installed, and you only need Debian with Node, npm, nvm, grunt, gulp, bower and some other Ruby gems. Yes, there is a "dock". But it seems that you didn’t update it for quite a while, and it seemed like the last time you had to dance a little with a tambourine, otherwise the project didn’t start. Of course, this is not a typical situation, but it happens. And after a half-day of torment, a colleague or client says - "Does not work." Well, and you, as a real programmer, say “Well, I don’t know. It works for me. ”
How to solve this problem, or trying to solve it in Codenvy? The chip is called Factories. In an open project, a user generates a URL with a hash code in which dozens of parameters are encrypted concerning the project itself, its environment, IDE behavior ... A specially trained API receives a POST request with these parameters and issues a URL, for example https://codenvy.com/ f? id = djbxklig6ihr3cgn (open in a new tab).
Clicking on the link, we see that a temporary workspace is created, where the source code of the project is being cloned. By clicking on the Run button, we collect and launch the Docker image. The instructions include a build using Grails and war on Tomcat. Each time you click on a URL, a new temporary workspace is created. Thus, the link is one - and identical environments at least a hundred. In this case, the user can edit the source code, make changes and rebuild / restart the application. After some time, such a single development workshop dies, and the phrase “I don’t know, it works for me” is not necessary in principle.
The URL is generated directly in the UI, but there is also an advanced method using the CLI or API, and JSON with a set of parameters in which you can specify the RAM required for the application to “take off”, the environment in which the project should be launched, the registration of the source code (Git URL with GitHub, for example), actions after creating a temporary workspace (opening a README file, for example), restricting access, replacing text and variables.
One more example. Node.js application that works with MongoDB https://github.com/andzdroid/mongo-express . To run locally, you need to install a lot of things. Or use the “factory”, start the application in temporary workspace, start Mongo as a daemon and start the Node application itself (open in a new tab):
Pros:
- no need to install docker
- no need to download the image (once “pulling off the image”, it remains in the Docker cache on the runner instance)
- launch in 2 clicks - the URL itself and the Codenvy Run button
Minuses. Of course, they are easy to find. Well, keep up the cloud IDE with IntelliJ and Eclipse. Editor features are limited. By the way, Codenvy can be used in conjunction with the above IDE. For Eclipse there is a special plugin with which you can import projects from Codenvy into Eclipse, edit in your favorite IDE, and collect and run projects in the cloud. In principle, you can use any IDE in conjunction with the Codenvy CLI - source code synchronization, remote build and launch of projects - all this is offered in the Codenvy CLI.
At the moment, if the application build is running in Docker, then the “client”, and specifically, the Java editor does not know anything about it. Hence the code autocompletion and false errors. Code Writing Assistant is also missing for all languages ​​except Java. The problem, according to the developers themselves, will be solved, since the builders will also be transferred to Docker in the near future.
Code navigation and file synchronization between the project and the runner are also in the near future. In short, there is enough work.
And finally, some Factories (open in new tabs)
Android File Manager compiled by Gradle and running in the default Android emulator (see instructions in the WELCOME file):
Java GAE application launched with Java GAE SDK. Going to the Terminal tab, you can “plug” the application on GAE (instructions in the WELCOME file, do not forget to specify your application ID in appengine-web.xml). By the way, full integration with GAE on the way.
AngularJS project :
Instead of conclusions
Well, with Docker’s frantic progress, it became clear that the cloud-based IDE, and Codenvy, in particular, do not set a goal for themselves - to replace the desktop. How not cool, and the local environment and closer and clearer. However, the ability to create a development environment in the browser, and the effective “sharing” of projects + runtime can make life easier in certain circumstances. For example, languid instructions starting with “install Java, Maven, m2 plugin and a dozen more tools” can be replaced with one button or link, and the user does not need to download half of the Internet to try out the framework or new library in action. From the latest examples - Arquillian testing framework . Pay attention to the number of instructions in Getting Started by reference. But the same thing, but in the Codenvy factory (open in a new tab):
Instead of an epilogue
Laba by 'pluses' needed to be done. Install all was lazy. Zouzal Codenvy . This is a comment from one of the users.
Source: https://habr.com/ru/post/243953/
All Articles