What I want to share in this article is how to use docker to build a node development environment, so that the front-end students away from the local node, let his beloved partners do their own clean.

Why build a node development environment? The title of the article is about building an angular development environment. Is it out of the question?

No, no, no, No. The angular development environment mentioned in the title is actually the node development environment. It is named the angular development environment because the demonstration example is built with angular. Of course, front-end students can also use this article example to build vue, react project.

The purpose of building this node environment is to fulfill a small promise made yesterday, build an angular development environment to demonstrate to our front-end classmates, let her successfully embark on the docker train.

Yesterday, after work, I have been thinking about a question: how to design, in order to let front-end students use the docker environment development, the simplest operation?

Several issues need to be considered:
1. node and angular environments are all in docker, so how can you synchronize the project in the container to the local one if you want to generate a project?
2. After changing a configuration, you need to restart the angular application to reload, so how is it the easiest to operate? That is, no front-end classmates need to enter the container, ctrl+c exit the application, and restart the application

The following is the result of my thinking:
1. After checking the data, there is really no effective and feasible way to synchronize the items in the container to the local environment in real time. docker cp can be implemented, but it is not feasible to execute commands manually. Then you can only consider directory mounting again. In general, we need to hang the directory of the local environment in the container, so that any local modifications can be synchronized to the container in real time. So the reverse is not the same? Create an angular project in the container mounted directory so that the project can be saved locally synchronously. When the content is modified locally, the project in the container is updated in real time. Even if the container is deleted, the project file is still saved locally. This is a good solution to the problem.
2. To reload the configuration problem, the operation will be around. The simpler way is to enter the container, kill the process, and restart the application. A more circumventive approach is to create a container, enter the container to create a project, exit the container and delete it, then create a new container, mount a script, so that each time the container starts, it will enter the project directory to restart the application, so that every time the configuration is changed, Only docker restart is needed to reload the configuration.

Following is the docker file for the example in this article:

FROM centos:7.4.1708

RUN curl –sL https://rpm.nodesource.com/setup_10.x | bash \
    && yum install -y --nogpgcheck nodejs \
    && yum install -y --nogpgcheck git \
    && node -v

RUN git config --global user.email "940840746@qq.com"
RUN git config --global user.name "fyf2173"

# install angular cli 
RUN npm install -g @angular/cli

# timezone
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

# create a ng-test project to enable container run foreground all the way
RUN ng new ng-test --defaults --routing --style="less"

RUN echo "#!/bin/bash" >> /run.sh
RUN echo "cd /ng-test/" >> /run.sh
RUN echo "ng serve --host 0.0.0.0 --port 80" >> /run.sh

RUN chmod +x /run.sh

WORKDIR /opt/

CMD ["/run.sh"]

Operational steps for Problem 2:

• Go to the directory where the dockerfile is located and build the docker image
• After building the image, while creating a new container, mount the working directory into the container and enter the container
• Create projects in mounted directories, exit and delete containers
• Create the container again and mount the written shell script
• After modifying the configuration, restart the container

The order is as follows:

# Constructing ng:dev Mirror
docker build -t ng:dev .

# Create a container and name it ng-dev
# - p Specifies multiple port mappings to prepare for subsequent projects
# Port 80 is allocated to the test project. After the container starts, you can view the angular project under test at localhost:5020.
# - rm specifies that the container will be deleted when it exits
# / After the bin/bash specified container starts up, enter the container immediately and execute the bash script
# - v mounts the project directory in the current directory to the / opt directory in the container. The projects generated by opt are synchronized to the project directory in real time. 
docker rum -t -i --rm --name ng-dev -p 5020:80 -p 5021:8080 -p 5022:8081 -v $PWD/project:/opt ng:dev /bin/bash

# Enter the opt directory, create a new prs-ng angular project, and exit the container after the completion of the new project
cd /opt/
ng new prs-ng --defaults --routing --style="less"
exit

New run.sh file, as follows:

#!/bin/bash

cd /opt/prs-ng/
ng serve --host 0.0.0.0 --port 8080

Create the container again and mount the run.sh script

# Create containers and run in the background
docker rum -t -i -d --name ng-dev -p 5020:80 -p 5021:8080 -p 5022:8081 -v $PWD/project:/opt -v $PWD/run.sh:/run.sh ng:dev

Visit localhost:5021 in the browser to access the project home page, as follows: