# vanblog部署上线
> vanblog支持多种部署方式，各有优劣，请结合实际情况部署
> 
> 反代部署更适合于当vanblog和其他应用（如宝塔面板内置的nginx）发生冲突时采用
> 
> 本文介绍docker环境下的nginx部署流程、配置及踩坑经验




## 前置知识

面向小白，本文会顺带说明基本的
- linux指令
- dokcer/docker-compose基本操作
- nginx反代配置

## 一、部署vanblog
可以按照官网文档[一键部署](https://vanblog.mereith.com/guide/get-started.html#%E9%83%A8%E7%BD%B2%E6%96%B9%E5%BC%8F)，记住端口！

## 二、拉取nginx镜像
输入docker命令，拉取nginx镜像
```
docker pull nginx
```
拉取完成之后查看镜像
```
docker images
```
![](http://kaifariji.top/static/img/1c16cb4b047420836f50f4bc5f9b4041.]QBL$J{_SEC%28346OX92E3D4.png)
确保镜像目录存在 nginx

## 三、准备文件夹并准备配置

#### 首先推荐在linux根目录下创建夹

- 创建 nginx 目录在根目录下，也方便后期查找并使用

```
mkdir /nginx
```

- 再于nginx目录下创建两个目录
    
    - log 用于存放日志

    - conf 存放nginx配置
```
mkdir /nginx/log /nginx/conf
```

#### docker编排文件

```
vim /nginx/docker-compose.yml
```
不会vim编辑器可以换成

`nano /nginx/docker-compose.yml`

nano 编辑器学习成本更低，快速上手

yml文件配置如下：

```
   version: '3'                                                                        services:
      nginx:
         image: nginx
         container_name: nginx
         ports:
           - "80:80"
           - "443:443"
         network_mode: "host"
         restart: always
         volumes:
           - ./conf/nginx.conf:/etc/nginx/nginx.conf
           - ./log:/var/log/nginx
           
```
请注意，yml文件格式非常严格，如果启动失败，请参考以下文件格式

 - 依靠缩进判断配置选项的父子级
 
 - 同级选项缩进必须相同
 
 - 不允许使用tab键缩进

 - 冒号后面使用一个空格

#### nginx配置文件

```
vim /nginx/conf/nginx.conf
```
配置如下
```
worker_processes  1;
events {
        worker_connections  1024;
}
http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
        server {
                gzip on;
                gzip_min_length 1k;
                gzip_comp_level 9;
                gzip_types text/plain application/javascript
                        application/x-javascript text/css application/xml text/javascript
                        application/x-httpd-php image/jpeg image/gif image/png;
                gzip_vary on;
                gzip_disable "MSIE [1-6]\.";
                listen 80;
                server_name xxxxx.com;# 这里写访问博客时输入的域名
                proxy_buffers 8 32k;
                proxy_buffer_size 64k;

                location / {
                        proxy_pass http://127.0.0.1:<PORT>;# <PORT>修改成自己的端口号
                        proxy_set_header X-Real-IP
                                $remote_addr;
                        proxy_set_header
                                X-Forwarded-Proto $scheme;
                        proxy_set_header Upgrade
                                $http_upgrade;
                }
        }
}
```
## 三、启动容器
正常启动用来测试
```
docker-compose up
```
后台启动
```
docker-compose up -d
```

基于docker的nginx反代来部署vanblog

# MarkDown 
  > 滴，打卡第一篇博文  
  

   ![mmexport1672228315423.jpg](http://kaifariji.top/static/img/e08ac622859efde8e47995b63602e191.mmexport1672228315423.jpg)
  
  ---
   1. 简介
   2. 标题
   3. 横线
   4. 缩进
   5. 字体颜色
   6. 加粗 
   7. 区块
 
   
   ---
   
   
   
## MarkDown 简介
> MarkDown 多用于博文.公众号文章.github项目介绍，是html的子集。
> 文件以.md结尾,下文简称md

## 标题

尽管标题标签有三种，但实用的记住 `# 标题` 即可
   
`# 一级` 
 
`## 二级`

以此类推支持1~6级标题

## 横线
> md效果简洁朴素，在个性化上有先天不足
> 可以在使用typora编辑器时，改变主题达到美化效果

横线 `---` 在编辑器中输入三个以上 `-` 即可得到一条横线


## 缩进
> 文本缩进是一种很常见的文本展示效果，却是md文件编辑时的一大痛点
> 事实上md文件的布局并不算自由和美观

  $\qquad$ 最常用缩进 `$\qquad`
  $\qquad$ 这一段文本已采用缩进，但在复制时有可能将隐藏的`$\qquad`显示出来
 $\qquad$ 如果采用html标签来达成缩进，写法过于繁冗，反而和md的简洁之道相悖，即使是`$\qquad$`也不简洁，因此采取html实体符号` &nbsp`更好，但后面依旧无法衔接其他语法如标题`#`和列表`- `
 


 
 ## 字体颜色
 > 字体颜色`$\color{red} {文字} $`
 
 效果如下
 $\color{red} {文字} $
 可以使用十六进制表达 如`#f90`
 $\color{#f90} {文字} $
 
 ## 加粗
 > 只需要记住 `**文字**`

不加粗
**加粗**

## 区块
>` > 区块`支持多级区块
>> 二级区块
>>> 三级区块
>>> >>>>>>  以此类推可以无限增加 `>` 符号

----
**常用md标签介绍完毕**

-----

MarkDown 速通

# vim操作
> 备忘



## 复制 (Yanking)
想要复制文本，将光标放到你想要的地方，然后参考下面的命令按键y。下面是一些有用的命令：

yy - 复制当前行，包括换行符
3yy - 复制从光标所在的当前行开始的三行文本
y$ - 复制从光标位置到行尾的文本
y^ - 复制从光标位置到行首的文本
yw - 复制到下一个词的开头
yiw - 复制当前词
y% - 复制匹配符号范围内容。默认支持的符号对是(),{},[].这个在复制括号内内容时，很有用处。
## 剪切 (Deleting)
在正常模式下，d按键是用来剪切文本的。把光标移动到想要的位置，参考下面的命令按d按键。下面是一些有帮助的命令：

dd - 剪切当前行，包括换行符
3dd - 剪切从光标位置所在行开始的 3 行文本
d$ - 剪切从光标位置到行尾的内容
这些命令同时适用于删除的场景。例如，dw可以删除到下一个词的开头。而d^可以删除光标位置到行首的内容。

## 粘贴 (Putting)
想要粘贴被剪切的内容，先将光标移动到想要的位置，然后按p键可以将内容粘贴到当前光标后面，或者按P按键可以粘贴到当前光标前面。

vim操作

# 获取dom宽高坐标
> 备忘



# js获取文档高度
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

# Element.getBoundingClientRect()
返回值是一个 DOMRect 对象，是包含整个元素的最小矩形（包括 padding 和 border-width）。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。
![](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect/element-box-diagram.png)
如果你需要获得边界矩形相对于整个网页左上角的位置，则可以将当前的滚动位置（可通过 window.scrollX 和 window.scrollY 获得）添加到 top 和 left 属性上。获得的边界矩形与当前的滚动位置无关。

获取dom宽高坐标

# 跨域问题速通

 > 浏览器访问基于同源策略(cors),同源策略是跨域出现问题的原因








## 什么是同源策略
 
   同源策略是**http协议的一部分**，属于安全问题相关的规范协议
   **满足三点即为同源**：
            ```
     1.协议相同(http与https不同)
     2.主机域名相同(baidu.com与jd.com不同)
     3.端口号相同(http的80端口与https的443端口不同)
             ```
   反之为跨域，在客户端访问服务端之前会发出`预检申请`，查看服务端是否允许跨域访问，
   若不允许则该请求失效
   
 ##  解决办法
 #### 1. 后端语言直接设置
  如 
       
  node 中的 `res.writeHead(200,{ "access-control-allow-origin":"*"})`
      
  php中的`header()`函数
      加入代码 ` header("Access-Control-Allow-Origin: *");`
      响应表头即出现`Access-Control-Allow-Origin: *`     
   
       
       
   ![image.png](http://43.226.40.171/static/img/cfa68965946b4da3f23fb4e98ca22ae9.image.png)
          
####  2. nginx代理转发
     
   同源策略只能限制浏览器发送的请求，不限制服务端，可以使用服务器代理
        
   修改nginx.conf的配置
        ```
          http {
            server {
           // xxx是具体的接口
             location /xxx/ {
                 proxy_pass url // url是目标的地址
                            }   
                   }
                }
        ```    
 ####  3. jsonp格式
  
  
  利用`script`可以引入其他src地址的特性
         
         ```
            //创建一个 script  元素
            var elem= document.createElement("script")
            elem.src="http://localhost:1111"//设置连接地址
            document.body.appendChild(elem)// 在body内生成
            //最后发现网络请求中返回了 接口数据
         
         ```