DingMing

丁大铭的个人空间,用来分享一些前端小技巧,默默成长吧,哈哈

nuxt使用Ts小结

开始

这一段时间在公司主导新搭建了一个 nuxt 项目。为了紧跟时代潮流,所以想使用 vue3 的 component-api 那一套。
结果调研发现很尴尬,目前的 nuxt.js 还没有升级到 vue3,但是若要使用可以引入 component-api 的 npm 仓库,强行使用。这真是鸡肋到极,所以放弃使用 component-api。

但是为了创新整理活出来,决定使用 Ts 进行开发。
毕竟是第一次使用 nuxt.js,所以启动起来还是比较举步维艰的。脚手架一把锁很简单,但是想优化好,减少项目体积(上优化) 就会麻烦一些。

Read More

当Swagger遇上YApi,瞬间高大上了!

1.YApi简介

YApi是高效、易用、功能强大的API管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务。
YApi在Github上已累计获得了18K+Star,具有优秀的交互体验,YApi不仅提供了常用的接口管理功能,
还提供了权限管理、Mock数据、Swagger数据导入等功能,总之功能很强大!

2.背景

我们公司的后端api接口文档一直使用的是Swagger进行开发的,Swagger开发对后端同学十分友好,方便生成。但是对于前端同学mock数据,同步开发存在着很大的困扰。

研究发现在我们的YApi上可以实时的同步Swagger数据,这样对于前后端同学开发都十分的方便。接下来我来分享下操作步骤

Read More

统一报错遮罩方案

一、背景

项目中必然存在报错的问题,我们需要对报错进行处理,所以需要进行统一的封装。

一下为nuxt.js项目为例: 目前支持 刷新和返回首页, 可进行新增配置

二、配置

在 mall-marketing/components/layouts/mask 目录下进行了封装

Read More

NUXT.JS原理简述

1.那服务器端渲染到底有什么好处呢?

主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目,就没必要使用这个框架了。

2.什么是SSR?

SPA虽然给服务器减轻了压力,但是也是有缺点的:

Read More

Sentry的安装与部署

1.Sentry介绍

sentry是一个实时事件日志记录和汇集的平台。其专注于错误监控以及提取一切事后处理所需信息而不依赖于麻烦的用户反馈。它分为客户端和服务端,客户端(目前客户端有Python, PHP,C#, Ruby等多种语言)就嵌入在你的应用程序中间,程序出现异常就向服务端发送消息,服务端将消息记录到数据库中并提供一个web页方便查看。Sentry由python编写,源码开放,性能卓越,易于扩展,目前著名的用户有Disqus, Path, mozilla, Pinterest等。

2.服务器配置要求

  • Docker 17.05.0+
  • Compose 1.23.0+
  • 最小需要 2400MB RAM,为了后续拓展建议使用8G内存

    3.安装docker、docker-compose

docker-compose 常用命令

1
2
3
4
5
6
7
8
9
10
11
1.docker-compose的使用非常类似于docker命令的使用,但是需要注意的是大部分的compose命令都需要到docker-compose.yml文件所在的目录下才能执行。
2.【Linux命令】docker-compose up【命令解释】 命令聚合每个容器的输出,命令退出时,所有容器都将停止。
3.【Linux命令】docker-compose up -d【命令解释】 在后台启动容器并使它们保持运行。
4.【Linux命令】docker-compose logs -f【命令解释】 查看该容器的启动的日志打印(日志从头打印)。
5.【Linux命令】docker logs -f container_id【命令解释】 查看某一容器的启动的日志打印(日志从头打印)。
6.【Linux命令】docker logs -f --tail 数量词 container_id【命令解释】 查看某一容器的启动的日志打印(查看最后n条日志打印)。 例:docker logs -f --tail 50 44b
7.【Linux命令】docker-compose stop【命令解释】 停止compose服务。
8.【Linux命令】docker-compose restart【命令解释】 重启compose服务。
9.【Linux命令】docker-compose kill【命令解释】 kill compose服务。
10.【Linux命令】docker-compose ps【命令解释】查看compose服务状态。
11.【Linux命令】docker-compose rm【命令解释】删除compose服务。

Docker在2016年很早的时候就明确了将会在企业级方面重点跟进。而在短短的一年时间之内推出的1.12和1.13的版本在功能上确实是很大的进步。而在2017年的3月1号之后,Docker的版本命名开始发生变化,同时将CE版本和EE版本进行分开了,EE是企业版,CE是社区版,如果直接使用

1
2
yum install -y docker-engine 或者
yum install -y docker 安装的都是老版本docker

我们采用的是安装Docker CE版:

3.1卸载旧版本Docker

1
yum remove docker  docker-common  docker-selinux  docker-engine

3.2安装依赖

1、安装依赖包
1
yum install -y yum-utils device-mapper-persistent-data lvm2
2、添加稳定的源
1
yum-config-manager     --add-repo     https://download.docker.com/linux/centos/docker-ce.repo
3、可选操作:允许拓展最新的不稳定的repository
1
yum-config-manager --enable docker-ce-edge

3.3安装docker-ce

1、更新yum
1
yum install makecache fast
2、安装docker-ce
1
yum -y install docker-ce
3、启动docker
1
sudo  systemctl start docker
4、测试docker

查看docker版本,docker至少是17.05.0以上的版本,如果我没有指定版本默认安装最新的则肯定满足条件

docker --version
4、继续安装依赖,需要用到git,docker-compose,pip等组件
1
sudo yum install epel-releasesudo yum install -y python-pipsudo yum install docker-compose

5、docker-compose 的版本必须大于 1.23.0+

可以安装指定版本

1
2
sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

1.24.0

4. 安装sentry (当前sentry版本v10)

因为sentry本身就是开源的,代码在github上,可以上git直接拉取

github地址:https://github.com/getsentry/onpremise

完成之后,执行如下命令:

1
2
3
 
docker-compose build --pull --force-rm web
docker-compose build --force-rm

发现build成功

  • 生成秘钥

进入sentry文件夹,将默认的config.example.yml和sentry.conf.example.py重命名为config.yml和sentry.conf.py。执行如下命令

1
2
3
 
cp config.example.yml config.yml
cp sentry.conf.example.py sentry.conf.py

执行如下命令生成秘钥

1
docker-compose run --rm web config generate-secret-key

将生成的秘钥添加到config.yml的system.secret-key字段上

  • 进行 Web 服务迁移

执行如下命令开始服务迁移

1
docker-compose run --rm web upgrade

正常情况下是会出现输入账号密码的步骤的,如果不可以请详细查阅这个 https://github.com/getsentry/onpremise/issues/147

执行以下命令

1
docker-compose run --rm web createuser
  • 运行 sentry
1
docker-compose up -d
  • 注意:错误解决
    执行之后发现如下问题,判断可能是docker没有启动的问题

执行如下命令

1
2
service docker status  # 查看docker服务是否启动
systemctl start docker # 启动docker
  • 部署Sentry成功

打开浏览器输入ip:9000,如下图说明安装成功:

  • 修改邮箱设置

打开sentry/config.yml文件,编辑如下信息:

具体配置查看这里 https://docs.sentry.io/server/config/#mail

1
2
3
4
5
6
7
8
9
10
11
 mail.host: 'smtp.dc.17zuoye.net'
mail.port: 25
mail.username: 'no-reply@17zuoye.com' //不需要密码
mail.use-tls: false //关闭 TLS
mail.from: 'no-reply@17zuoye.com'
mail.list-namespace: 'zuoye.com'



注意要将服务器防火墙与服务器安全组的邮箱端口放开,
注意:如果使用Sentry10的话 使用tsl邮箱端口必须为567不然会报错
  • 重新执行以下命令
1
2
3
4
docker-compose build --pull --force-rm web
docker-compose build --force-rm
docker-compose run --rm web upgrade
docker-compose up -d // 若此步无响应可执行 docker-compose stop 在执行

可以看到邮箱信息已经修改掉了,下面我们发送一封测试邮件,点击下方的Test Settings

5.Sentry使用