pixelpiloten "articles and tutorials into all things Docker containers, Kubernetes,
CI/CD and automating infrastructure"
Go back to blogposts
Wednesday, 4 September 2019

Probably a stupid IDE(A)

Probably a stupid IDE(A)

I thought I would take a small break from the Kubernetes articles and focus a bit on local development with Docker and specificly how you can work completely inside Docker containers, even using a IDE inside a Docker container. GASP! :O

Now this is just a proof of concept, and not even I am convinced that it is such a good idea but I want to demonstrate the power of containers and this is a example of what you can do.

The setup

In my previous life I used to do alot of Drupal based development and I thought I could use Drupal as our software we want to work on. This is possible using 3 docker containers and actually using Docker from the host machine inside the coder container (so docker inside docker), the setup look like this:

Docker containers

  • Apache container
    • PHP 7.2
    • Composer
    • Drush
  • MariaDB container
    • Minor custom settings for Drupal optimization
  • Coder container

Docker volume

…and a Docker volume, this is to have the same speed on Linux, MacOS and Windows. On MacOS and Windows Docker runs in a virtual machine and you need to mount a folder inside the docker containers INSIDE the virtual machine which causes a reaaaal slow down in performance, specificly when using Drupal.

WARNING! If you remove the volume you remove your code!

Requirements

  • Git
  • Docker
  • Docker compose

Step 1 - Start the environment.

  1. Clone this repository somewhere to your hardrive.

     $ git clone git@github.com:pixelpiloten/coder_drupal.git myfolder
    
  2. Start the environment.

     $ docker-compose up --build --force-recreate -d
    

Step 2 - Install drupal.

  1. Open Microsoft Visual studio code in the browser using this url.

    http://127.0.0.1:8443

  2. Click on View in the menu and choose Terminal to open the terminal.

  3. Download Drupal using Composer to the current directory (this will actually exec composer in the apache container).

     $ composer create-project drupal-composer/drupal-project:8.x-dev . --no-interaction
    
  4. OPTIONAL: If you get an error about ...requires behat/mink-selenium2-driver 1.3.x-dev -> no matching package found then add this to the composer.json file under require.

    "behat/mink-selenium2-driver": "dev-master as 1.3.x-dev"

  5. OPTIONAL: Run composer to update your packages if you got the above error.

     $ commposer update
    
  6. Install Drupal with Drush.

     $ drush si --db-url=mysql://root:password@mariadb/drupal --site-name=MySite
    
  7. Create a one time login link to login to Drupal admin.

     $ drush uli
    

Tadaa!

So, a development environment including a IDE in browser, who could have thought this was possible? This is possible because Microsoft Visual Studio Code is actually built on web technologies and when you use it on your desktop its basicly running inside a web browser environment…and a bit of docker in docker magic ;)

The commands

All the commands we ran in the terminal in the tutorial were actually running docker exec commands in the coder container, but the execution of those commands where in the apache container.

The composer and drush commands are actually just bash aliases that you can find in the .docker/coder/config/zshrc_aliases file, now this is very basic and not the most intuitive way but this is a proof of concept so just add what you want and rebuild the containers.

alias php="docker exec -u 1000:1000 -t drupal_apache php"
alias composer="docker exec -u 1000:1000 -t drupal_apache composer"
alias drush="docker exec -u 1000:1000 -it drupal_apache drush --root /home/coder/project/code-server/web --uri 127.0.0.1:8080"