background

As the saying goes, a front end that doesn’t want to do a good job on the back end is not a lucky dimension. As a front-end, it just doesn’t feel fun to deploy front-end services to a server through a container. I want to deploy a whole set of services to play around with the server. So I came up with the idea of doing this simple demo.

A simple introduction

Front-end write back-end preferred language must be Node, database to choose the most popular mysql, but also added middleware Redis, just take the opportunity to understand. The implementation looks like this:

  • Vue write a login page (the username and password are inserted into the database beforehand)
  • Once logged in, you can write a note of encouragement to yourself in the moment or write down the name of your dream or girlfriend (or boyfriend)
  • Look for failed encouragement or dead dreams or the names of ex-girlfriends
  • No deletions and no edits

The whole process involves a simple invocation, with deploying the entire service as the first priority. So of course there is no optimization (I don’t). A little basic Docker manipulation is required. It’s kind of a simple record of my own fumbling process.

The specific implementation

Deploying the mysql container

Create a network with the docker command

docker network create bullshit-app
Copy the code

After pulling mysql5.7 image, create a mysql container

 docker run -d \
     --network bullshit-app --network-alias mysql \
     --name bullshit-mysql \
     -v bullshit-mysql-data:/var/lib/mysql \
     -e MYSQL_ROOT_PASSWORD=simple \
     -e MYSQL_DATABASE=bullshit \
     mysql:5.7
Copy the code

At this point, the mysql container has been created and is running smoothly on the server

If you go into the container to see what it looks like, the password is the simple value passed in to create the container variable MYSQL_ROOT_PASSWORD

docker exec -it bullshit-mysql mysql -u root -psimple
Copy the code

After the mysql container is created, a bullshit database will be created based on the bullshit passed in by the MYSQL_DATABASE variable without tables in the database. You can create tables from written SQL files using the Docker command.

docker exec -i bullshit-mysql sh -c 'exec mysql -uroot -p"$MYSQL_ROOT_PASSWORD"' < /app/bullshit/bullshit.sql
Copy the code

The spans.sql file is uploaded from the local to the server

use `bullshit`;
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

DROP TABLE IF EXISTS `dream`;
CREATE TABLE `dream` (
  `id` int NOT NULL AUTO_INCREMENT,
  `content` longtext NOT NULL,
  `createtime` bigint NOT NULL,
  `author` varchar(20) NOT NULL.PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3;

DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
  `id` int NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL,
  `password` varchar(20) DEFAULT NULL.PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3;
INSERT INTO `users` (username, password) values('admin'.'123');

SET FOREIGN_KEY_CHECKS = 1;
~

Copy the code

Create mysql container, check the IP of mysql container. 172.20.0.2

docker network inspect bullshit-app
Copy the code

The deployment of redis

Create a Redis container with no persistence

docker run --name bullship-redis --network bullshit-app -d redis
Redis network IP 172.20.0.3
docker network inspect bullshit-app
Copy the code

Deploying the Node Service

Node service code address: github.com/jiaoruogu/b… After uploading the back-end code to the server, build the image to create the container

docker build . -t bullshit-server
docker run --name bullshit-server --network bullshit-app -e NODE_ENV=production  -d bullshit-server
Copy the code

After the image is created, the IP address of the container is 172.20.0.4

Verify that the service is started correctly

curl http://172.20.0.4:3000/api/search
Copy the code

The Node service has started successfully! Now the IP address of the service is also known. The following is to configure the front-end nginx proxy service.

Front end (Vue implementation)

Front-end code address: github.com/jiaoruogu/b…

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    location /api {
      proxy_pass http://172.20.0.4:3000;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root/usr/share/nginx/html; }}}Copy the code
# Build a Web image
docker build . -t bullshit-webCreate the Web container Docker run --name bullshit-web --network bullshit-app -dp 9010:80 bullshit-web
Copy the code

The Web container is deployed!

results

www.jiaoruogu.top:9010/

supplement

If you dislike the tedious command line operation, there is a visual docker management tool Portainer

Easily manage container images

conclusion

This is just a rough practice of deploying a whole set of services using docker containers. It is a long way from production, and every point has a lot of room for improvement. But learning is always a process from simple to complex. It is interesting to experience the whole process from development to on-line through this practice.