Overview
Docker environments are a great, easy and portable way to work and develop. If you agree with me keep on reading :)
This article is based in my angular2 webpack starter: https://github.com/alber999/angular2-webpack-starter
Instead raw docker, I prefer to automate common tasks by creating a docker runner script. This is the way I work to setup custom docker containers. Use this as an inspiration to create your own dockerizations.
Important: You need a bash shell to run docker runner. Tested on linux and macos.
Change your mind, change your workflow
Instead of installing, configuring and deploying your application and its dependencies in your machine, make your life easier...
Pros
- You don't have to install anything in your machine but docker and git to get sources repository
- Save time. Clone sources repository and deploy development environment just using very short commands
- Within this environment you can deploy, debug, run, test and manage git repository
- This environment is created, used and maintained by the application developer... it works for sure :)
Cons
- Now you have time to think about coding, can't be that bad! :)
Features
- Common docker tasks at ease
- Docker version verification
- Custom bashrc and gitconfig files from remote repository
- Github keys added to let you operate with git within docker machine
- Host application domain check
- Application auto-start and logs
- Docker ssh session auto-start
Install docker
Follow instructions for your environment: https://docs.docker.com/
Previous configuration
Create host in your machine
You must add new entry in /etc/hosts
127.0.0.1 docker.savethecode.angular2
Create personal environment repository
If you want to customize your docker environment, you can do it creating a personal environment repository on GitHub.
Sample: https://github.com/alber999/environment
As you can see in sample repository above, this repository must contain following files that will be integrated in docker environment:
- .bashrc
- .gitconfig
The other files are ignored by docker container, it's up to you what else to have in your environment repository. Then, you just have to edit docker.sh and update variable REPOSITORY_ENVIRONMENT. Sample:
REPOSITORY_ENVIRONMENT=git@github.com:alber999/environment.git
Run docker runner
I like to have sources in host machine to edit with my favorite editor. Then, share your local source code as a volume in docker.
Clone angular2 webpack starter repository:
git clone git@github.com:alber999/angular2-webpack-starter.git
Just run docker runner with no arguments to see available options:
cd angular2-webpack-starter
./docker.sh
Start docker container
cd angular2-webpack-starter
./docker.sh start
Application is compiled and launched whenever container is started. To see what is happening you can run following commands in docker container:
- log: alias for tail -f /var/log/savethecode/angular2.log
- logc: colored log: alias for grc tail -f /var/log/savethecode/angular2.log
These alias are added by docker.sh to .bashrc in container when starting.
Open in browser http://docker.savethecode.angular2:8080
Open container session
If you exit container session, you can open it again:
cd angular2-webpack-starter
./docker.sh bash
Relaunch angular2 application
In docker container...
ps aux
kill -9 <angular2-webpack-starter_webpack-dev-server__PIDs>
cd /src/savethecode/
npm start
Or exit docker container and run ./docker.sh start again
Run angular2 tests
Run following commands within docker container. Jasmine tests running on Karma
cd angular2-webpack-starter
npm test
Run tests with coverage (karma coverage and istanbul instrumenter)
cd angular2-webpack-starter
npm run test:coverage
Coverage reports are written in coverage
directory
Build angular2 sources for production
Built sources will be included in a host application
cd angular2-webpack-starter
npm run build
dist
directory contains compressed sources ready for production
Sources
https://github.com/alber999/angular2-webpack-starter
Dockerfile
https://github.com/alber999/angular2-webpack-starter/blob/master/Dockerfile
FROM node:boron
MAINTAINER Alberto Galiana
ENV DEBIAN_FRONTEND noninteractive
ENV PHANTOMJS_BIN "/usr/local/bin/phantomjs"
RUN apt-get -y update --fix-missing
RUN apt-get -y install vim nano curl net-tools htop bash-completion grc git
RUN npm i -g phantomjs-prebuilt gulp
RUN apt-get clean
COPY /tmp/github_rsa /root/.ssh/
COPY /tmp/github_rsa.pub /root/.ssh/
COPY /tmp/.gitconfig /root/
COPY /tmp/.bashrc /root/
COPY /docker_entrypoint.sh /
RUN chmod +x /docker_entrypoint.sh
ENTRYPOINT ["/docker_entrypoint.sh"]
WORKDIR /src/savethecode
VOLUME ["/src/savethecode"]
EXPOSE 8080
One common problem when host and guest run different platforms are the phantom binaries, specific for each platform. You can see in Dockerfile above how phantomjs is installed globally to avoid errors (lines 5 and 9)
Entrypoint
https://github.com/alber999/angular2-webpack-starter/blob/master/docker_entrypoint.sh
#!/bin/bash
##################################################
# CONFIGURATION
##################################################
LOG_DEST_PATH=/var/log/savethecode
LOG_DEST_FILE=$LOG_DEST_PATH/angular2.log
##################################################
# DEPLOY APPLICATION
##################################################
mkdir -p $LOG_DEST_PATH
echo "Starting SaveTheCode angular2 webpack starter... be patient :)" >> $LOG_DEST_FILE
npm i >> $LOG_DEST_FILE
npm start >> $LOG_DEST_FILE
# keep running
tail -f /dev/null