Once upon a time in

At that time, there were only two front-end team members and no packaging tools were used. We reconstructed the front-end development process, introduced VUE as the basic development framework, and used FIS3 as the project packaging. Due to the rapid iteration of the project and the increase of public libraries, we introduced WebPack. Cooperate with NPM to split the basic library for convenient maintenance and management. It also brings a new problem: the complexity of the front-end development environment.

Remember a front end development, at that time a notepad can write HTML. Now as the complexity of the project increases, you need to install vscode, node, webpack and so on in order to develop, package and so on. We usually follow the following 4 steps to install the environment for new employees. Under the feeling

1: download node installation // Basic library NPM install yarn -g yarn global add NRM NRM use taobao yarn global add [email protected] yarn global add rmdir yarn global add cross-env yarn global add rimraf cooking import autoprefixer cooking import less cooking The import lint cooking import vue cooking import vue2 / upload/internal packaging publishing tools NRM add _131 NRM use _131 at http://xxx.xxx.xxx.xxx:4873 Yarn global add YMm_build // Old fis3 project dependency package YARN global add [email protected] yarn global add [email protected] yarn global Add [email protected] yarn global add [email protected] yarn global add [email protected] 2:cloneItem code 3:yarn install Installation project dependency 4: NPM run dev Runs the development projectCopy the code

The team was small at first. The pace of new recruits is also slow. Helping new employees come in and set up the environment also facilitates communication, and everything feels good. This went on for more than a year.

With more and more people, the team grew faster and faster, each new entry of the students have to let the old driver with a wanke, the original happy things many times also numb, fatal and come in the installation environment time is not the same. As a result, some global toolkits have minor version differences. This in the new employees sometimes encounter some puzzling problems, and finally check down a lot of the environment is not unified. This just began to take seriously slowly. Previously, NPM had no locking versioning mechanism. In particular, there are global libraries that everyone has their own, as well as packaging machines for online environments. There are times when development is good, but when it’s packaged and released online, things don’t work out as expected. It hurts a lot more.

Think about how you can unify the front-end team’s development environment. Let’s get the dry stuff

use

Docker introduction

Docker is an open source application container engine that allows developers to package their applications and dependencies into a portable container that can be published on any popular Linux machine. It can also be virtualized. Containers are completely sandboxed, with no interfaces to each other

  1. DockerClient client
  2. Docker Daemon Daemon
  3. Docker Image mirror
  4. DockerContainer container

The above four parts are used in one command, and this command is the one we will use most frequently.

docker run -v "$(PWD)":/data -p 8000:8000  harbor.ymmoa.com/h5/ymmbaseup npm run dev
Copy the code

Sent via dockerclient run commands to dockerDaemon dockerDaemon through harbor.ymmoa.com/h5/ymmbaseup image creates a container to run NPM run dev’s order. The container exposes port 8000 and associates $(PWD)(the local directory) to the /data directory in the container

This time, you can simply understand docker as it can package the dependency packages installed by Linux + Node + NPM into an image, and then other computers can quickly download this image to use after installing Docker. How to use docker will be described later. Even simpler, you could use your docker image package as an app that every computer can download and run. So understand first, if think what I say is not clear enough can look for Baidu.

Docker installation

It is recommended to use ali cloud do speed up https://dev.aliyun.com/search.html

Docker makes an image

Create a Dockerfile file.
Create a new directory and create the Dockerfile file in it. The followingCopy the code
To specify what is the base of the image, we chose node: 8.9.3 as the base image
FROM node:8.9.3

MAINTAINER stoneship stoneship <[email protected]>

## Install dependencies for node
RUN \
npm install yarn -g \
yarn global add nrm && \
nrm use taobao &&\
yarn global add vue-cli &&\
yarn global add cross-env

Install nginx # #

## Install database...

Create a directory
RUN mkdir /data
## Specifies the directory where the command will run
WORKDIR /data
Copy the code

In particular, each run instruction executes on the current base image and commits the new image. If the command is long, use a slash (/) to wrap the line. In this demo we have packaged some of the tools for node dependencies. You can add your own run commands to your environment.

Build the mirror

Run the following build command in the Dockerfile directory, with the -t argument specifying the name of the image to be created

docker build -t dockerdemo .
Copy the code

After the build is successful, run the following command to query your image list

docker images
Copy the code

Uploading to the server

At this point the packaged image is only on your computer. The easiest way to upload your image to the server is if you need someone else to use it. Use the following command to upload

docker push  dockerdemo:latest
Copy the code
Use and package the image

We packed vue-cli in the DockerDemo image. Now we try to create a project using vue-cli in the DeckerDemo image. Note that some networks are slow. Downloading a template project through vue init webpack-simple my-project may fail. This is just a demonstration of how to run the commands using Docker. You can try running other commands.

docker run -v "$(PWD)":/data dockerdemo vue init webpack-simple my-project
Copy the code

This command shows that Docker has created a container using the DockerDemo image, associated the current directory with the container’s /data directory, and run the vue init webpack-simple my-project command in that directory. You can also run other commands.

Retrofit existing projects for adaptation

After having a unified environment image of my own project and knowing how to run commands with Docker, the original project development package was run by NPM. It can now be run via Docker. Under the command into the

docker run -v "$(PWD)":/data dockerdemo npm run dev
docker run -v "$(PWD)":/data dockerdemo npm run dist 
....
Copy the code

These commands can be combined with makefiles or.bat files. Now the Yunmanman front-end project has made some changes to the makefile. For reference, see the following

Now the packaging command of our project has changed from the original NPM run build_dist to make build_dist(makefile.bat build_dist on win). The simple change is to change another Docker container for packaging, and the environment is unified. The environment structure through Docker is shown in the figure below. You can feel it

conclusion

After using Docker to build a unified front-end development environment, the steps for new people to install the environment will become the following three steps, and there will be no problems with different versions of the development environment. Feel it.

  1. Install the docker
  2. Clone code to install project dependencies
  3. Then run the project directly through the Docker container or package the project

Author: Wang Kunming