navigation

[react] Hooks

[React from zero practice 01- background] code split [React from zero practice 02- background] permission control [React from zero practice 03- background] custom hooks [React from zero practice 04- background] docker-compose Deploy React + Egg +nginx+mysql [React From zero practice 05- background] Gitlab-CI using Docker automated deployment

[source code – Webpack01 – precompiler] AST abstract syntax tree [source code – Webpack02 – Precompiler] Tapable [source code – Webpack03] hand written webpack-compiler simple compilation process [source code] Redux React-redux01 [source] Axios [source] vuex [source -vue01] Data reactive and initialize render [source -vue02] Computed responsive – Initialize, access, Update Procedure [source -vue04] Watch Listening properties – Initialize and update [source -vue04] vue. set and vm.$set [source -vue05] vue.extend

Vue. NextTick and VM.$nextTick

[Deployment 01] Nginx [Deployment 02] Docker deployVue project [Deployment 03] gitlab-CI

[Deep 01] Execution context [Deep 02] Prototype chain [Deep 03] Inheritance [Deep 04] Event loop [Deep 05] Curri Bias function [Deep 06] Function memory [Deep 07] Implicit conversions and operators [Deep 07] Browser caching mechanism (HTTP caching mechanism) [Deep 08] Front-end security [Deep 09] Deep copy [Deep 10] Debounce Throttle [Deep 10] Front-end routing [Deep 12] Front-end modularization [Deep 13] Observer mode Publish subscribe mode Bidirectional data binding [Deep 14] Canvas [Deep 15] webSocket Webpack HTTP and HTTPS CSS- Interview Handwriting Promise algorithms – Find and sort

(1) Pre-knowledge

(1) Some words

This is the recommended approach. This is the recommended method) manually: manual, manual afterward: then attach: attachment, attention, fixed (` docker attach container ID name ` = > | container into the container) exec: execute (execute: Interactive backstage defend: Maintainer: (docker run-id d: defend) Maintainer: (docker run-ID D: defend) Maintainer: (docker run-ID D: defend) maintainer: MAINTAINER ALTER: alter user 'root'@'%' IDENTIFIED with mysQL_native_password by 'root'; -Blair: Deny the destination premium, navicat premium.Copy the code

(2) the docker command

• The container related
  • Create open container: docker run -itd –name Container name –link ID of the linked container: the linked alias -p Host port: container port -v Host directory: container directory Image name /bin/bash
  • Docker run -d –name=a –net=host –net=host
  • Exit the current container:docker exit
  • Into the container: docker attach container ID | vessel name Note that if the container has been stop, can’t enter the container, you must first start
  • Into the container and execute the command: docker exec – it container ID | vessel name Execute the command Note that there are invisible to use – id run results
  • Start the container:Docker start container ID | vessel name
  • Stop the container:Docker stop container ID | vessel name
  • Violence stops the container:Docker kill container ID | vessel name
  • Restart the container:Docker restart container ID | vessel name
  • To delete a container:Docker rm -f container ID | vessel name
  • Delete all containers:docker rm -f $(docker ps -qa)-f is mandatory. Running containers can also be deleted
  • Deleting all mirrors:docker rmi -f $(docker iamges -qa)
  • View the container log:Docker logs container ID | vessel name
  • The host copies the file to the container:Docker cp hosting a file or directory container ID | container name: container directoryNote that both copy commands are executed on the host
  • The container copies files to the host:Docker container id | container name: directory or file The host machine directoryNote that both copy commands are executed on the host
  • Port mapping:docker run -it -p 8080:80
  • Submit the runtime container as the image:Docker commit - a = 'author' - m = 'information submitted runtime ID | name of the vessel The new name of mirror
  • !!!!!!!!!!Data volume volume!!!!!!!!!!
    • Docker run-it -v Host path :/ container path
    • If there is no mapped folder in the mapped container, a new folder will be created in the container, but the mapped file will not be placed in the container folder
    • The path following -v must be an absolute path
    • A container can correspond to multiple data volumes, and a data film can be used by multiple containers
  • Data volume container
    • My nugget article – Data volume Container 1
  • volume
    • Docker run-it -v Host path :/ container path
    • If there is no mapped folder in the mapped container, a new folder will be created in the container, but the mapped file will not be placed in the container folder
    • The path following -v must be an absolute path
    • A container can correspond to multiple data volumes, and a data film can be used by multiple containers
  • Image correlation
    • Push the image to the server for my nuggets
    • Docker search ningx check all nginx images on the hub
  • Docker image acceleration: search [container image service] / [image accelerator] in Ali Cloud

(3) Docker install mysql and access

(1) Docker pull mysql, (2) docker run -d --name mysql7 -p 3308:3306 -e MYSQL_ROOT_PASSWORD=root mysql // Docker exec -it mysql7 /bin/bash // docker exec -it mysql7 /bin/bash // Docker exec -it mysql7 /bin/bash -show databases; -show databases; - use mysql; - select host,user,plugin from user; - alter user 'root'@'%' identified with mysql_native_password by 'root'; - Note that all endings are added; Do not forget (6) to link to the database, you can create a new database through Navicat. Under the front three picture (2) data volume mapping docker run - d \ - name = mysql_container -p 3307: \ 3306 - v/opt/mysql/conf: / etc/mysql \ - v / opt/mysql/logs: / var/log/mysql \ - v/opt/mysql/data: / var/lib/mysql \ - e MYSQL_ROOT_PASSWORD = 123456 \ - d mysql (3) (1) show databases; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to see all the database (2) the create database test; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to create the test database (3) the drop database test; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- delete the test database (4) use test: / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- use the test database (5) select the database (); -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- currently in use of database (5) show tables; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- check the tables in the database (6) the create table test (...). ; // --------------- create table test (7) drop table test; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- delete the test table (8) the exit / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- out of mysql (4) to a mysql database import SQL) (. (1) mysql -uroot -proot start database (2) show databases; (3) select database(); (4) use the name of the database; SQL file (source F:\workSpace\zhigui\ coldchain-data \ coldchain-sql C:\Program Files\MySQL\MySQL Server 8.0\my.ini - Specific configuration is introduced: https://juejin.cn/post/6844904184462983181 - such as exposure can modify the default port (port = 3306) (3) to turn out - turn the tables: - Mysql tables can be dumped by navicat (dump SQL files) - roll: -1. Navicat (run SQL file) table 2. Use database => source. SQL file pathCopy the code

(4) Deploy egg to a remote server and access mysql

Git clone [email protected]:woow-wu7/7-react-admin-egg.git (2) run the following command to clone the egg in the root directory: NPM install --production (3) NPM run start (1) NPM install --production (3) NPM run start (3) NPM run start "start": "Egg-scripts start --daemon --title=egg-server-7-react-admin-egg --ignore-stderr" --ignore-stderr Mysql = {client: {host: '49.233.****', port: '3308', user: 'root', password: '****', database: '7-react-admin-egg', }, app: true, agent: false, }; (6) The default port after the egg project is deployed is 7001. (7) Run the following command to test posman: http://49.233.****:7001/api/table-listCopy the code

(二) Dockerfile

(1) docker build

Docker build -f Path to the Dockerfile -t Image name: tag name.

• Such as:

  • docker build -f /root/work/7/dockerfile/7-web-dockerfile -t nginx .
  • docker build -f $(pwd)/7-web-dockerfile -t mysql .
  • docker build --target node --build-arg NAME=woow -f Dockerfile -t tomcat .

• This (.) means to specify (the directory of the context in which the image is built).

• Description:

  • After creating the Dockerfile file, you need to usedocker buildGenerate the mirror
  • Docker buid command parameters
    • -f is short for file. Docker build -f specifies the path to the dockerfile
    • -t is short for tag. Docker build-t specifies the name and tag of the image to be generated
    • Make sure that the Docker build ends with a space.
    • –build-arg=< parameter name >=< value >, which overwrites the environment variable specified by arg in the dockerfile
    • –target=< value of as >, used to explicitly specify the target to be built, e.gdocker build --target node --build-arg NAME=woow -f Dockerfile -t tomcat .

• Note:

  • $(PWD) must be enclosed in parentheses and cannot be written as $PWD
  • Because. Represents the context environment, so generally when executing Dockerfile, all enter the directory where the Dockerfile file is located,. This is the same as the directory where the Dockerfile is

(1.1) ARG => Docker build in case of [ARG]

• The (dockerfileARG) represents an environment variable, similar to (ENV)
  • The ARG exists at build image time and no longer exists at container run time, while the ENV still exists at container run time
• ARG is defined in dockerfile (parameter name or default)
  • The default value can be inDocker build --build-arg=< name >=< value >To cover
• Refer to the link

(1.2) FROM… as …

• FROM node as node
• FROM nginx as nginx
• If directdocker build --build-arg NAME=woow -f Dockerfile -t tomcat .
  • Two images will be generated
• If throughdocker build --target node --build-arg NAME=woow -f Dockerfile -t tomcat .
  • Only node images are generated
  • --target nodeUse to explicitly specify the target to be built

ARG NAME=woow_wu7

FROM tomcat as tomcat

RUN echo $NAME

CMD ['cheo', '$NAME']

FROM redis as redis

// docker build --target tomcat --build-arg NAME=woow -f Dockerfile -t tomcat .
Copy the code

(2) Dockerfile syntax

(3) Pits encountered in the use of Docker

• docker exec
  • docker exec -it node npm -vThe command is executed, but the container is not entered
  • docker exec -it node npm -v /bin/bashThe command is executed, but it does not enter the container
  • Docker exec -it node /bin/bash will enter the container
• Docker run –link Id of the linked container: alias after the link

(3) Primary – regular deployment react + Egg + mysql

Install mysql on the remote centos system using Docker (if not docker) Environment configuration of trouble and onerous) 1. The docker pull mysql / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- pull mirror 2. Docker Run -d --name=mysql_c1 -p 3300:3306 -e MYSQL_ROOT_PASSWORD=root mysql // -------- New container - (-e) - the default port for MSQL is 3306. - The default port for MSQL is 3306. Said it has 3. Docker exec - it mysql_c1 / bin/bash / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- into the container to bash environment 4. Mysql - uroot - proot / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 5 enter the user name and password. Error: access denied for user root@localhost error: access denied for user (using password: no)  - show databases; - use mysql; - select host,user,plugin from user; - alter user 'root'@'%' identified with mysql_native_password by 'root'; - Note that all endings are added; If you want to add a table to the table, you need to add a table to the table. If you want to add a table to the table, you need to add a table to the table. If you want to add a table to the table, you need to add a table to the table. Enter the IP address of the remote centos server. Is the mapping of 3300 / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the default port 3306, mysql Map 3300 - root password database Database name (2) Run git Clone to fetch the egg project code from the server. NPM install --production (4) NPM start The solution is to add --ignore-stderr - to the start command of script in package.json: "Egg-scripts start --daemon --title=egg-server-7-react-admin-egg --ignore-stderr" -ignore-stderr Egg project after deployment of the default port is 7001 / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- an egg launch the default port of 7001 (6) test posman run: http://49.233.****:7001/api/table-list (3) Deploy React nginx Deploy React // -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the nginx's default port is 80 (1) the NPM run build (2) with (nginx) as a ( Docker pull nginx (4) Docker run-it --name=nginx_c1 \ -p 8088:80 \ v /root/work/7/nginx/web/build:/usr/share/nginx/html \ -v /root/work/7/nginx/config/conf.d:/etc/nginx/conf.d \ nginx (5) Will be packed the react projects generate build folder copy to the server/root/work/seven/nginx/web/build directory (6) in the/root/work / 7 / nginx/config/conf. D folder to add ( Nginx (7) default.conf server {listen 80; server_name localhost; location / { root /usr/share/nginx/html; // Static resource directory index index. HTML index. HTM; Try_files $uri $URI // index.html; / / according to the file path matching} {location/API proxy_pass http://49.233.215.163:7001; }} (8) Connect to port 8088 on the server address, and then access the react projectCopy the code

(4) Intermediate – Dockerfile deployment React + egg + mysql

• Reasons to use Dockerfile:
  • (1) The required configuration can be generated repeatedly because the configuration can be retained
  • (2) Free the complex commands in the process of generating containers. When generating containers, only the commands with short container names need to be generated
• disadvantages
  • Dockerfile is difficult to achieve the effect of docker run -v, because the volume in Dockerfile can only specify the directory of the container, while it is randomly generated in the host

(1) Write FROM mysql WORKDIR./ ENV MYSQL_ROOT_PASSWORD root EXPOSE 3306 (2) generate image docker build -f Docker run -d --name=mysql_build1 -p 3301:3306 a78d48f2327e (4) Enter the container Docker exec -it mysql_build1 /bin/bash (5) mysql -uroot -proot (6) Access denied for user root@localhost - Solution: show databases; - use mysql; - select host,user,plugin from user; - alter user 'root'@'%' identified with mysql_native_password by 'root'; - Note that all endings are added; Don't forget (7) to link again to Navicat. After linking successfully, you can add tables, design tables, etc. (2) Nginx dockerfile - here nginx and the above myssql is more reasonable to do docker run -v such data volume mapping - and It's hard to implement only in dockerfiles, so skip to docker-compose in 5Copy the code

-Docker-compose: React + egg + mysql

(1) the installation

1, install python-pip yum -y install epel-release yum -y install python-pip docker-compose PIP install docker-compose After the installation is complete, run the docker-compose version spring.dubbo application.name Registry.port command to check whether the installation is successfulCopy the code

(2) The difference between service and project

• Service: an application container
• Project: a complete application unit composed of a group of associated application containers

(3) docker-compose common command line command

• Note :(docker-compose) must be in the path of the docker-compose. Yml file

Docker xompose - v / / docker - compose the version number of the docker - compose up / / start all services docker - compose up - d / / background start all services docker - compose - f // docker-compose2.yml -d up // docker-compose2.yml < /docker-compose2.yml < /docker-compose2.yml < /docker-compose2.yml < /docker-compose2.yml < /docker-compose2.yml < /docker-compose2.yml Docker-compose ps // List all the containers in the project docker-compose ps // List all the containers in the project docker-compose start container name // Docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose Docker - compose stop container name | ID)Copy the code

(4) the docker – compose. Yml file

version: "3" services: mysql: restart: always image: mysql container_name: mysql__7 working_dir: / ports: - "3333:3306" environment: - MYSQL_ROOT_PASSWORD=root web: restart: always image: nginx container_name: nginx__7 working_dir: / ports: - 8888:80 volumes: - ".. /nginx/web/build:/usr/share/nginx/html" - ".. /nginx/config/conf.d:/etc/nginx/conf.d"Copy the code

Program source code

• Program source code
• Deployment effect Preview address

data

My previous Docker learning notes/deployment 02 Docker deployment vue centos deploy the egg, NPM install error blog.csdn.net/LimonSea/ar… Docker – compose install www.jianshu.com/p/5ba9f9159… Docker-compose Pre-and post-deployment tutorial juejin.cn/post/684490…

A series of www.cnblogs.com/evan-liang/…

Command line docker – compose common commands www.cnblogs.com/yyxianren/p…

Yml docker – compose. Yml file (perfect) www.jianshu.com/p/90bf0e231… Docker-compose. Yml file (also very nice) juejin.cn/post/684490…

Database docker installation mysql8 www.cnblogs.com/zhangshengd… Mysql import. SQL file www.cnblogs.com/kenkofox/ar…