A, Django

1. Introduction

Django is an open source Web application framework written in Python. The FRAMEWORK pattern of MTV is adopted, namely model M, View V and template T. It was originally developed as CMS (Content Management System) software to manage some of Lawrence publishing group’s news-focused websites. It was released under the BSD license in July 2005. The frame is named after Belgian gypsy jazz guitarist Django Reinhardt.

2. Start the project

Use tsinghua source to install django and common libraries, restframework to write interfaces, and corsheaders to resolve back-end cross-domain issues.

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple django djangorestframework django-cors-headers
Copy the code

Initialization, depending on the situation, allows you to create multiple applications in a single project.

# create project
django-admin startproject Name
Create an app (optional)
python manage.py startapp name
Create table (optional)
python manage.py makemigrations
python manage.py migrate
Copy the code

3. Modify the configuration

setting.py

Allow all IP access

ALLOWED_HOSTS=[The '*']
Copy the code

New applications: Rest_Framework and Corsheaders. The components mentioned above, restFramework used to write interfaces, and Corsheaders addressed backend cross-domain issues

INSTALLED_APPS = [
    'django.contrib.admin'.'django.contrib.auth'.'django.contrib.contenttypes'.'django.contrib.sessions'.'django.contrib.messages'.'django.contrib.staticfiles'."rest_framework"."corsheaders",]Copy the code

Add corsheaders middleware. Middleware. CorsMiddleware. Note that should be put in the middleware django.middleware.common.Com monMiddleware above, involves the problem of the order of the request and response.

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware'.'django.contrib.sessions.middleware.SessionMiddleware'.'corsheaders.middleware.CorsMiddleware'.'django.middleware.common.CommonMiddleware'.'django.middleware.csrf.CsrfViewMiddleware'.'django.contrib.auth.middleware.AuthenticationMiddleware'.'django.contrib.messages.middleware.MessageMiddleware'.'django.middleware.clickjacking.XFrameOptionsMiddleware',]Copy the code

Set the language and time zone

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
Copy the code

Set to allow cross-domain

# set the request mode that allows cross domain, custom or default request mode
#from corsheaders.defaults import default_methods
#CORS_ALLOW_METHODS = default_methods
CORS_ALLOW_METHODS = (
    'GET'.'POST'.'PUT'.'PATCH'.'DELETE'.'OPTIONS'
)

# set the headers that allow cross-domain requests, custom or default requests
# from corsheaders.defaults import default_headers
# CORS_ALLOW_HEADERS = default_headers
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest'.'X_FILENAME'.'accept-encoding'.'authorization'.'content-type'.'dnt'.'origin'.'user-agent'.'x-csrftoken'.'x-requested-with'.'Pragma'.)# whether cookies are allowed in cross-domain requests. Default is False
CORS_ALLOW_CREDENTIALS = True

# allow all hosts to perform cross-site requests. Default is False
# If this parameter is not set, the whitelist must be set so that partial whitelisted hosts can perform cross-site requests
CORS_ORIGIN_ALLOW_ALL = True
Copy the code

urls.py

# Possible dependencies
from django.urls import include,re_path,path
from rest_framework.decorators import api_view
from rest_framework.response import Response
from . import views

#DRF format to allow GET and POST requests
@api_view(["GET"."POST"])
def func(request) :
    Write content and return interface data
    return Response({"res": "res"})

urlpatterns =[
    The primary route is the child route assigned to each application
    path("name/",include("name.urls")),
    Point from route to function in view file
    path("name/",views.index),
    The regular path points to the function
    re_path('^name', func),
]
Copy the code

4. Start the project

Python manage. Py runserver then executes 0.0.0.0:8000Copy the code

Second, the Vue

1. Introduction

Vue is a set of progressive JavaScript frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex single-page applications (spAs).

2. Install

Install Node. The new version of Node comes with Npm. New Version Installation Syntax (V4.4)

npm install -g @vue/cli
Copy the code

3. Start the project

# New version directive, create a project
vue create hello-vue
Enter the project directory
cd hello-vue
Install several required dependencies as needed
npm install vue-router axios vue-axios element-ui vue-wechat-title -D
New version of the command, run the service
npm run serve
Copy the code

–save/ -s, install to production environment; And add the dependency to the configuration. –save-dev/ -d, install to development environment; And add the dependency to the configuration. NPM install can install the dependency environment -g, install the global directory, the specific installation where, depending on the location of the NPM config prefix parameter, install the project directory, configuration file does not add dependencies, do not recommend using the deletion automatically generated HelloWorld component related.

4. Modify the configuration

Master file

/src/main.js

// Import dependency packages as needed
import Vue from 'vue'
import App from "./App";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import Vueaxios from 'vue-axios'
import router from './router'
import VueWechatTitle from 'vue-wechat-title';

// If you need internationalization
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })

Vue.config.productionTip= false;// It doesn't work, you can delete this line

// The imported dependency package must be used
Vue.use(VueWechatTitle,Vueaxios,axios);
Vue.use(ElementUI);// Write separately, otherwise the style will not take effect
Vue.prototype.$axios = axios;

new Vue({
  el: '#app',
  router,
  render: h= > h(App)
}).$mount("#app");
Copy the code

The routing file

SRC /router/index.js write the components first, then write the views page, and finally import the page in the route.

import Vue from "vue";
import VueRouter from "vue-router";
import Main from ".. /views/Main";
import NotFound from ".. /views/NotFound";
Vue.use(VueRouter);
export default new VueRouter({
    mode:"history".// Note that mode must be added, otherwise the URL display will be very impersonal
    routes: [{path: "/".redirect: "/index"/ / redirection
        },
        {
            path: "/index".component: index,
            meta: {"title":"Page title"},// The page dynamically assigns the title
            children: [{path: "/user/profile".component: Profile}// Configure the root directory, similar to iframe] {},path: "*".component: NotFound/ 404 / set}}]);Copy the code

Entrance to the file

src/App.vue

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
Copy the code

5. Communication components

The front and back end detach the project to get data from the back end

<script>
    export default{
        name:"XXX".beforeRouteEnter:
        methods:{
            getData:function(){
                this.axios({method:"get".url:"http://XXXXXX"}).then(function(response){
                    console.log(response)
                    this.info = response.data
                })
            }
        }
    }
</script>
Copy the code

6. Change the title and Logo

In the public path, initialize the default icon to favicon.ico and change it to a custom icon. Meta :{“title”:” platform “}

Third, Kubernetes

1. Introduction

Kubernetes, or K8s for short, is an abbreviation of “ubernete” with 8 characters instead of 8. Kubernetes is an open source platform for managing containerized applications on multiple hosts in the cloud. The goal of Kubernetes is to make deploying containerized applications simple and efficient. Kubernetes provides a mechanism for application deployment, planning, updating, and maintenance.

2. Prepare

Three or more servers are recommended to form a cluster. CentOS8.0 is used as an example.

The IP address	note
192.168.1.1	master
192.168.1.2 instead	node1
192.168.1.3	node2

Check the system kernel version and ensure that it is 8.0

cat /etc/centos-release
Copy the code

Change the host name to master, node1, and node2 respectively

vim /etc/hostname
Copy the code

To add hosts, add the master and node respectively

Vim /etc/hosts 192.168.1.1 master 192.168.1.2 node1 192.168.1.3 node2Copy the code

Delete the original warehouse, add Aliyun warehouse; Update to install common dependencies

rm -rfv /etc/yum.repos.d/*
curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-8.repo

yum update
yum install vim bash-completion net-tools gcc -y
Copy the code

Close the swap

Close # swap
swapoff -a
# comment swap
vim /etc/fstab
Copy the code

Configure the kernel to pass the bridge IPv4 traffic to the chain of iptables

cat>/etc/sysctl.d/k8s.conf<<EOF net.bridge.bridge-nf-call-ip6tables = 1 net.bridge.bridge-nf-call-iptables = 1 EOF 
sysctl --system
Copy the code

3. Install Docker

Aliyuan installation

yum install -y yum-utils device-mapper-persistent-data lvm2 
yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
yum -y install docker-ce
Copy the code

Modifying an Image Source

mkdir -p /etc/docker
tee /etc/docker/daemon.json <<-'EOF'
{
 "registry-mirrors":  ["https://otv9pb9m.mirror.aliyuncs.com"]
}
EOF
systemctl daemon-reload
systemctl restart docker
Copy the code

If Docker fails to start, reboot the server.

4. Install Kubernetes

Add the K8S repository

cat  <<EOF > /etc/yum.repos.d/kubernetes.repo
[kubernetes]
name=Kubernetes
baseurl=https://mirrors.aliyun.com/kubernetes/yum/repos/kubernetes-el7-x86_64/
enabled=1
gpgcheck=1
repo_gpgcheck=1
gpgkey=https://mirrors.aliyun.com/kubernetes/yum/doc/yum-key.gpg https://mirrors.aliyun.com/kubernetes/yum/doc/rpm-package-key.gpg
EOF
Copy the code

Install k8s

yum install -y kubectl kubelet kubeadm
Set boot up
systemctl enable kubelet
# Check the K8S version
kubectl version
#version Enter the version number
#apiserver Fill in the master addressKubeadm init --kubernetes-version=1.20.4 \ --apiserver-advertise-address=192.168.1.1 \ --image-repository Registry.aliyuncs.com/google_containers \ - service - cidr = 10.10.0.0/16 - pod - network - cidr = 10.122.0.0/16Copy the code

Note the following information after the installation. The child nodes need to be linked to the master node via kubeadm Join.

Your Kubernetes control-plane has initialized successfully!
To start using your cluster, you need to run the following as a regular user:
 mkdir -p $HOME/.kube
 sudo  cp -i /etc/kubernetes/admin.conf $HOME/.kube/config
 sudo  chown  $(id -u):$(id -g)  $HOME/.kube/config
Alternatively, if you are the root user, you can run:
 export KUBECONFIG=/etc/kubernetes/admin.conf
You should now deploy a pod network to the cluster.
Run "kubectl apply -f [podnetwork].yaml"with one of the options listed at: https://kubernetes.io/docs/concepts/cluster-administration/addons/ Then you can join any number of worker nodes by running the following on each as root: Kubeadm join 192.168.1.1:6443 -- Token yis2v6. u5D1XU6v1v0xfNbn \ -- Discovery-token-ca-cert-hash sha256:9b4b468a10c257867c14e41e3e9c4c6bacaff477a61d294e6e18b6e39cdec809Copy the code

# to create kubectl
mkdir -p $HOME/.kube
sudo  cp -i /etc/kubernetes/admin.conf $HOME/.kube/config
sudo  chown  $(id -u):$(id -g)  $HOME/.kube/config
Make Kubectl automatically replenished
source  <(kubectl completion bash)
Copy the code

Configure the network

View nodes and namespaces within the cluster
kubectl get node
kubectl get pod --all-namespaces
Copy the code

At this point, node is NotReady because CoredNspod is not started and netPod is missing

Kubectl apply -f HTTPS://docs.projectcalico.org/manifests/calico.yaml
Copy the code

After the network environment is installed, the node is ready.

The dashboard

# pull resourcesWget HTTP: / / https://raw.githubusercontent.com/kubernetes/dashboard/v2.0.0-rc7/aio/deploy/recommended.yamlCopy the code

vim recommended.yaml

kind: Service
apiVersion: v1
metadata:
 labels:
 k8s-app: kubernetes-dashboard
 name: kubernetes-dashboard
 namespace: kubernetes-dashboard
spec:
 type: NodePort
 ports:
 - port: 443
 targetPort: 8443
 nodePort: 30000
 selector:
 k8s-app: kubernetes-dashboard
Copy the code

After downloading the YAMl file locally, add type and nodeport to the service

Install the dashboard
kubectl create -f recommended.yaml
Copy the code

Create a dashboard admin user
kubectl create serviceaccount dashboard-admin -n kube-system
# bind the created Dashboard user to an administrative user
kubectl create clusterrolebinding dashboard-cluster-admin --clusterrole=cluster-admin --serviceaccount=kube-system:dashboard-admin
Get the token name for the newly created user
kubectl get secrets -n kube-system |  grep dashboard
Output: dashboard-admin-token-88gxw
# Refer to the output above
kubectl describe secrets -n kube-system dashboard-admin-token-88gxw
# output token
Copy the code

Port 30000 is configured. Log in to the port using https://IP:30000 and select the token

#tokeneyJhbGciOiJSUzI1NiIsImtpZCI6Ik1YU183MUtramZLYWw4d1dzRm9pTlU3akMwRmlOQlFxaE1GWmppam12b1UifQ.eyJpc3MiOiJrdWJlcm5ldGVzL3Nlc nZpY2VhY2NvdW50Iiwia3ViZXJuZXRlcy5pby9zZXJ2aWNlYWNjb3VudC9uYW1lc3BhY2UiOiJrdWJlLXN5c3RlbSIsImt1YmVybmV0ZXMuaW8vc2VydmljZ WFjY291bnQvc2VjcmV0Lm5hbWUiOiJkYXNoYm9hcmQtYWRtaW4tdG9rZW4tajI4bGQiLCJrdWJlcm5ldGVzLmlvL3NlcnZpY2VhY2NvdW50L3NlcnZpY2UtY WNjb3VudC5uYW1lIjoiZGFzaGJvYXJkLWFkbWluIiwia3ViZXJuZXRlcy5pby9zZXJ2aWNlYWNjb3VudC9zZXJ2aWNlLWFjY291bnQudWlkIjoiMWYwODhhO DctNjA2Ny00MTM2LWE5YmQtODA2MTkxYWY5N2M1Iiwic3ViIjoic3lzdGVtOnNlcnZpY2VhY2NvdW50Omt1YmUtc3lzdGVtOmRhc2hib2FyZC1hZG1pbiJ9. J9Zn5hrzCg119D4o-o3BNVFGpkiq3TtYQG05ScoNHMCuihiOAOEfb8ADs6OzOvmRBkc0zgA3YpaBoWuiW1VTV5Lh5Vix3MvhpM4kLc0fCS0QUcPvLUtZcPEf 6GrYnO06tfilWD5V-zm90v7cNhZoasw6T1G-SmbFRo-GpKad3Par_MejQuOmd4VlqGexfb58OXWEB9GTjq7_FPL4hut6E5LzN_CmouI3dkw97dmbZo8ZTV7k 0uUoiodwUJ9mzdOEaHG4G3yZt7_6FSkbUP8_rBncPe5OlN7dd6AKeC_RJCkj-I1_dd70RXKjz3iw15M-jbNcUJWySEArQjJWo6tXNgCopy the code

Join node

The master machine/etc/kubernetes/admin. Conf file to the node1 and 2

mkdir -p $HOME/.kube
sudo  cp -i $HOME/admin.conf $HOME/.kube/config
sudo  chown  $(id -u):$(id -g)  $HOME/.kube/config
Copy the code

Enter the kubeadm join command above to complete the link

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Common Technology Stack

A, Django

1. Introduction

2. Start the project

3. Modify the configuration

setting.py

urls.py

4. Start the project

Second, the Vue

1. Introduction

2. Install

3. Start the project

4. Modify the configuration

Master file

The routing file

Entrance to the file

5. Communication components

6. Change the title and Logo

Third, Kubernetes

1. Introduction

2. Prepare

3. Install Docker

Aliyuan installation

Modifying an Image Source

4. Install Kubernetes

Add the K8S repository

Install k8s

Configure the network

The dashboard

Join node

Common Technology Stack

A, Django

1. Introduction

2. Start the project

3. Modify the configuration

setting.py

urls.py

4. Start the project

Second, the Vue

1. Introduction

2. Install

3. Start the project

4. Modify the configuration

Master file

The routing file

Entrance to the file

5. Communication components

6. Change the title and Logo

Third, Kubernetes

1. Introduction

2. Prepare

3. Install Docker

Aliyuan installation

Modifying an Image Source

4. Install Kubernetes

Add the K8S repository

Install k8s

Configure the network

The dashboard

Join node

Related Posts

Realizing all face information in RTMP live streaming tracking video based on Rainbow soft face recognition

Cloud + community applets knowledge Week, waiting for you to challenge!

Axure 9 compatibility issues with Windows11