Open weblixin opened 4 years ago
创建一个 node 项目
首先在项目根目录下创建 .dockerignore 文件,把不需要打包进 Docker Image 里的文件进行过滤
# /usr/src/nodejs/hello-docker/.dockerignore
.git
node_modules
在项目的根目录中创建 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
配置参数说明:
开发环节暂且告一段落,将带有Dockerfile提交到github 或 gitlab等。
以我的服务器centos7为例,已安装好 Docker,我只需要将项目拿过来,build一下,run一下就可以了,请看详细步骤!
首先检出代码:
git clone https://github.com/yanbingbing/statusbar.git statusbar
进入目录构建:
cd statusbar
docker build -t statusbarimg .
构建目标名称 statusbarimg,是一个镜像,可以通过 docker images 来列出所有的镜像。
通过镜像 statusbarimg
创建一个容器并运行。
docker run --name statusbarcontainer -d -p 80:8000 statusbarimg
说明:创建的容器名称是 statusbarcontainer
,你可以理解为 pid
,这个名称唯一,创建之后如果不删除会一直存在。-p 用来指定端口映射,将容器的端口
8000映射到主机
80`端口上,这样就可外部访问了。
进入容器
docker ls -a 查看所有容器,包括当前容器的id
docker exec -it <id> statusbarcontainer
日志检查 查看运行日志,“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
但是到了这里我还有个问题,那我真想看日志文件的时候,也不能每个容器进去看日志,好浪费时间啊!有没有什么更高的方式?
如何动态设置环境变量 开发过 node 的应该都知道,在项目的根目录中有一个package.json 文件,
还有一个问题就是,我们通过docker指定了环境的话,每次切换环境时候,都要关闭之前的容器吗?还是直接重启容器就行
Docker 如何实现进程守护
安装完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
中影响管理,所以可以拆分成不同的配置文件.
遇到的问题,配置成功后重启,但是仍然没办法访问到,经过各种搜索,发现是防火墙问题
systemctl status firewalld //检查防火墙
stop firewalld.service //关闭防火墙
Flux
、Redux
、Vuex
、MobX
本文是对 Flux、Redux、Vuex、MobX 几种常用状态管理模式的总结,偏向于概念层面,不涉及过多代码。
状态管理就是,把组件之间需要共享的状态抽取出来,遵循特定的约定,统一来管理,让状态的变化可以预测。
组件之间通常会有一些共享的状态,在 Vue 或者 React 中我们一般会将这部分状态提升至公共父组件的 props
中,由父组件来统一管理共享的状态,状态的改变也是由父组件执行并向下传递。这样会导致两个问题:
在应用调试过程中,可能会有跟踪状态变化过程的需求,方便对某些应用场景的复现和回溯。这时候就需要统一对状态进行管理,并遵循特定的约定去变更状态,从而让状态的变化可预测。
Store 模式是一种相对简单的状态管理模式,一般有以下约定:
store
里(也可以是全局变量)store
中的 state
用于存储数据,由 store
实例维护store
中的 actions
封装了改变 state
的逻辑流程图如下:
如果对 state 的变更均通过 actions,那么实现记录变更、保存快照、历史回滚就会很简单,但是 Store 模式并没有对此进行强制约束。
Flux 是一种架构思想,类似于 MVC 、MVVM 等。
Flux 把一个应用分成四部分:
View:视图层
Action
:动作,即数据改变的消息对象(可通过事件触发、测试用例触发等)
Dispatcher:派发器,接收 Actions ,发给所有的 Store
Store:数据层,存放应用状态与更新状态的方法,一旦发生变动,就提醒 Views 更新页面
Notice:
type
属性赋值一个大写的字符串,表明是常量,增强可维护性,例如:{
type: 'ADD_USER',
payload: {
name: 'user_name'
}
}
复制代码
Store
:存储应用的状态 --
state
以及用于触发
state
更新的
dispatch
方法等,
整个应用仅有单一的 Store
。Store 中提供了几个管理
state
的 API:
store.getState()
:获取当前 statestore.dispatch(action)
:触发 state
改变(唯一途径)store.subscribe(listener)
:设置 state
变化的监听函数(若把视图更新函数作为 listener 传入,则可触发视图自动渲染)Action
:同 Flux ,Action 是用于更新 state 的消息对象,由 View 发出
Reducer:是一个根据 action.type
更新 state
并返回 nextState
替换原来的 state
的同步的纯函数(对于相同的参数返回相同的返回结果,不修改参数,不依赖外部变量)。即通过应用状态与 Action 推导出新的 state:(previousState, action) => newState
。Reducer 返回一个新的 state
整体流程为:Action Creator => action
=> store.dispatch(action)
=> reducer(state, action)
=> state = nextState
。流程图如下:
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)
)
复制代码
store.dispatch(action)
),Store 调用 Reducer 计算出新的 state ,若 state 产生变化,则调用监听函数重新渲染 View (store.subscribe(render)
)store.dispatch()
是 View 发出 Action 的唯一途径Vuex 是 Vue 的状态管理模式。
Store:Vuex 采用单一状态树,每个应用仅有一个 Store 实例,在该实例下包含了 state, actions, mutations, getters, modules
State
:Vuex 为
单一数据源
mapState
辅助函数将 state 作为计算属性访问,或者将通过 Store 将 state 注入全局之后使用 this.$store.state
访问Getter:Getter 的作用与 filters 有一些相似,可以将 State 进行过滤后输出
Mutation:Mutaion 是 vuex 中改变 State 的唯一途径(严格模式下),并且只能是同步操作。Vuex 中通过 store.commit()
调用 Mutation
Action
:一些对 State 的
异步操作
可以放在 Action 中,并通过在 Action 提交 Mutaion 变更状态
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"?>)
store.dispatch()
调用 Action ,在 Action 执行完异步操作之后通过 store.commit()
调用 Mutation 更新 State ,通过 vue 的响应式机制进行视图更新MobX 背后的哲学是:
任何源自应用状态的东西都应该自动地获得。
意思就是,当状态改变时,所有应用到状态的地方都会自动更新。
![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
复制代码
作者:jeff_ 链接:https://juejin.im/post/5de77800518825125503ec27 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
何如部署一个express项目,并通过域名或公网IP访问
1、clone一个express项目,进入项目并安装依赖
2、在服务器后台配置安全组,加入需要的端口号
3、使用pm2启动项目
这样就能使用公网IP访问了
4、解析域名
访问配置好的域名就可以访问啦,这里配置的是www的