DEV Community: tangdoudou

Use Docker to create a Node Development Environment Based on CentOS Linux release 7.8.2003 Core

tangdoudou — Tue, 28 Jul 2020 00:46:27 +0000

@🌺Use Docker to create a Node Development Environment Based on CentOS Linux release 7.8.2003 Core 🌺

English | 简体中文

🍋🍓Introduction🍓🍋

This article describes how to deploy and use docker in CentOS Linux release 7.8.2003 🍒
The purpose is to use the simplest and fastest way to solve the deployment requirements of Nodejs using Docker 🍀

Precondition🍒

You need a server😆~~
Open it, just like this on below 🍓

Remarks

Because the alicloud server was originally used for the installation, the ECS instance of aliyun Linux 2.1903 LTS 64 bit operating system encountered some problems in the later stage. After querying a lot of data and operating according to the data, but the problem has not been solved for the time being, so I used my colleague's server to install it again.
The specific configuration is as follows
View Linux Kernel

uname -a
cat /proc/version

View the details of the current system version

1.cat /etc/redhat-release(This method is only suitable for RedHat Linux)
2.lsb_release -a (This command applies to all Linux distributions）

Step 1: Link server 🍓

After the link is successful, it is shown in the figure below. If you don't know how to link, you can refer to here

Run the following commands in turn to add the yum source.🍏

yum update
yum install epel-release -y
yum clean all
yum list

Install and run Docker。😍

yum install docker-io -y
systemctl start docker

Solve the error report and check the error information: (Note: if you use CentOS Linux, you can skip this step directly, generally there is no problem below)🍉

[root@iZ2ze67ifeuz62igol9apzZ ~]# docker -v
Docker version 1.13.1, build 4ef4b30/1.13.1
[root@iZ2ze67ifeuz62igol9apzZ ~]#  systemctl status docker.service -l
● docker.service - Docker Application Container Engine
   Loaded: loaded (/usr/lib/systemd/system/docker.service; disabled; vendor preset: disabled)
   Active: failed (Result: exit-code) since 日 2020-06-28 15:31:55 CST; 6min ago
     Docs: http://docs.docker.com
  Process: 24481 ExecStart=/usr/bin/dockerd-current --add-runtime docker-runc=/usr/libexec/docker/docker-runc-current --default-runtime=docker-runc --exec-opt native.cgroupdriver=systemd --userland-proxy-path=/usr/libexec/docker/docker-proxy-current --init-path=/usr/libexec/docker/docker-init-current --seccomp-profile=/etc/docker/seccomp.json $OPTIONS $DOCKER_STORAGE_OPTIONS $DOCKER_NETWORK_OPTIONS $ADD_REGISTRY $BLOCK_REGISTRY $INSECURE_REGISTRY $REGISTRIES (code=exited, status=1/FAILURE)
 Main PID: 24481 (code=exited, status=1/FAILURE)

6月 28 15:31:54 iZ2ze67ifeuz62igol9apzZ systemd[1]: Starting Docker Application Container Engine...
6月 28 15:31:54 iZ2ze67ifeuz62igol9apzZ dockerd-current[24481]: time="2020-06-28T15:31:54.799852050+08:00" level=warning msg="could not change group /var/run/docker.sock to docker: group docker not found"
6月 28 15:31:54 iZ2ze67ifeuz62igol9apzZ dockerd-current[24481]: time="2020-06-28T15:31:54.800671443+08:00" level=info msg="libcontainerd: new containerd process, pid: 24490"
6月 28 15:31:55 iZ2ze67ifeuz62igol9apzZ dockerd-current[24481]: time="2020-06-28T15:31:55.813485177+08:00" level=error msg="'overlay' not found as a supported filesystem on this host. Please ensure kernel is new enough and has overlay support loaded."
6月 28 15:31:55 iZ2ze67ifeuz62igol9apzZ dockerd-current[24481]: time="2020-06-28T15:31:55.814654057+08:00" level=error msg="'overlay' not found as a supported filesystem on this host. Please ensure kernel is new enough and has overlay support loaded."
6月 28 15:31:55 iZ2ze67ifeuz62igol9apzZ dockerd-current[24481]: Error starting daemon: error initializing graphdriver: devicemapper: Error running deviceCreate (CreatePool) dm_task_run failed
6月 28 15:31:55 iZ2ze67ifeuz62igol9apzZ systemd[1]: docker.service: main process exited, code=exited, status=1/FAILURE
6月 28 15:31:55 iZ2ze67ifeuz62igol9apzZ systemd[1]: Failed to start Docker Application Container Engine.
6月 28 15:31:55 iZ2ze67ifeuz62igol9apzZ systemd[1]: Unit docker.service entered failed state.
6月 28 15:31:55 iZ2ze67ifeuz62igol9apzZ systemd[1]: docker.service failed.

The solution is as follows
Uninstall the old version of docker and its related dependencies

# 1、Query all installed packages first

yum list installed | grep docker*
# Perhaps
rpm -qa docker*
# 2、Delete the query package

# Generally, there will be one
yum remove -y docker-ce
# Added cli tool
yum remove -y docker-ce-cli
# 3、Delete image file

rm -rf /var/lib/docker
rm -rf /var/lib/docker*

Upgrade the Linux kernel and re install docker：

#Check the installed and non installed packages to detemine whether we have installed the corresponding development environment and development library
yum grouplist

#This is usually done by installing both packages, which will make sure you have all the tools you need to compile
yum groupinstall "Development Tools"
#You have to do this to get the make * config command to execute correctly.
yum install ncurses-devel
#If you don't have this environment, you can use this one.
yum install qt-devel
#They are required to create the CentOS-7 Kernel.
yum install hmaccalc zlib-devel binutils-devel elfutils-libelf-devel

Sorry, the above error has not been solved, and many methods have been found to deal with it, but there is no result. So I changed my colleague's server and installed it according to the above steps.
The following is based on CentOS Linux release 7.8.2003 (Core)

Check the installation version and start docker.

docker version
systemctl start docker

Verify that the installation was successful

docker info

Set boot up

 chkconfig docker on

Configure Docker

Switch domestic image source to accelerate access to Docker Hub

echo "OPTIONS='--registry-mirror=https://mirror.ccs.tencentyun.com'" >> /etc/sysconfig/docker
systemctl daemon-reload
service docker restart

Install and configure node environment.

docker search node
docker pull docker.io/node:7.8.0

Create a dockerfile file in your favorite directory.

[root@VM_0_5_centos ~]# cd /var/opt/test
[root@VM_0_5_centos test]# ll
总用量 0
[root@VM_0_5_centos test]# touch Dockerfile

Hypothesis Node.js The start command of the application is node server.js, The listening port is 8090

# You can specify the version of the dependent node image  node:<version>, if not specified, it will be the latest.
FROM node
WORKDIR /app

# Copy other source files to the working directory
COPY ./app /app
# Put package.json，package-lock.json(npm@5+) Or yarn.lock Copy to working directory(relstive path)
RUN npm install
# Install dependencies only
# Replace with the actual port number of the application 
EXPOSE 8090
# It is modified according to the actual start command
CMD [ "node", "server.js" ]

Supplement .dockerignore

touch .dockerignore

.dockerignore reads as follows

node_modules
npm-debug.log

Create mirror😍 🍒

docker build -t node78:v1 .

Before the Docker deamons execute the instructions in the Dockerfile ，it will first check the syntax of the dockerfile. If there is a syntax error, it will be returned: (if you follow the above dockerfile cofiguration file, this error will not be reported. The configuration file has been modified later, and the screenshot is taker again.)

[root@VM_0_5_centos test]# docker build -t node78:v1 .
Sending build context to Docker daemon 3.584 kB
Error response from daemon: Unknown instruction: ：

🍒 View image💌

docker images

# Sample output
REPOSITORY                      TAG        ID              CREATED
node                            8          1934b0b038d1    5 days ago
${your_name}/${image_name}    latest     d64d3505b0d2    1 minute ago

Try 'docker run node', which can not only find images, but also help you download the latest version if there is no node image. Because I don't download the latest image, it will automatically start to download the latest version.

docker run node

View image >You will see that we have two images, one is the latest version and the other is the original download version. If you don't want to delete it later~ >Do not execute the docker run command in the picture~

docker image ls

Prepare a simple nodejs file 🍒

var http = require('http');

http.createServer(function (request, response) {


    response.writeHead(200, { 'Content-Type': 'text/plain' });


    response.end('Hello World\n');
}).listen(8090);

console.log('Server running at http://127.0.0.1:8090/');

Build the image, don't forget there is a little bit behind it.

docker build -t docker.io/node:latest .

Start container script

docker run -d -p 8090:8090  docker.io/node:latest

12.Test, successful connected 🍉

Congratulations on the successful depluyment!
## Common commands

In addition, some common commands are attached：

# view all containers (including terminated)
docker ps -a
# or use the new command


docker container ls -a

# view running containers
docker ps
# or use the new command
docker container ls

# sample output
ID            IMAGE                                COMMAND    ...   PORTS
ecce33b30ebf  ${your_name}/${image_name}:latest  npm start  ...   49160->8080

# view logs in a container
docker logs -f ${container_id}

# 进入某容器，并有shell执行环境
# 进入容器
# -i表示：交互式操作，-t表示：终端
# enter a container and have a shell execution environment
# enter the container
# -i for interactive operation，-t for terminal
docker exec -it ${container_id} bash
# you can exit by typing 'exit'

# stop container
docker container stop ${container_id}

# start terminated container
docker container start ${container_id}

# delete container
docker container rm ${container_name || container_id}

# view image
docker images
# or use the new command
docker image ls

# delete mirror
docker image rm ${image_id}

conclusion🍉💌

this tutorial is designed to be done quickly 'node.js' project deployment, details of other configuration items are not listed, configuration articles will be 🍒 added later ~~

welcome to point out that the article needs to be corrected 🍇 ~~

if there is a better way, we are welcome to come forward and make progress together🍓 ~

Host your website with Nginx for Front-end Developers on CentOS

tangdoudou — Wed, 27 May 2020 15:03:18 +0000

@Host your website with Nginx for Front-end Developers on CentOS

English | 简体中文

Introduction

The purpose of this paper is to solve the static resource deployment requirements of the front end by using the simplest and fastest method.
The company usually uses tomcat to deploy a lot of static resources. I bought a server in March this year. I've been busy working overtime and haven't started using it yet. I just used it today.

Precondition

ou have a server~~ just like this

Step 1: link the server

1. Find public IP

2. Change Password

3. Download FinalShell, install and open

4. Open FinalShell

You can fill in the name at will, you can create a server name which is convenient for later link use.

5. Linked server

Step 2: Install Nginx

### 1. Download Nginx package
Click here to download Nginx compression package

### 2. Find the path and drag in the compressed package you just downloaded.

### 3. Decompression files, Refresh directories

 tar -zxvf nginx-1.18.0.tar.gz

### 4. Installation dependency

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

### 5. Enter directory, execute command

cd nginx-1.18.0

./configure

make install

6.Configure

To configure this item, you can operate according to the demand or not, and use the default port number

# Open configuration file
vi /usr/local/nginx/conf/nginx.conf

Open the configuration file, use the down arrow of the keyboard to search for the port number and modify it.

Edit and save files nuder Linux

Using the CD command to enter the file directory ; such as : cd xxx/xxx

Use vi command to enter the file to be edited and enter normal mode to view the file content; such as : vi xxx

Enter lowercase 'i' to enter editing mode and start editing text.

After editing, press 'ESC' to exit to normal mode.

In normal mode, you can enter ':' to enter command mode.

Enter ':wq' or 'wq' in command mode to save and exit.

7.Start Nginx

/usr/local/nginx/sbin/nginx -s reload

8.Check whether Nginx process is started

ps -ef | grep nginx

Step 3: Test

1. Enter the server management interface and configure the security group.

### 2. Visit the website

Step 4: Deploy other projects

### 1. Enter the static resource directory of the server, drag the packed project to put.

Directory address：/usr/local/nginx/html

### 2. Visit

Colclusion

The purpose of this tutorial is to quickly complete the project deployment. Other configuration problems are not listed..Configuration articles will be added later if I have time...
Welcome to point out the article needs to be corrected~

If there is a better way, please come up with it and make progress together~~

A Practical Front end reading excel table Getting Started Guide With Vue and XLSX

tangdoudou — Thu, 30 Apr 2020 18:38:10 +0000

English | 简体中文

In this tutorial, we are going to implement Front end reading excel tables and get the content of the file ,Without back-end interface.

Use it to learn important XLSX features.
My other articles address expansion requirements：
Automatic cell merging after reading and parsing excel tables
Set cell color automatically after read and analyze the excel tables , then compare and analyze according to the data.
Perform data analysis after Reading the analysis excel tables（dialysis） Generate the echarts diagram that can meet the user-defined requirements.
Download excel tables

Introduction

There are many Background Management Systems in my company. It's very common to upload, parse and download excel tables. I've written similar posts before, but I only put the code and never write comments and steps. Haha, I don't say much. This article is a complete record:

Prerequisites

I usually use the following techniques：

Ant Design + Angular

Element UI + Vue

Ant Design + Vue

For convenience ,today we use Element UI + Vue

Start directly based on vue-element-admin

Step 1：Preparation

1. Click to download vue-element-admin

2. Download and unzip

3. Install dependency and run

Your project should resemble the following:

4. Run successfully

You will see a Login Form System web interface.

Step2：Import and parse tables

### 1. Enter the following path；

src\views\dashboard\index.vue

### 2. Delete useless code, prepare to start；

<template>
  <div class="dashboard-container">
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

<style lang="scss" scoped>

</style>

### 3. Add import button

<template>
  <div class="dashboard-container">
    <!-- Import button -->
    <div class="button_group">
      <a
        href="javascript:;"
        class="button_s my_file el-button button_s el-button--primary el-button--small"
      >
        <input type="file" class="my_input" @change="importExcel" id="upload" />Import
      </a>
    </div>
    <!-- Import button -->
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  methods: {
    /**
     * Import table
     */
     importExcel(e) {
    }
  }
}
</script>

<style lang="scss" scoped>
// Button style
.button_group {
  .button_s {
    width: 78px;
    margin: 5px 10px 5px 5px;
  }
  .button_m {
    width: 100px;
    margin: 5px 10px 5px 5px;
  }
  .my_file {
    position: relative;
    .my_input {
      position: absolute;
      opacity: 0;
      width: 78px;
      height: 30px;
      top: 0;
      left: 0;
    }
  }
}
// Button style
</style>

### 4. Save and refresh；

### 5. Download xlsx And Import xlsx；

### 6. Write Import Table function code, Save and Refresh；

<script>
import xlsx from "xlsx";
export default {
  name: 'Dashboard',
  methods: {
    /**
     * Import table
     */
     importExcel(e) {
      const files = e.target.files;
      console.log(files);
      if (!files.length) {
        return ;
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        return alert("The upload format is incorrect. Please upload xls or xlsx format");
      }
      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const XLSX = xlsx;
          const workbook = XLSX.read(data, {
            type: "binary"
          });
          const wsname = workbook.SheetNames[0]; // Take the first sheet，wb.SheetNames[0] :Take the name of the first sheet in the sheets
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // Generate JSON table content，wb.Sheets[Sheet名]    Get the data of the first sheet
          const excellist = [];  // Clear received data
          // Edit data
          for (var i = 0; i < ws.length; i++) {
            excellist.push(ws[i]);
          }
          console.log("Read results", excellist); // At this point, you get an array containing objects that need to be processed
        } catch (e) {
          return alert("Read failure!");;
        }
      };
      fileReader.readAsBinaryString(files[0]);
      var input = document.getElementById("upload");
      input.value = "";
    }
  }
}
</script>

### 7. Write the following table to test the function ；

### 8. Sometimes, the table title is Chinese. If we want to get the English attribute name in Object After the table is parsed successfully , Add The Following Code and test again;

<script>
import xlsx from "xlsx";
export default {
  name: 'Dashboard',
  methods: {
    getHeader(sheet) {
      const XLSX = xlsx;
      const headers = [];
      const range = XLSX.utils.decode_range(sheet["!ref"]); // worksheet['!ref'] Is the valid range of the worksheet
      let C;
      /* Get cell value start in the first row */
      const R = range.s.r; //Line / / column C
      let i = 0;
      for (C = range.s.c; C <= range.e.c; ++C) {
        var cell =
          sheet[
            XLSX.utils.encode_cell({ c: C, r: R })
          ]; /* Get the cell value based on the address  find the cell in the first row */
        var hdr = "UNKNOWN" + C; // replace with your desired default
        // XLSX.utils.format_cell Generate cell text value
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
        if(hdr.indexOf('UNKNOWN') > -1){
          if(!i) {
            hdr = '__EMPTY';
          }else {
            hdr = '__EMPTY_' + i;
          }
          i++;
        }
        headers.push(hdr);
      }
      return headers;
    },
    /**
     * Import table
     */
     importExcel(e) {
      const files = e.target.files;
      console.log(files);
      if (!files.length) {
        return ;
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        return alert("The upload format is incorrect. Please upload xls or xlsx format");
      }
      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const XLSX = xlsx;
          const workbook = XLSX.read(data, {
            type: "binary"
          });
          const wsname = workbook.SheetNames[0]; // Take the first sheet，wb.SheetNames[0] :Take the name of the first sheet in the sheets
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // Generate JSON table content，wb.Sheets[Sheet名]    Get the data of the first sheet
          const excellist = []; // Clear received data
          // Edit data
          for (var i = 0; i < ws.length; i++) {
            excellist.push(ws[i]);
          }
          console.log("Read results", excellist); // At this point, you get an array containing objects that need to be processed
          // Get header2-1
          const a = workbook.Sheets[workbook.SheetNames[0]];
          const headers = this.getHeader(a);
          console.log('headers', headers);
          // Get header2-2
        } catch (e) {
          return alert("Read failure!");;
        }
      };
      fileReader.readAsBinaryString(files[0]);
      var input = document.getElementById("upload");
      input.value = "";
    }
  }
}
</script>

We change the form to irregular state, save and open the interface for testing

Step 3: implement table rendering

### 1. Add table component to the interface 。

<!-- Table components -->
    <div class="myTable">
      <el-table
        max-height="600"
        :data="dataArr"
        v-loading="tableLoading"
        :span-method="objectSpanMethod"
        border
        style="width: 100%"
      >
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          v-for="(item, i) in tableColumn"
          :key="i"
        ></el-table-column>
      </el-table>
    </div>
    <!-- Table components -->

data() {
    return {
      dataArr: [], // Table content data array
      // countArr: {}, // Analyze the table data and header to get a cross reference array for user-defined consolidation. For the time being, this article only writes the basis, and does not introduce the automatic consolidation of cells~~My other articles have custom merge implementation methods~
      tableColumn: [], // Table header configuration array
      tableLoading: false // Whether the table is loading
    };
  },

### 2. Add Table Rendering Method

Note: part of the code in the table rendering method is used to map attribute names in Chinese and English. This is a function I added. Sometimes I don't need to use it. You can modify the code according to your requirements;

setTable(headers, excellist) {
      const tableTitleData = []; // Store table header data
      const tableMapTitle = {}; // Set table content for Chinese and English
      headers.forEach((_, i) => {
        tableMapTitle[_] = "prop" + i;
        tableTitleData.push({
          prop: "prop" + i,
          label: _,
          width: 100
        });
      });
      console.log("tableTitleData", tableTitleData);
      // Mapping table content attribute name is English
      const newTableData = [];
      excellist.forEach(_ => {
        const newObj = {};
        Object.keys(_).forEach(key => {
          newObj[tableMapTitle[key]] = _[key];
        });
        newTableData.push(newObj);
      });
      console.log('newTableData',newTableData);
      this.tableColumn = tableTitleData;
      this.dataArr = newTableData;
    },

3. Call Table Rendering Method

        // Add the following code to the importexcel (E) method
          // Render table1-1
          this.setTable(headers, excellist);
          // Render table1-2

4. Carry on function test

Conclusion

This code supports irregular data and can also be rendered to the interface if there is no header~~
Welcome to point out the error of my code~

If there is a better way to write, welcome to come up with it and make progress together~~

DEV Community: tangdoudou

Use Docker to create a Node Development Environment Based on CentOS Linux release 7.8.2003 Core

🍋🍓Introduction🍓🍋

Precondition🍒

Remarks

Step 1: Link server 🍓

Configure Docker

conclusion🍉💌

Host your website with Nginx for Front-end Developers on CentOS

Introduction

Precondition

Step 1: link the server

1. Find public IP

2. Change Password

3. Download FinalShell, install and open

4. Open FinalShell

You can fill in the name at will, you can create a server name which is convenient for later link use.

5. Linked server

Step 2: Install Nginx

6.Configure

7.Start Nginx

8.Check whether Nginx process is started

Step 3: Test

1. Enter the server management interface and configure the security group.

Step 4: Deploy other projects

Colclusion

A Practical Front end reading excel table Getting Started Guide With Vue and XLSX

Introduction

Prerequisites

I usually use the following techniques：

Ant Design + Angular

Element UI + Vue

Ant Design + Vue

For convenience ,today we use Element UI + Vue

Start directly based on vue-element-admin

Step 1：Preparation

1. Click to download vue-element-admin

2. Download and unzip

3. Install dependency and run

4. Run successfully

Step2：Import and parse tables

We change the form to irregular state, save and open the interface for testing

Step 3: implement table rendering

3. Call Table Rendering Method

4. Carry on function test

Conclusion