
# 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



前端项目域名是 http://a.xxxx.com, 后端的接口域名是 http://b.yyy.com:8080/api，然后后端接口没有设置跨域相关的响应设置头，因此就接口和我们
域名就会存在跨域的情况，因此我们可以使用 nginx服务器来配置一下；

在后端的 nginx 配置文件中添加如下配置：

# 1. 一般配置

```nginx
server {
  listen 8080;
  server_name b.yyy.com;
  
  location /api {
    # 前端项目的ip地址
    add_header Access-Control-Allow-Origin http://a.xxxx.com:3000;
    # 允许的请求方法
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;
    ### 其他设置
  }
}
```

# 2. 通配符配置

```nginx
server {
  listen 8080;
  server_name b.yyy.com;
  
  location /api {
    # 允许所有的ip
    add_header Access-Control-Allow-Origin *;
    # 允许的请求方法
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;
    ### 其他设置
  }
}
```

Nginx解决跨域


# 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. Add page metadata

使用Head组件加入页面元数据，如title、description、keywords等。

```typescript jsx
import Head from 'next/head';
import React from "react";

const MyPage: React.FC = () => {
  return (
    <>
      <Head>
        <title>My Page</title>
        <meta name="description" content="My Page Description"/>
      </Head>
      <h1>My Page</h1>
    </>
  );
};
```

# 2. Use environment variables

使用环境变量，如API地址、Google Analytics ID等。

# 3. Add a favicon

添加favicon。

# 4. Test your application

测试yarn build 和 start。

Deployment Steps And Considerations


# 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 中，一个 page（页面） 就是一个从 .js、jsx、.ts 或 .tsx 文件导出（export）的 React 组件 ，这些文件存放在 pages 目录下。每个
page（页面）都使用其文件名作为路由（route）。

`示例:`
如果你创建了一个命名为 `pages/about.tsx` 的文件并导出（export）一个如下所示的 React 组件，则可以通过 /about 路径进行访问。

```typescript jsx
import React from "react";

function About() {
  return <div>About</div>
};

export default About;
```

![7ea0e5ece21f460dade7d21d512cf531.png](7ea0e5ece21f460dade7d21d512cf531.png)

## 默认路由

index.tsx总是被当作它所在文件夹的默认路由界面.

`示例:`

在pages目录下新建一个about文件夹, 里面创建一个index.tsx

index.tsx

```typescript jsx
import React from "react";

const About: React.FC = () => (
  <div>
    <h1>The About Page</h1>
  </div>
);

export default About;
```

![5e46bf2aa1e64f59aad08a080eaa27ae.png](5e46bf2aa1e64f59aad08a080eaa27ae.png)

## 具有动态路由的页面

Next.js 支持具有动态路由的 pages（页面）。

`示例:`

如果你创建了一个命名为 pages/portfolio/[id].tsx 的文件，那么就可以通过
portfolio/1、portfolio/2 等类似的路径进行访问。

[id].tsx

```typescript jsx
import React from "react";
import { useRouter } from "next/router";

const PortfolioProjectPage: React.FC = () => {
  const router = useRouter();
  // query为路径参数, 类型为Object, 所以使用es6的解构语法
  const { id } = router.query;

  return (
    <div>
      <h2>The Portfolio Project Page</h2>
      <p>id = { id }</p>
    </div>
  );
};

export default PortfolioProjectPage;
```

![6b9985e3d0e94f5dad50388cf38eec5c.png](6b9985e3d0e94f5dad50388cf38eec5c.png)

![39a408c36f8e46fbbe4ec5c42f45fbcd.png](39a408c36f8e46fbbe4ec5c42f45fbcd.png)

## 多个嵌套的动态路由字段

可以使用[...whateverNameYouWant].tsx获取所有嵌套的路由字段.

创建一个命名为 pages/blog/[...slug].tsx 的文件

访问localhost:3000/blog/abc/123时, slug会被赋值成一个数组, 这个数组内含所有路由的值

`slug = [abc, 123]`

```typescript jsx
import React from "react";
import { useRouter } from "next/router";

const BlogPostPage: React.FC = () => {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>The Blog Post Page</h1>
      <p>{ slug }</p>
    </div>
  )
};

export default BlogPostPage;
```

![d5e1ea020e494318abd06f5532449f12.png](d5e1ea020e494318abd06f5532449f12.png)

## 导航(Navigation)

### 组件式

可以使用next/link的Link组件, 与react-router使用方法一样

href属性值为要导航到的路由

```typescript jsx
import React from "react";
import Link from "next/link";

const ClientsPage: React.FC = () => {
  const clients = [
    { id: "max", name: "Maximilian" },
    { id: "manu", name: "Manuel" },
  ];

  return (
    <div>
      <h1>The Clients Page</h1>
      <ul>
        {
          clients.map(
            ({ id, name }) =>
              <li>
                {/*
                 href可以使用模板字符串, 
                 也可以使用对象赋值, pathname: 路径名, query: 参数值
                 此段代码可以写为:
                 <Link href={ `/clients/${ id }` }>
                 { name }
                 </Link>
                 */ }
                <Link href={ {
                  pathname: "/clients/[id]",
                  query: { id: id }
                } }>
                  { name }
                </Link>
              </li>
          )
        }
      </ul>
    </div>
  );
};

export default ClientsPage;
```

### 编程式

导入next/router的useRouter

使用push方法或者replace方法, 参数为要导航到的路由

1. push: 可以回退页面
2. replace: 直接取代, 不可以回退页面

```typescript jsx
import React from "react";
import { useRouter } from "next/router";

const ClientsProjectPage: React.FC = () => {
  const router = useRouter();
  const loadProject = () => {
    router.push(
      /*
       同上, 这里也可以使用字符串
       例如:
       "/clients/max/projectA"
       * */
      {
        pathname: "/clients/[id]/[clientProjectId]",
        query: { id: 'max', clientProjectId: "projectA" }
      });
  }

  return (
    <div>
      <h2>The projects of a Given Client</h2>
      <button onClick={ loadProject }>
        Load Project A
      </button>
    </div>
  );
};

export default ClientsProjectPage;
```



File Based Routing


NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an
extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though
it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

## File-based Routing

![Create routes via your file + folder structure](file-based-routing.png)

... More content ...

Getting Started with NextJS


# 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)`.



All Posts