
# 1. 操作数据卷

基本语法:

```bash
docker volume [COMMAND]
```

docker volume 命令是数据卷操作, 根据命令后跟随的 command 来确定下一步的操作

- create : 创建一个 volume
- inspect : 显示一个或多个 volume 的信息
- ls : 列出所有的 volume
- prune : 删除所有未被使用的 volume
- rm : 删除一个或多个指定的 volume

# 2. 挂载数据卷

创建时, 通过-v 参数挂载一个数据卷到某个容器目录

基本语法:

```bash
docker run -v [volume_name]:[container_path] [image_name]
```

解释:

- volume_name : 数据卷的名称
- container_path : 容器内的路径
- image_name : 镜像名称

# 3. 便捷命令

不用先创建数据卷, 创建容器时直接自动创建并挂载一个数据卷到某个容器目录

```bash
docker run --name container_name -p host_port:container_port -v local_volume_name:container_path -d image_name
```

解释:

- container_name : 容器名称
- host_port : 主机端口
- container_port : 容器端口
- local_volume_name : 主机内数据卷名称
- container_path : 容器内的路径
- image_name : 镜像名称

# 4. 目录挂载

类似于数据卷挂载:

- -v [宿主机目录]:[容器内目录]
- -v [宿主机文件]:[容器内文件]

# 5. 自定义镜像

## 5.1 Dockerfile

指令如下:

![Dockerfile指令表格](dockerfile.jpg)

使用方法:

```bash
docker build -t image_name:tag .
```

"." 代表 Dockerfile 所在路径

## 5.2 登录 dockerhub

```bash
docker login
```

## 5.3 给旧镜像起名

```bash
docker tag old_name:old_tag new_name:new_tag
```

## 5.4 推送到 docker hub

```bash
docker pull dockerhub_name/image_name:tag
```

未完


Docker常用命令-2


# 1. 镜像相关命令

## 1.1 镜像名称一般由两部分组成: [repository]:[tag]

例如: `mysql:5.7`

## 1.2 在没有指定 tag 的时候, 默认是 latest, 代表最新版本的镜像

# 2. 镜像操作命令

## 2.1 docker build 构建镜像

## 2.2 docker images 查看镜像

## 2.3 docker rmi 删除镜像

参数可以为镜像 id, 或者镜像名称 ( [repository]:[tag] )

例如:

```bash
docker rmi mysql:5.7
```

## 2.4 docker pull 从服务拉取镜像

参数为 [repository]:[tag]

例如:

```bash
docker pull mysql:5.7
```

## 2.5 docker push 推送镜像到服务

## 2.6 docker save 保存镜像为一个压缩包

选项:

- -o 输出文件的名称, 将镜像保存为一个压缩包

例如:

```bash
docker save -o my_nginx.tar
```

## 2.7 dokcer load 加载压缩包为镜像

选项:

- -i 读取文件的名称 , 将压缩包加载为镜像
- -q 不输出加载信息

例如:

```bash
docker load -i my_nginx.tar
```

# 3. 容器命令

## 3.1 创建运行一个容器

```bash
docker run --name container_name -p host_port:container_port -d image_name
```

命令解读:

- docker run : 创建并运行一个 docker 容器

- --name : 给容器起一个名字, 比如叫做 mn

- -p : 将宿主机端口与容器端口映射, 冒号左侧是宿主机端口, 右侧是容器端口

- -d : 让容器后台运行

## 3.2 列出容器信息

默认只列出正在运行的容器

```bash
docker ps
```

使用`-a` 列出所有容器信息

## 3.3 查看日志

查看指定容器的日志

```bash
docker logs container_name
```

例如:

```bash
docker logs mn
```

添加 -f 可以持续查看日志

```bash
docker logs -f mn
```

## 3.4 停止容器

```bash
docker stop container_name
```

## 3.5 进入容器

```bash
docker exec -it mn bash
```

命令解读:

- docker exec : 进入容器内部, 执行一个命令
- -it : 给当前进入的容器创建一个标准输入、输出终端，允许我们与容器交互
- mn : 要进入容器的名称
- bash : 进入容器后执行的命令, bash 是 linux 终端交互命令

## 3.6 退出容器

```bash
exit
```

## 3.7 删除容器

先停止容器, 再删除容器

```bash
docker rm container_name
```

使用`-f`可以强制删除正在运行的容器, 不用先停止容器

```bash
docker rm -f container_name
```


Docker常用命令-1


# 1. 查看所有Nginx进程

```bash
[root@VM-4-9-centos conf.d]# ps -ef | grep nginx
root     15181     1  0 14:40 ?        00:00:00 nginx: master process /usr/sbin/nginx
nginx    15182 15181  0 14:40 ?        00:00:00 nginx: worker process
nginx    15183 15181  0 14:40 ?        00:00:00 nginx: worker process
root     17124 14573  0 14:54 pts/1    00:00:00 grep --color=auto nginx
```

# 2. 检查Nginx配置文件是否正确

## 2.1 nginx -t

只输出配置文件是否正确的提示信息, 不会预览配置文件

```bash
[root@VM-4-9-centos conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
```

## 2.2 nginx -T

输出配置文件的详细信息, 包括配置文件的路径, 配置文件的内容, 配置文件的语法是否正确

## 2.3 nginx -tq

只在配置文件语法错误时输出提示信息, 配置文件语法正确时不输出任何信息

# 3. 开启和关闭Nginx

## 3.1 nginx -s stop

快速停止, 不会等待当前请求处理完毕

## 3.2 nginx -s quit

优雅停止, 会等待当前请求处理完毕

## 3.3 nginx -s reload

重新加载配置文件, 不需要重新启动Nginx

# 4. 指定配置文件启动Nginx

```bash
nginx -c /home/my.conf
```



Nginx常用指令


# 1. JSX基础

`概念`: JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构
`作用`：在React中创建HTML结构（页面UI结构

`优势`：

1. 采用类似于HTML的语法，降低学习成本，会HTML就会JSX
2. 充分利用JS自身的可编程能力创建HTML结构

`注意`：JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的 @babel/plugin-transform-react-jsx
包，用来解析该语法

![jsx02-img](jsx02.png)

# 2. JSX中使用js表达式

`语法`: { JS 表达式 }

```jsx
const name = 'zjj';
<h1>你好，我叫{name}</h1>   //    <h1>你好,我叫zjj</h1>
```

`可以使用的表达式`

1. 字符串、数值、布尔值、null、undefined、object（ [] / {} ）
2. 1 + 2、'abc'.split('')、['a', 'b'].join('-')
3. fn()

`特别注意`

if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！

# 3. JSX列表渲染

`实现`：使用数组的map 方法

```jsx
// 来个列表
const songs = [
  { id: 1, name: '痴心绝对' },
  { id: 2, name: '像我这样的人' },
  { id: 3, name: '南山南' }
];

function App() {
  return (
    <div className="App">
      <ul>
        {
          songs.map(item => <li key={item.id}>{item.name}</li>)
        }
      </ul>
    </div>
  );
}

export default App;
```

# 4. JSX条件渲染

`作用`：根据是否满足条件生成HTML结构，比如Loading效果

`实现`：可以使用 三元运算符 或 逻辑与(&&)运算符

```jsx
// 来个布尔值
const flag = true;

function App() {
  return (
    <div className="App">
      {/* 条件渲染字符串 */}
      {flag ? 'react真有趣' : 'vue真有趣'}
      {/* 条件渲染标签/组件 */}
      {flag ? <span>this is span</span> : null}
    </div>
  )
}

export default App;
```

# 5. JSX样式处理

* 行内样式 - style

```jsx
function App() {
  return (
    <div className="App">
      <div style={{ color: 'red' }}>this is a div</div>
    </div>
  )
}

export default App;
```

* 行内样式 - style - 更优写法

```jsx
const styleObj = {
  color: red
};

function App() {
  return (
    <div className="App">
      <div style={styleObj}>this is a div</div>
    </div>
  )
}

export default App;
```

* 类名 - className（推荐）

```css
.title {
  font-size: 30px;
  color: blue;
}
```

* 类名 - className - 动态类名控制

```jsx
import './app.css';

const showTitle = true;

function App() {
  return (
    <div className="App">
      <div className={showTitle ? 'title' : ''}>this is a div</div>
    </div>
  )
}

export default App;
```

# 6. JSX注意事项

1. JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor
4. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现


JSX基础


# Next.js的页面预渲染

## 标准的React应用

假设在项目目录下有一个pages文件夹, 里面有一些页面文件, 比如index.js, about.js, contact.js等等.这些页面需要请求后台数据.

那么当用户访问这些页面时, 服务器端会先返回一个空的HTML文件和所有javascript代码, 然后这些javascript代码运行, 并向后端请求数据,
最后把数据渲染到页面上.

这样的话,
用户在访问页面时, 会先看到一个空白页面,
然后再看到页面内容.这样的体验不是很好.

## Next.js应用

Next.js不是在页面被发送到客户端后加载数据, 而是在服务器端就加载数据来预渲染页面和所有HTML文件.

这样当用户访问页面时, 客户端收到一个完全填充的HTML文件, 这样用户就不会看到一个空白页面了.

而且, Next.js还会在客户端运行javascript代码, 以便在页面加载后, 通过客户端渲染来更新页面.这被称为`水合(Hydration)`.

这样搜索引擎爬虫就可以抓取到页面的内容了, 做到了`搜索引擎优化(SEO, Search Engine Optimization)`.



Hi, I'm Ginga

Featured Posts

Docker常用命令-2

Docker常用命令-1

Nginx常用指令

JSX基础

Page Pre-rendering