Quickly configure the front-end development environment with Docker

[Editor's note] recently in the company practiced a bit Docker, recorded into an article, sent to communicate with everyone. I am basically a Docker novice, if there is no place to tell you that ~ the current program is still relatively rough, we have any suggestions to improve please tell me, I and more people to learn
Today is your first day of entry.

You got up early, wash your face with your material.

Signed a contract, took the machine, sit in the station, soak a cup of black tea, press the boot button, enter the password,

Then, download Chrome, Postman, Sublime, pirated PS, NodeJS, configure NODE_PATH, install cnpm, install gulp, install webpack, install browserify, install LessSassStylus, install JadeCoffeePostCSS, install BabelExpressKoa, install gitpm2forever …

There are ten thousand plugins here.

If it is smooth this time you should have been ready to get off work, of course, usually not smooth.

In this process, you may encounter network problems Environmental issues Compatibility issues Permissions Problem Configuration Problem Configuration Problem Configuration Problem Configuration Problem Configuration Problem Configuration Problem Configuration Problem.

New Weekly Weekly:

  • Work this week: configure the environment, familiar with the project

Big company solution

"Development machine" .

Big company's thinking is very simple: Since you engage in such trouble, then I help you do a good job, give you an account, directly log on to develop.

Really no problems, but this program must solve three problems:

  1. How to preview the page in the machine
  2. How to edit the file locally
  3. How to access the development machine in the external network

There are many solutions, here only say one: Nginx + Samba + VPN.

Nginx can solve the first problem. Each account assigned an account, each account corresponds to a domain name, Nginx will resolve the domain name to the corresponding user directory, so that the development of their own computer can use the domain name preview page (need to configure the host). For example, my account is liangjie, the project's domain name is www.wisdomtmt.com , then I visit liangjie.wisdomtmt.com can preview the development of liangjie account under the project.

Samba can solve the second problem. You can understand it as a "shared folder" in Windows. In the development machine configuration Samba, and then in their own machines connected to the development machine, the shared folder to the editor can write code.

VPN can solve the third problem. Large companies in addition to dedicated software, but also supporting the use of hardware to improve the safety factor. VPN hardware similar to the U shield, the above shows a bunch of dynamic digital password, regular refresh, each time outside the network login VPN need additional dynamic password.

This will solve the problem, the developer can write code in their own machines, and then in the browser directly preview, encounter unexpected circumstances can also be outside the network log developer repair.

Roughly, this program has no technical problems. But for small and medium companies, to build a complete set of development environment, standardize the development process, standardize the VPN use process, the company cut to the development machine, this set down the time and labor costs are not low. Generally speaking, only big companies can afford to play.

What about that small company? Do every new employee have to waste time configuring the environment?

of course not.

Come out, Docker!

Protagonist debut.

What is Docker? I am not a Docker expert, so I do not do a professional introduction to Docker here. If you do not know what Docker is, see it as a virtual machine.

Before introducing Docker, I did some research on it, mainly to figure out the following questions:

  1. Can Docker cross platform? (After all, you can not ask the company to all with Mac)
  2. How do I preview a page in Docker?
  3. How do I edit files in Docker?
  4. Can Docker implement multiple configurations at once?

Since Docker runs on everyone's machine, there is no external network access problem.

After research, the above theory can be resolved in theory, the following is a preliminary solution to determine:

  1. Use the Kitematic client to run Docker across platforms
  2. Preview the page in Docker with port mapping
  3. Use the Samba + port mapping to edit the files in the Docker
  4. Configure a generic Image (mirror)

There are several concepts that need to be explained.

First of all, Kitematic is a Docker GUI, with it you do not have to deal with the command line, will be a lot easier.

Second, the three most important concepts of Docker are Container, Image, and Volume.

Image is static, and if you want to run an Image, you need a Container. It's important to note that the changes made in Container are not saved to Image . For example, you run up an Ubuntu Image, and then touch wisdomtmt create a new file, this time if the direct restart Container, the file is gone. How do you save the changes? Very simple, the implementation of docker commit ContainerID TAG can. Here commit and git commit similar to the implementation of the current state will be saved as a new Image.

Some students have to ask, if you have to make changes every time to commit, I write the code to it is not very convenient? Do you want to restart Docker in half

This is really a problem, Docker also has a corresponding solution: the use of Volume.

Simply put, Volume is dedicated to store the data folder, start Image can mount one or more Volume, Volume data independent of Image, restart will not be lost. We create a Volume, mount a directory to the system, and then put the code into it.

Finally, port mapping. As mentioned earlier, Docker can be seen as a virtual machine, all your files are inside. If you run a server in the Container, listen to , from your own machine directly visit is not enough, because the Container and your machine is two different environments.

then what should we do? Let's start with a familiar question.

Daily development, we often need to allow colleagues to preview the effect of the page, commonly used method is to listen to http://你的机器IP:8000 , and then let colleagues connect to the same LAN, visit http://你的机器IP:8000 can.

Container problems are very similar, but we ourselves become "colleagues", need to visit the Docker internal pages. It seems that as long as the container to get the IP problem solved.

Fortunately, Container does have IP.

Normally this IP is and can only be accessed from the Container's host (that is, the machine that is running Docker). However, the situation of some special Container, it is only associated with the IP, there is no associated port. So if you want to access the port inside the Container (such as 8000), you need to manually configure the port mapping, the port of the container mapping to IP.

Well, boring concept finished, can not understand do not have to worry, follow the next chapter to go through the process to understand.


Before the official start, first look at what we have to do.

Objectives: Configure a generic image, support the preview page, support Samba shared files, preloaded during the development process may be used in the package.


  1. Download and install Docker Toolbox
  2. Download and run Ubuntu image
  3. Do regular initialization work (source, installation of commonly used tools)
  4. Install front-end development tools
  5. Install and configure Samba
  6. Configure port mapping
  7. Export mirroring

Let's rock!

1. Download and install the Docker Toolbox

Docker Toolbox is Docker official development of the Docker package, which has a full set of Docker environment, there are graphical tools Kitematic, direct download and install can be.

Docker Toolbox support Windows and Mac OS, you can go to the official website to download and install (this step if there is no VPN will be more time-consuming, it is best to download the two platforms are downloaded, and then directly copied to colleagues to install).

Linux environment configuration can refer to this: Installation on Ubuntu .

The following to Mac OS, for example, Windows operating methods similar.

After installation, open Kitematic, register a Docker Hub account, easy after the operation.

2. Download and run the Ubuntu image

Docker Hub has a ready-made Ubuntu image, in the Kitematic click on the upper left corner of the "NEW", search Ubuntu, select the second row can be the first.
This Ubuntu image is super Lite, only a hundred trillion, but the domestic network is still very painful to download. No way, wait, anyway, only need to download once.

After the download is complete, select ubuntu in the Container list on the left side of Kitematic and click on the "START" button above. Click "EXEC" can enter the system command line, enter su open root privileges. This process is no longer described below, collectively referred to as "open the Ubuntu command line."

Open the Ubuntu command line, try to execute a few orders to see the results, such as ls , cd / . After playing, click on "Kit" in the upper right corner of Kitematic and click on "Ports" and you will see an IP address, usually . Open the host (your own computer) command line, enter the ping , should be through.
So we are ready to Ubuntu mirror, you can start the configuration.

3. Regular initialization work

What is the first thing to do with Ubuntu? Yes, for the source.

"Source" is actually the URL, you use Ubuntu in apt-get install install the software is from the "source" download. Ubuntu default source in foreign countries, installed very slowly, so first replaced by the domestic source.

There are many domestic Ubuntu source, I use the source in the Division.

You can directly see the official source tutorial , you can also directly open the Ubuntu command line (if you forget how to do, see the previous section), the implementation of the following order:

  Sed -i 's / archive.ubuntu.com / mirrors.ustc.edu.cn / g' /etc/apt/sources.list 
Apt-get update

After the source is completed, after apt-get will download the software from the source.

As mentioned earlier, this Ubuntu Image is a super compact version, many unimportant tools have been deleted, including the commonly used vim, curl, ipconfig, ping. In addition, Linux is the most commonly used TAB fill path is not, so the following first install the necessary editor and path completion:

  Apt-get install vim bash-completion 

This completes the basic configuration, Ubuntu can be used normally.

4. Install front-end development tools

First install npm:

  Apt-get install npm 

And then install cnpm, after all npm operations are changed to cnpm, from Taobao source download, the speed will be much faster.

  Npm install -g cnpm --registry = https: //registry.npm.taobao.org 

Then install n, TJ big god NodeJS version management tool, you can install multiple versions, a key to switch. N need to use curl, so first install curl:

  Apt-get install curl 

Then install n:

  Cnpm install -g n 

Finally use n to install the current stable version of NodeJS:

  N stable 

This is ready for the front-end development needs of the basic tools.

Our project is currently using Vue, so I also installed vue-cli, browserify, gulp, babel and related libraries, you can install the corresponding library according to your project needs.

5. Install and configure Samba

Samba is a file sharing tool for editing files inside Docker in the host.

Here is a complete configuration tutorial , the following is my finishing super simple version.

First install Samba:

  Apt-get install samba 

Samba user system is more special, in simple terms, Samba users are really users of the system, but the Samba password and the system password is not the same. In other words, the same user in the system and Samba password need to set up alone, and did not get through.

Docker's Ubuntu Image user is root, we set the root password for the Samba:

  Smbpasswd -a root 

After setting up your password, you need to create a Samba configuration file, set up shared folders and permissions:

  Vim /etc/samba/smb.conf 

Here's an example of my configuration:

Path = / web
Available = yes
Valid users = root
Read only = no
Browsable = yes
Public = yes
Writable = yes

Which focuses on the path , specify the need to share the folder, where I share the /web directory, you can choose a different directory. My /web directory is a Volume, used to store code, restart Docker will not lose data. Volume configuration method described later.

After starting the configuration, restart the Samba service:

  Service smbd restart 
Service nmbd restart

This completes the configuration of Samba.

But now you can not connect to the shared folder from the host, because we have not configured the port mapping.

6. Configure the port mapping

First clear the need to map the port.

Samba needs to use the port: 137,138,139,445.

Daily development may use the port: 3000,3123 (hot-reload use), 8000,8080.

Then configure the port mapping.

Note: Windows Kitematic has a serious bug, change the Settings under any of the options will lead to all the configuration items are missing, the solution to see the next section

If you are a Mac system, you can configure it directly in Kitematic.
As shown in the figure, you can add a mapping directly to Settings -> Ports.

Here you have completed the Docker Image configuration, you can do some tests to see if the shared folder and port mapping work is normal.

Test one:

  1. Open the Ubuntu command line, casually cd to a directory (such as cd /web )
  2. Execute python -m SimpleHTTPServer to start a static server
  3. In the host visit , should be able to see /web directory all the documents

Test 2:

  1. If the Mac system, open the Finder, press ⌘ + K, enter smb:// , enter, enter the root and Samba password, should be able to see the shared folder (I set the /web )
  2. Double-click the shared folder, should be able to see in the Finder /web all the documents

This completes all the configuration of Docker Image, and the following is done: Export the mirror for other people to use.

7. Export the mirror

Do not forget the previous reminder: If you do not commit, after the restart all the changes will be lost!

So commit first. Click the "Bottom" in Kitematic "DOCKER CLI" to execute:

  Docker ps 

Will see the following output:

  ➜ ~ docker ps 
C5c131f108b1 numbbbbb / ubuntu-test "/ bin / bash" 15 hours ago Up 50 seconds>137-139/tcp,>445/tcp, > 3123 / tcp, 8000->8000/tcp,>8080/tcp,>49201/tcp dev

Copy the Container ID, I am here is c5c131f108b1 , and then execute:

  Docker commit c5c131f108b1 username / imagename 

Username replaced by your Docker Hub username, imagename replaced by your mirror name. I am here is numbbbbb / ubuntu-test.

After commit, you can export the current Container Image:

  Docker export c5c131f108b1 -o ubuntu 

After the implementation, in your personal directory (Mac is / Users / your username) can find Ubuntu file, this is our ultimate goal: one to complete all the configuration of the Image.

Slightly relieved, see below how the new colleague uses this image.

New people use the process

I sorted out the new staff entry process:

  1. Prepare the Docker Toolbox installation package and Ubuntu Image
  2. Install the Docker Toolbox
  3. Open Kitematic, register a Docker Hub account and login
  4. In the Kitematic click on the lower left corner "DOCKER CLI" to open the Docker command line
  5. Enter the command docker import , from the folder directly to the ubuntu file dragged to the command line (note ubuntu file path can not have Chinese, if any, first move the file to another pure English path folder)
  6. Enter the command docker images , copy the mirror IMAGE ID (similar to 54184b993d46 )
  7. Enter the command
      Docker run -t -i --privileged -p 137-139: 137-139 / tcp \ 
    -p 445: 445 / tcp -p 3000: 3000 / tcp -p 3123: 3123 / tcp \
    -p 8000: 8000 / tcp -p 8080: 8080 / tcp -d --name dev -v / web IMAGEID \
    / Bin / bash

    Replace the IMAGEID with the contents of the previous copy

  8. Back to Kitematic, should be able to see the left side of a container, this time the environment has been built

2016.08.04 Windows Kitematic bug, if you modify the settings in the interface will lead to volume loss, so do not modify any settings in Kitematic, if you want to change from the command line

As mentioned in the previous section, Windows Kitematic has a bug, manually add port mapping will lose all the configuration, so we directly add the order, as long as no configuration changes from Kitematic no problem.

Step 7 of the order there is an important content, is- -v /web . This will create and mount a Volume, mount the directory is /web , put the code into this directory, it will not restart the Docker because of the loss of data.

No silver bullet

Said a lot of advantages, the following to talk about the development environment with Docker shortcomings.

First of all, Docker itself is not mature enough.

Docker is really strong, can support the three major operating systems, performance far beyond the traditional virtual machine, but still not mature enough. Give a small example: Kitematic lost configuration bug on Windows at the end of last year was reported, until now did not solve.

Second, Docker system cost is not low.

Imagine, as a developer, before running the code must run Kitematic, start the Ubuntu mirror, connect the shared folder, enter the mirror to start the static server. This process is too heavy, the ideal development environment should be transparent, open the computer will be able to write code. Perhaps the next step can be considered in this regard to do some automated script to assist in the development.


Using Docker as a front-end development environment is really viable – our team is already in use – but the solution is far from perfect and needs to be optimized.

If you still do not know how to choose:

  • Some people have time to money, on the standard development machine, the major companies are so engaged, certainly no problem
  • Otherwise, you can try Docker, there is no deadly problem.

One more thing

Insert a job offer.

Chi Mei Sports Technology Co., Ltd., coordinates Shenzhen, start but not bad money.

No cat no dog no afternoon tea no drink no tall office <del> no elastic work system </ del> (boss said there is a flexible working system), what is it? There are Kaopu boss, there are reliable colleagues, rich. Believe me, cats and dogs snack elastic work can not help you finance, can not help you buy a house.

We are still in the front, you do not need to be Daniel, as long as the brain has the potential to bring up the flexibility on the line. Technology can not be learned, lack of experience can practice, mainly to see the potential.

If you believe my choice, can come and talk to me. My email: ljie@wisdomtmt.com .

about me

This part is the least important, so put it last.

If you really read it here, you must have some interest in this chatter guy.

I am Liang Jie, 90 after the career front, amateur iOS, amateur Python, translated too many books. If you want to know more information, you can visit the following links:

  • My blog , recently began to rebuild, the content is not much, but absolutely interesting
  • GitHub , maybe you'll find it, "Oh, it's you!"

    Heads up! This alert needs your attention, but it's not super important.