Small theater

Test: crotch you this page refresh blank screen ah, how ah, and you see this network, how these JS so big ah, very consumption of traffic and loading speed is very slow ah.

Me: Well, what the big guy said is that the page refresh screen is blank because there is no server configuration can not find the resource redirection, JS can use CDN or start gzip, this let the backend or operation and maintenance little sister match.

Back end: what, you say what, I can’t, words, last time that interface return null problem I still want to find you, why I return NULL not line, database is null ah, your front end do a judgment not good!

Me:… Do it! I’ll do it myself!

preface

I believe that most of the front and back ends are pretty harmonious. Generally speaking, the first thing programmers should do is to depress the product together (don’t hit me PM). It is recommended that we directly backhand a link to the back end of one thousand not null reasons, deep work and name.

It has been more than a year since I graduated in 2017. I am more and more proficient in front-end work. I have no major problems in daily business, and I have gained a lot of experience in front-end tools. Some time ago, I hand-wrote a Webpack 4.x with vue-loader scaffolding to replace the old scaffolding in the company’s project. The plug-in I wrote by myself is also running in the project with great joy, and can also lead the company’s new front end to learn more postures.

However, the total feeling is still missing something, I used to write PHP, for how the interface is not so curious, nothing more than to connect the database to write SQL, the biggest is to build a view query, using redis and the like, and further is the message queue MQTT combined with websocket application, What’s missing? Yes, server deployment. I’m curious about that!

At the beginning of my work, MY idea is to have a broad understanding of technology first, and then a deep understanding of technology. Ever also had to write the scaffold writing addiction, go home for a week to write code written to float (big bosses don’t ridicule me = = 3), all kinds of test run, the final out of the results of success in the online project a sense of accomplishment I can still remember, but during the encounter a lot of problems, a lot of problems in the field of other people is not even, Just because I know too little, so I’m limited by myself.

Imagine if you can master the whole process of the project from scratch, from the first line of code to the launch of the whole process, whether it is the front-end and back-end server, you can understand every detail, that and back-end theory, have a lot of confidence, right? = 3 =

This article can help anyone who is interested in Docker to have a basic understanding. Finally, there will be a simple practical application of Nginx server built based on VUe-CLI.

Environmental installation

The main system environment is Windows Win7 64-bit system, so it needs a Linux virtual machine, and for the purpose of installing force, will not use the desktop Linux system, all operations are completed in the command line.

The installationvirtualBox

VirtualBox is an open source virtual machine software, compared to VMware, it is smaller, open source and free, for the purpose of this article, is more than enough.

The first step is to install the virtualBox virtual machine, which belongs to the next step until dawn, but also attached installation instructions.

VirtualBox download address

VirtualBox Installation tutorial

The installationubuntu-server

Ubuntu is a Linux system. Remember the word Debian as a reminder at some point. In addition, as I know more about the server side, I found that the company is more used to build centos, but that’s ok, speaking of all Linux system, for users, it is the file directory or download tools are not quite the same.

Next, download the ubuntu-server image file. I used the 18.04.1 LTS version. In a few years if this article will be republished, please download the version you like.

Ubuntu – Server download address

Ubuntu Server installation tutorial

configuration

  • virtualBox
    • new
      • This is basically the next step to the dawn of the operation, it is worth mentioning is about the installationA 64 - bitOf the systemubuntuSome computers will find that the new time is notUbuntu 64Please refer to this article if you can.
        • Enable the BIOS virtualization technology
    • Set up the
      • storage
        • As shown above, click on that location to download yoursubuntu-serverImage load can be.
      • network
        • As shown in the preceding figure, the network environment of the VM can be set to another device in the same LAN by using the bridging NIC option, which facilitates the subsequent access to the vm network from the host.

The system is successfully loaded, and the system configuration starts

By default, you’ve already installed ubuntu in your virtual machine and successfully logged in. Before we get to Docker, it’s worth doing a few things about the walls of our environment. You know, this wall is that wall.

The default software for downloading and updating Ubuntu is APT, which is downloaded from a place where a large number of software is stored. As for where to download the software, the default software is as follows.

$ cat /etc/apt/sources.list
Copy the code

Reset the download source, and I have a copy here just in case. The sed directive replaces a specified string in one file with another. Note the vertical delimiter in the middle, which precedes the replaced string. We replace the address with the domestic source address.

$ sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
$ sudo sed -i 's|deb.debian.org|mirrors.ustc.edu.cn|g' /etc/apt/sources.list
$ sudo sed -i 's|security.debian.org|mirrors.ustc.edu.cn/debian-security|g' /etc/apt/sources.list
Copy the code

Update the source address of apt-get, which we will do frequently in the future.

$ sudo apt-get update
Copy the code

Install the package we need later, which includes the toolkit for HTTPS address resolution, etc.

$ sudo apt-get install apt-transport-https ca-certificates software-properties-common curl
Copy the code

In order to ensure that there is no residual docker software in the system, we need to remove the old version of Docker, although the new system generally does not have it.

$ sudo apt-get remove docker docker-engine docker.io
Copy the code

Add docker’s GPG key and add docker-CE’s software source, which tells APT where to download Docker-CE.

$ curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
Copy the code

Update the software package cache.

$ sudo apt-get update
Copy the code

Download the docker.

$ sudo apt-get install docker-ce
Copy the code

Set docker to start at boot time and start Docker.

$ sudo systemctl enable docker
$ sudo systemctl start docker
Copy the code

Add the current user to docker’s user group. You can use Docker without typing sudo.

$ sudo groupadd docker
$ sudo usermod -aG docker $USER
Copy the code

For ubuntu 16.04 +, we only need to change the file in /etc/docker-daemon. json. Note that you may need root permission to make changes to this file.

# use root permission
$ sudo -i
$ vim /etc/docker/daemon.json
# change daemon.json to the following
{"registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/"]}
Restart the Docker service
$ sudo systemctl restart docker
Remember to exit the current root environment
$ exit or ctrl + d
Copy the code

So far, the configuration of the early environment has been almost completed. We have replaced the source address of apt-get to download new software with the domestic address, and the source address of Docker-CE to download new images with the domestic address. Now let’s test a Docker.

Docker run runs an image file. If the image is not found locally, it will download and pull it from the image address. If you have added the current docker user to the docker group, restart the vm.

$ docker run hello-world
Copy the code

Since we will use git to pull vue-cli-base code on github later, we can install git in advance.

$ sudo apt-get install git
Configure username and email
$ git config –global user.name "Your username"
$ git config –global user.email "Your E-mail"
Copy the code

Then, since vue-CLI is used, nodeJs is naturally necessary, because we will use Webpack to pack, so I will install nodeJs. The official version of nodeJs I choose here is 8.x. X: setup_10.x: setup_10.x: setup_10.x

$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs
Copy the code

Download nodeJs, then naturally need to switch to nodeJs domestic source.

$ npm config set registry https://registry.npm.taobao.org
Copy the code

At this point, the preliminary preparation has come to an end, the next is to start the actual combat part.

dockerIn actual combat

Docker is what, I recently used in the Linux system after the use of the experience to briefly introduce. First, let’s explain some English words.

  • image
    • The mirror
    • It can be understood as a mirror of the operating system, but not all mirrors are operating systems.
  • container
    • The container
    • dockerAs it runs, a new container will be created, and the image will run inside the container.
  • registry
    • Image source; warehouse
      • Can be interpreted asdockerThe place to visit when the image needs to be pulled.

There are some special concepts, which can leave an impression. The images in Docker are layered. For example, the images in an operating system may have Git nodes installed respectively, and then add the basic images of the system. Git node docker, and then add the base image of the system, that Git node layer AB image can be shared.

docker nginxBasic operation

I believe that as a front-end, “nginx to do an anti-proxy is good”, this kind of words should see many too, actual combat we will directly use nginx as a main example, during the common docker syntax to explain.

First, let’s pull the nginx image file.

$ docker pull nginx
Copy the code

Create a test docker folder for easy management.

$ mkdir /home/$USER/docker-demo
$ cd /home/$USER/docker-demo
$ mkdir html
Copy the code

To create a new default display page for Nginx, our first step is to make this code run on the page.

$ cd html
$ echo "<html><h1>Hello World</h1></html>" > index.html
$ cd.Copy the code

Run the Docker, of course, before you run, you need to explain the parameters.

  • docker run
    • This will create a new container and run an image inside it.
  • -d
    • To run the container in the background, we usenginxIt must be something that is constantly running in the background, also known as a daemon.
  • -p
    • Map the exposed port of the container to the port of the host machine (that is, the virtual machine we spent half a day installing above).
    • Basically, access to the host8888Ports are like access containers80Same port.
  • --name
    • Give our new container a name.
  • -v
    • This is adockerThe special things in it,volumeThe colon is the path of the host and the container is the path of the container. This parameter can change the contents of the path of the hostsynchronousInto the container because/usr/share/nginx/htmlThis directory isnginxThe default external display directory, so we will just create the new directoryhtmlThe folder is synchronized to the default directory and we can access the page.
  • nginx
    • Here is the image file we need to create the container, if you didn’t do it abovedocker pullThe operation,dockerIt also automatically goes to the warehouse and pulls it over.
$ docker run -d -p 8888:80 --name my-first-nginx -v $PWD/html:/usr/share/nginx/html nginx
Copy the code

This will be the ID of your new container. All containers we create will have an ID that can be used as an identifier, but we don’t need to remember it. We can use Docker PS to query it later.

Check to see if our new container is working properly.

$ docker ps
Copy the code

If you see something like this, it means our container is working well. Verify that.

See the effect on the command line.

$ curl localhost:8888
Copy the code

See the following, that’s a success.

We need to know the IP address of our host computer before we do that. In the previous step, we changed the network to a bridge network card, so now our virtual machine is using another IP on the same LAN as the host.

Check the IP address assigned to the network interface and add an IPv4 filter parameter.

$ ip -4 a
Copy the code

Find the following, 192.168, this is the VM IP address.

Then, we just need to open the host and access 192.168.0.200:8888. Don’t forget the number of the upper end.

nginxThe practical application

We will find a vuE-CLI based Webpack scaffolding, and then still run in the nginx container application, there will be shell script writing, convenient operation and maintenance friends for project one-click update release. This is more applicable to our daily project release process.

In preparation we installed nodeJs, and I prepared a basic VUe-CLI project for packaging production projects.

Before we start, we need to stop the container that we just ran.

This is the command to stop the container
# Since nginx runs in the background, it must be stopped before it can be removed
# Remember the unique id of the container generated above, where you only need to enter the first few digits to stop the container
$ docker stop 5af87
Copy the code

Of course, light stop is not enough, for the psychological cleanliness, but also to remove the container, reduce the occupation of space.

$ bash rm 5af87
Copy the code

Next, create a new folder to demonstrate the upcoming project.

$ mkdir /home/$USER/docker-demo-two
$ cd /home/$USER/docker-demo-two
Copy the code

Copy projects from Github into this folder. This is an example generated based on the latest vue-CLI version. Of course, webPack 4.x is not officially used yet, but the demo is enough.

$ git clone https://github.com/jsjzh/vue-cli-base.git
Copy the code

After entering vue-CLI-base, it is the front-end base operation. Use the NPM package management tool to install the project dependency package. Since we are going to get the production environment code here, we directly execute the NPM run build to package the project.

$ cd vue-cli-base
$ npm install
$ npm run build
Copy the code

Once the project is packaged, check to see if any related files are generated.

$ cd dist
$ ls
Copy the code

See the following directory is no problem.

After the operation is complete, go to the newly created directory and mount the volume of the container.

$ cd /home/$USER/docker-demo-two
$ docker run -d -p 8889:80 -v $PWD/vue-cli-base/dist:/usr/share/nginx/html nginx
Copy the code

As usual, the command line will output the container ID, but we still need to check that nginx is running properly in the background.

$ docker ps
Copy the code

After viewing the container, open 192.168.0.200:8889 on the host to see the familiar VUE-CLI interface.

But that’s not the end of it. Don’t let the operation sister run the NPM every time. As a good developer brother, you should prepare a script for the little sister to use.

Note: Vim editor to edit the operation is I, after editing Esc –> 😡 can be.

$ cd /home/$USER/docker-demo-two
$ vim update-project.sh

# Script content
cd vue-base-cli
git pull
npm install
npm run build
Copy the code

Once saved, when the project needs to be updated later, you just need to run the script.

$ cd /home/$USER/docker-demo-two
$ /bin/bash update-project.sh
Copy the code

To see the effect, we tried to change the project content directly.

$ cd vue-cli-base/src
$ vim main.js

# Add the following
console.log("file is change!");
Copy the code

Step back up and execute our script.

$ /bin/bash update-project.sh
Copy the code

After the operation, open 192.168.0.200:8889 in the host, press F12 to open the console, and you can see the content we entered. So far, the project update has been successful.

But since docker is running containers, it is natural to go into the container to see what it is, let’s go into the container of Nginx.

  • docker exec
    • Execute commands in a running container.
  • -it
    • Keep the terminal open.
  • /bin/bash
    • Here is the command that needs to be executed. This command provides abashThe environment.
$ docker exec -it 26e52b8c6ffd9 /bin/bash
Copy the code

If you see root@26e52b8c6ffd9:~# on the command line, you have entered the container. Let’s go to the /usr/share/nginx/html folder and see if there is any dist in it.

$ cd /usr/share/nginx/html
$ ls
Copy the code

Here you can see the index.html file and the static folder. Let’s see where file is change is.

$ cd static/js
# Note that the name here is not the same, you can first hit app and then TAB key, it will automatically complete
$ cat app.86602636cb9e13f553fb.js
Copy the code

In the bottom little corner we see the code we just entered.

Don’t forget to exit from the container, again with $exit or CTRL + D.

Docker some convenient instructions

# Delete containers in batches
$ docker rm `docker ps -a -q`

# Delete mirrors in batches
$ docker rmi `docker images -q`

# uninstall docker
$ sudo apt-get purge docker-ce
$ sudo rm -rf /var/lib/docker
Copy the code

After the language

If we can upload static directory files to the cloud space, using CDN acceleration, or configure nginx gzip compression, and then anti-proxy. Docker-compose is composed for docker-compose, which is composed for docker-compose, and is composed for docker-compose, which is composed for docker-compose.

Think there is a little bit of excitement, but the meal to a stutter, the code is naturally to knock, in the increasingly sparse hair to find the true meaning of the code, not to hear in the princes, but for a peaceful world.

Code is like life. I love it.

I am here gayhub@jsjzh welcome to find me to play.

The outline

  • Environment Configuration (DONE)
    • virtualBoxDownload and install
    • ubuntu-serverDownload and install
    • Configure VMS
  • The system is loaded successfully, and the in-system configuration is started (DONE)
    • configurationapt-getDownload the source
    • configurationdockerImage source
    • downloadgit 和 nodeJs
  • dockerCombat (DONE)
    • simplenginxapplication
    • In combination withvue-cli 的 nginxapplication
  • TODO (TODO)
    • Dockerfile
    • docker-compose
    • nginx
    • uploadapp.jsAnd so on to cloud space