Ps: IT’s my first time to write an article in nuggets, and I hope you will show mercy (please ignore typesetting).

Self-introduction: I, male, 92 years, Suzhou, married (ha ha ha), the front end into the line for more than 3 years. Ok, close

Yeah, I’m Cheto. I’m just a slob. Docker kept me going back and forth for 10 days, and my hair fell out numerous times. I consulted some big wigs, but the process was difficult, so I decided to share this article. The technology is close to the daily operation and maintenance (repairing computers). But because our front end is at the bottom, there’s nothing else to do but chetto. Do it!

preface

Most company project deployments may have little front-end hands-on, now many are automated deployments by Jenkins. So that the front end has become the eyes of others cut diagram son. This article will take you through the world of Docker deployment. (Ugh, wake up, the test calls you back to change the bugssSS).

The dist packaged by the front-end VUE is directly thrown to the server (nginx is used in this article). The back-end node (Express is used in this article) builds the interface and starts the service. Nginx can configure the interface to forward. Of course, you also need to start a mysql database (I have been watching mysql all day, but no choice). Simple implementation of front-end input content, tune interface, such a database process. Because I am poor, can not afford to buy a server, so use vmvare+ Ubuntu play

vmvare：https://www.vmware.com/cn/products/workstation-player/workstation-player-evaluation.htmlCopy the code

18.04LTS Desktop Ubuntu: https://ubuntu.com/#downloadCopy the code

Overall technology: Docker, Vue, Express + Sequelize, mysql

Environment introduction

Docker is an open source application container engine that allows developers to package their applications and dependencies into a lightweight, portable container that can then be distributed to any popular Linux machine, as well as virtualization. Containers are completely sandboxed and have no interface with each other. (Simple, for example, if you go to a mall, there are many specialty stores, snack bars, cosmetics stores, these stores are like containers, you can go to whichever store according to your own needs, and these stores are essentially independent of each other’s business.)

I’m not going to introduce vue, it makes me want to throw up.

Node is now a skill that many mid-to-advanced front ends have in common, since they don’t have the energy to learn Java and PHP, the world’s best language. In short, it is JavaScript running on the server side, based on the V8 engine, very fast and very good performance. The most commonly used front-end is its server-side framework express/ KOA. Vue-cli I remember using the express service.

Docker

First of all, you must install Docker in Ubuntu.

The mirror

Image warehouse website: hub.docker.com/

Image is the premise of Docker running container, warehouse is the place to store image, visible image is the core of Docker. Docker image can be seen as a special file system, which provides programs, libraries, resources, configuration and other files (runtime environment) required by the container.

So let’s do mysql.

Docker search mysql: search the mysql image in the repository



Docker pull mysql:latest to pull the latest version of the image. Of course, I downloaded version 5.6. Mysql :5.6 install mysql:5.6 install mysql:5.6 install mysql:5.6 install mysql:5.6



The container

A container is a unit of software that runs on an image. It packages code and all its dependencies so that applications run reliably and quickly from one computing environment to another. Is a lightweight stand-alone executable software package. Containers isolate software from its environment and ensure that it can run in unison. Multiple containers can run on a single machine.

Run a container as a mysql image:

docker run -itd --name mysql-1  -p 3307:3306  -eMYSQL_ROOT_PASSWORD=123456 MYSQL_ROOT_PASSWORD=123456 MYSQL_ROOT_PASSWORD=123456 MYSQL_ROOT_PASSWORD=123456 MYSQL_ROOT_PASSWORD=123456 MYSQL_ROOT_PASSWORD=123456 MYSQL_ROOT_PASSWORD=123456 MYSQL_ROOT_PASSWORD=123456 --name: indicates the name of the container. -P: indicates that the internal port of the container is mapped to the host port docker ps-a: Query containers in all states (including stopped)Copy the code

Docker ps: query running containers



Mysql > connect to mysql client

Of course, look at your Linux IP first: you can see that the IP is 10.0.0.178 (the VM network connection is bridging).



Mysql client configureconnection test:



Ok, it means you are not far from success

Vue

This is our front end, the page is very simple, just built an interface.

Github address: github.com/qianduanwuz…

Then package the NPM Run build to generate dist. The front-end resources are stored in the server nginx.

So here we go:

Docker Search is the latest version of nginx

Docker pull nginx: Latest installation

Docker images check to see if the nginx image is installed successfully

Then we run the nginx container to see if the browser can access the nginx service properly:

docker run --name nginx-test -p 8080:80 -d nginxCopy the code

Run 10.0.0.178:8080 access description OK



At this point we can go into the container and look at some configurations and operations

docker exec-it container ID bash: enter the container (recommendedexec, the container exits without stopping the container.Copy the code

Docker ps check the container nginx-test



docker exec -it 9900fc8bb5C9 bash enters the containerCopy the code



At this point we can see nginx configuration/usr/share/nginx/HTML/index. The HTML, then we put the front dist directly in ok, but now we come to use Dockerfile to custom image.

What is a Dockerfile?

A Dockerfile is a text file used to build an image. The text content contains the instructions and instructions required to build the image.

Now you can create a Dockerfile folder in vmvare and touch a Dockerfile. The command is as follows:



Create web folder in /Dockerfile/, create front folder in /Dockerfile/web/, and drag front-end Dist to /Dockerfile/web/front/. See below to see if the file directory is correct

Ok, let’s open Dockerfile, cut to /Dockerfile/ directory vim Dockerfile edit

FROM: Custom images are based on images FROM, and nginx is the base image required for customization. Subsequent operations are based on Nginx.

COPY: COPY instruction that copies a file or directory from the context directory to the specified path in the container.

Dist: /usr/share/nginx/ HTML /

Start building the image

Docker build -t web-front:latest.Copy the code

After building docker images you can see web-front: Latest image

Run the container

docker run -itd --name web-front-1 -p 2222:80 web-front:latest bashCopy the code

Docker ps view container web-front-1



Into the container

docker exec -it f6d33f03653f bashCopy the code

/usr/sbin/nginx Enables the nginx service



Visit 10.0.0.178:2222



Ok, now that you have access to the front-end service, you are almost there.

Node

Ready to build the interface. Express + sequelize (orm)

Github address: github.com/qianduanwuz…

Paste part of the core code

Connect to database:

Modeling:

Interface:



server.js:

The following node container node server.js can start the service

Preparations for deploying node

Create a node folder under /Dockerfile/web/ and place the node project file in /Dockerfile/web/node/. , of course, also need/Dockerfile/web/node/create a bespoke mirror Dockerfile for node (not use docker compose).

Edit Dockerfile



Start building the image

Docker build-t web-node:beta.

Beta is essentially a Tag for a Web-node

Run the container

docker run -itd --name web-node-beta -p 5555:3000 web-node:beta bashCopy the code

Docker ps view container Web-node-beta



You can use Postman to run down the interface

SQL > create table u_users(sequelize will automatically find this table when modeling, not sync)

A: wow! I’m very excited about it. Now that both the front and back ends are accessible, what about cross-domain front-end interfaces? That’s okay. Remember the Web-front-1 container? Yeah, that’s right, just change the configuration in the nginx container. Let’s do this:

Docker exec – it f6d33f03653f bash into web – front – 1 container, and then we found the conf configuration file directory: / etc/nginx/conf. D/default. Conf, we edit the configuration can be directly



Save and exit, at which point we need to restart nginx. Nginx -s reload or nginx -s stop then /usr/sbin/nginx. Then we can simulate the front-end input content, tune the interface, save the database such a process.

Front-end input content

Callback interface



The request is successful



The database found it



All right, thank you so much for watching. I learned docker for 10 days and wrote this introductory article, there are many instructions not written, also omit part of the steps, some things definitely need to explore by myself, of course, the article error is inevitable, but also hope that the leaders pointed out ~ welcome to leave a message, I continue to be my cut graph son!