2019年12月16日你要记录点什么？

[weblixin]

何如部署一个express项目，并通过域名或公网IP访问

1、clone一个express项目，进入项目并安装依赖

git clone https://github.com/weblixin/learn_serve.git
cd learn_serve
npm i

2、在服务器后台配置安全组，加入需要的端口号

key	value
规则方向	入方向
端口范围	3000/3000
授权对象	0.0.0.0/0

3、使用pm2启动项目

pm2 start bin/www -n learn

这样就能使用公网IP访问了

4、解析域名

key	value
主机记录	www
记录值	公网IP

访问配置好的域名就可以访问啦，这里配置的是www的

[koala-coding]

使用 docker 布置到服务器基本流程

1. 创建一个 node 项目

2. 首先在项目根目录下创建 .dockerignore 文件，把不需要打包进 Docker Image 里的文件进行过滤

   # /usr/src/nodejs/hello-docker/.dockerignore
   .git
   node_modules

3. 在项目的根目录中创建 Dockerfile文件

   部署 node 的时候，会有一个 Dockerfile 文件配置

   # /usr/src/nodejs/hello-docker/Dockerfile
   FROM node:10.0
   
   # 在容器中创建一个目录
   RUN mkdir -p /usr/src/nodejs/
   
   # 定位到容器的工作目录
   WORKDIR /usr/src/nodejs/
   
   # RUN/COPY 是分层的，package.json 提前，只要没修改，就不会重新安装包
   COPY package.json /usr/src/app/package.json
   RUN cd /usr/src/app/
   RUN npm i
   
   # 把当前目录下的所有文件拷贝到 Image 的 /usr/src/nodejs/ 目录下
   COPY . /usr/src/nodejs/
   
   EXPOSE 30010
   CMD npm start

   配置参数说明:

   • FROM：FROM 是构建镜像的基础源镜像，该 Image 文件继承官方的 node image
   • RUN：后面跟的是在容器中执行的命令
   • WORKDIR：容器的工作目录
   • COPY：拷贝文件至容器的工作目录下，.dockerignore 指定的文件不会拷贝
   • EXPOSE：将容器内的某个端口导出供外部访问
   • CMD：Dockerfile 执行写一个 CMD 否则后面的会被覆盖，CMD 后面的命令是容器每次启动执行的命令，多个命令之间可以使用 && 链接，例如 CMD git pull && npm start

4. 开发环节暂且告一段落，将带有Dockerfile提交到github 或 gitlab等。

   以我的服务器centos7为例，已安装好 Docker，我只需要将项目拿过来，build一下，run一下就可以了,请看详细步骤！

5. 首先检出代码：

   git clone https://github.com/yanbingbing/statusbar.git statusbar  

6. 进入目录构建：

   cd statusbar  
   docker build -t statusbarimg .  

   

   构建目标名称 statusbarimg，是一个镜像，可以通过 docker images 来列出所有的镜像。

   

7. 通过镜像 statusbarimg 创建一个容器并运行。

   docker run --name statusbarcontainer -d -p 80:8000 statusbarimg  

   说明：创建的容器名称是 statusbarcontainer，你可以理解为 pid，这个名称唯一，创建之后如果不删除会一直存在。-p 用来指定端口映射，将容器的端口8000映射到主机80`端口上，这样就可外部访问了。

8. 进入容器

   docker ls -a 查看所有容器，包括当前容器的id
   docker exec -it <id> statusbarcontainer  

9. 日志检查 查看运行日志，“c2891d477edf” 为容器 ID

   $ docker logs -f c2891d477edf
   
   > hello-docker@1.0.0 start /usr/src/nodejs/hello-docker
   > node app.js
   
   Running on http://localhost: 30010

   但是到了这里我还有个问题，那我真想看日志文件的时候，也不能每个容器进去看日志，好浪费时间啊！有没有什么更高的方式？

10. 如何动态设置环境变量 开发过 node 的应该都知道，在项目的根目录中有一个package.json 文件，

    还有一个问题就是，我们通过docker指定了环境的话，每次切换环境时候，都要关闭之前的容器吗？还是直接重启容器就行

11. Docker 如何实现进程守护

[sweetXiaoyan]

安装完nginx后，在nginx目录下nginx.conf添加配置

server {
    listen       80;
    server_name  test.xiaobo.com;

    root        /usr/share/nginx/html/test;

    error_log   /var/log/nginx/test-error.log;
    access_log  /var/log/nginx/test-access.log;

    #        deny all;
    index  index.php index.html index.htm;
}

这里除了在此处,还可以在conf.d文件中创建.conf文件,是因为在nginx.conf文件中有这样一句

  include /etc/nginx/conf.d/*.conf;

表示把这些文件都加载到nginx.conf中,这样做是为了防止多个域名都配置到nginx.conf中影响管理,所以可以拆分成不同的配置文件.

检查nginx的配置，和重启的方法

• -t 测试配置文件是否正确，在运行时需要重新加载配置的时候，此命令非常重要，用来检测所修改的配置文件是否有语法错误。
• -s reload 重新加载配置文件后重启
• -s stop 停止

遇到的问题，配置成功后重启，但是仍然没办法访问到，经过各种搜索，发现是防火墙问题

systemctl status firewalld  //检查防火墙
stop firewalld.service //关闭防火墙

[Lokep]

状态管理之 Flux、Redux、Vuex、MobX

本文是对 Flux、Redux、Vuex、MobX 几种常用状态管理模式的总结，偏向于概念层面，不涉及过多代码。

状态管理

什么是状态管理？

状态管理就是，把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化可以预测。

为什么需要状态管理？

状态共享

组件之间通常会有一些共享的状态，在 Vue 或者 React 中我们一般会将这部分状态提升至公共父组件的 props 中，由父组件来统一管理共享的状态，状态的改变也是由父组件执行并向下传递。这样会导致两个问题:

• 需要将共享的状态提升至公共的父组件，若无公共的父组件，往往需要自行构造
• 状态由父组件自上而下逐层传递，若组件层级过多，数据传递会变得很冗杂

变化跟踪

在应用调试过程中，可能会有跟踪状态变化过程的需求，方便对某些应用场景的复现和回溯。这时候就需要统一对状态进行管理，并遵循特定的约定去变更状态，从而让状态的变化可预测。

Store 模式

Store 模式是一种相对简单的状态管理模式，一般有以下约定：

• 状态存储在外部变量 store 里（也可以是全局变量）
• store 中的 state 用于存储数据，由 store 实例维护
• store 中的 actions 封装了改变 state 的逻辑

流程图如下：

如果对 state 的变更均通过 actions，那么实现记录变更、保存快照、历史回滚就会很简单，但是 Store 模式并没有对此进行强制约束。

Flux

Flux 是一种架构思想，类似于 MVC 、MVVM 等。

Flux 的组成

Flux 把一个应用分成四部分:

• View：视图层

• Action

  ：动作，即数据改变的消息对象（可通过事件触发、测试用例触发等）

  • Store 的改变只能通过 Action
  • 具体 Action 的处理逻辑一般放在 Store 里
  • Action 对象包含 type （类型）与 payload （传递参数）

• Dispatcher：派发器，接收 Actions ，发给所有的 Store

• Store：数据层，存放应用状态与更新状态的方法，一旦发生变动，就提醒 Views 更新页面

Notice:

• Action 本质上是一个纯声明式的数据结构，仅提供对事件的描述，不提供事件的具体逻辑。通常会给 Action 的 type 属性赋值一个大写的字符串，表明是常量，增强可维护性，例如:

{
  type: 'ADD_USER',
  payload: {
    name: 'user_name'                              
  }
}
复制代码

Flux 的特点

• 单向数据流。视图事件或者外部测试用例发出 Action ，经由 Dispatcher 派发给 Store ，Store 会触发相应的方法更新数据、更新视图
• Store 可以有多个
• Store 不仅存放数据，还封装了处理数据的方法

Redux

Redux 的组成

• Store

  ：存储应用的状态 --

  state

  以及用于触发

  state

  更新的

  dispatch

  方法等，

  整个应用仅有单一的 Store

  。Store 中提供了几个管理

  state

  的 API：

  • store.getState()：获取当前 state
  • store.dispatch(action)：触发 state 改变（唯一途径）
  • store.subscribe(listener)：设置 state 变化的监听函数（若把视图更新函数作为 listener 传入，则可触发视图自动渲染）

• Action

  ：同 Flux ，Action 是用于更新 state 的消息对象，由 View 发出

  • 有专门生成 Action 的 Action Creator，其本质上是一个返回 Action 对象的函数

• Reducer：是一个根据 action.type 更新 state 并返回 nextState 替换原来的 state 的同步的纯函数（对于相同的参数返回相同的返回结果，不修改参数，不依赖外部变量）。即通过应用状态与 Action 推导出新的 state：(previousState, action) => newState。Reducer 返回一个新的 state

整体流程为：Action Creator => action => store.dispatch(action) => reducer(state, action) => state = nextState。流程图如下：

Middleware

Redux 还支持中间件，用于管理异步数据流。

Redux 的 Middleware 是对 store.dispatch() 进行了封装之后的方法，可以使 dispatch 传递 action 以外的函数或者 promise；通过 applyMiddleware 方法应用中间件。（middleware 链中的最后一个 middleware 开始 dispatch action 时，这个 action 必须是一个普通对象）

常用库：redux-actions, redux-thunk, redux-promise 。

const store = createStore(
  reducer,
  // 依次执行
  applyMiddleware(thunk, promise, logger)
)
复制代码

Redux 的特点

• 单向数据流。View 发出 Action (store.dispatch(action))，Store 调用 Reducer 计算出新的 state ，若 state 产生变化，则调用监听函数重新渲染 View （store.subscribe(render)）
• 单一数据源，只有一个 Store
• state 是只读的，每次状态更新之后只能返回一个新的 state
• 没有 Dispatcher ，而是在 Store 中集成了 dispatch 方法，store.dispatch() 是 View 发出 Action 的唯一途径
• 支持使用中间件（Middleware）管理异步数据流

Vuex

Vuex 是 Vue 的状态管理模式。

Vuex 的核心概念

• Store：Vuex 采用单一状态树，每个应用仅有一个 Store 实例，在该实例下包含了 state, actions, mutations, getters, modules

• State

  ：Vuex 为

  单一数据源

  • 可以通过 mapState 辅助函数将 state 作为计算属性访问，或者将通过 Store 将 state 注入全局之后使用 this.$store.state 访问
  • State 更新视图是通过 vue 的双向绑定机制实现的

• Getter：Getter 的作用与 filters 有一些相似，可以将 State 进行过滤后输出

• Mutation：Mutaion 是 vuex 中改变 State 的唯一途径（严格模式下），并且只能是同步操作。Vuex 中通过 store.commit() 调用 Mutation

• Action

  ：一些对 State 的

  异步操作

  可以放在 Action 中，并通过在 Action 提交 Mutaion 变更状态

  • Action 通过 store.dispatch() 方法触发
  • 可以通过 mapActions 辅助函数将 vue 组件的 methods 映射成 store.dispatch 调用（需要先在根节点注入 store）

• Module：当 Store 对象过于庞大时，可根据具体的业务需求分为多个 Module ，每个 Module 都具有自己的 state 、mutation 、action 、getter

![img](data:image/svg+xml;utf8,<?xml version="1.0"?>)

Vuex 的特点：

• 单向数据流。View 通过 store.dispatch() 调用 Action ，在 Action 执行完异步操作之后通过 store.commit() 调用 Mutation 更新 State ，通过 vue 的响应式机制进行视图更新
• 单一数据源，和 Redux 一样全局只有一个 Store 实例
• 只能应用于 Vue

MobX

MobX 背后的哲学是:

任何源自应用状态的东西都应该自动地获得。

意思就是，当状态改变时，所有应用到状态的地方都会自动更新。

MobX 的核心概念

• State：驱动应用的数据
• Computed values：计算值。如果你想创建一个基于当前状态的值时，请使用 computed
• Reactions：反应，当状态改变时自动发生
• Actions：动作，用于改变 State
• 依赖收集（autoRun）：MobX 中的数据以来基于观察者模式，通过 autoRun 方法添加观察者

![img](data:image/svg+xml;utf8,<?xml version="1.0"?>)

举个栗子：

const obj = observable({
  a: 1,
  b: 2
})

autoRun(() => {
  console.log(obj.a)
})

obj.b = 3 // 什么都没有发生
obj.a = 2 // observe 函数的回调触发了，控制台输出：2
复制代码

MobX 的特点

• 数据流流动不自然，只有用到的数据才会引发绑定，局部精确更新（细粒度控制）
• 没有时间回溯能力，因为数据只有一份引用
• 基于面向对象
• 往往是多个 Store
• 代码侵入性小
• 简单可扩展
• 大型项目使用 MobX 会使得代码难以维护

总结

• Flux 、Redux 、Vuex 均为单向数据流
• Redux 和 Vuex 是基于 Flux 的，Redux 较为泛用，Vuex 只能用于 vue
• Flux 与 MobX 可以有多个 Store ，Redux 、Vuex 全局仅有一个 Store（单状态树）
• Redux 、Vuex 适用于大型项目的状态管理，MobX 在大型项目中应用会使代码可维护性变差
• Redux 中引入了中间件，主要解决异步带来的副作用，可通过约定完成许多复杂工作
• MobX 是状态管理库中代码侵入性最小的之一，具有细粒度控制、简单可扩展等优势，但是没有时间回溯能力，一般适合应用于中小型项目中

作者：jeff_ 链接：https://juejin.im/post/5de77800518825125503ec27 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。