手把手教你 安装Sentry + 部署Vue

2,937 阅读2分钟

1 服务器安装 docker

使用国内源安装

  curl -sSL https://get.daocloud.io/docker | sh  

2 服务器安装 docker-compose

$ sudo curl -L "https://github.com/docker/compose/releases/download/1.26.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

将可执行权限应用于二进制文件:

$ sudo curl -L "https://github.com/docker/compose/releases/download/1.26.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

创建软链

sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

3 切换国内镜像源!!!

没有切换源地址,拉了半天docker镜像, /etc/docker/daemon.json,没有的话就新增

{
  "registry-mirrors": ["https://registry.docker-cn.com"]
}

保存后,重启docker服务

sudo service docker restart

4 拉取sentry源码

最新版sentry有一键执行脚本

https://github.com/getsentry/sentry.git

执行脚本命令,去喝杯卡布奇诺等着

./install.sh

如果卡住,多试几次,直到看到让你创建邮箱密码,成功

docker-compose up -d

打开地址:9000看到下图,恭喜你已经成功一大半

5 创建vue项目

按照系统提示安装 @sentry/browser @sentry/integrations

@sentry/webpack-plugin 上传sourcemap 需要安装

这里需要注意几点,项目名,机构名 token上传的时候需要用到

点击API Keys,设置token,箭头所指必须选中!

6 上传sourcemap

vue项目根目录下创建.sentryclirc

如果打包 遇到 Failed request,请删掉注释

[auth]
token=c079e5a905ba4f1d90xaaa  #上面设置的token

[defaults]
url = http://11.1.1.x:9000 #你服务器地址
org = xxx    #上面设置的机构名
project = vue  #sentry创建的项目名

main.js

process.env.NODE_ENV === 'production' && Sentry.init({
  dsn: 'http://xxxxaaaa38d7b427c1d@x.x.x.196:9000/5', //sentry新建项目时自动生成
  integrations: [
    new Integrations.Vue({ Vue, attachProps: true }),
    new Integrations.RewriteFrames()
  ],
  release: process.env.RELEASE_VERSION
})

.env.production 设置版本号

#sentry版本
RELEASE_VERSION=3.0.0  //版本号随意设置,建议跟随git tag

vue.config.js, urlPrefix要注意!!!

举例: 生产地址: www.abc.com/x/index.htm… urlPrefix就要为"~/x"

 productionSourceMap: true, //生产打包map文件
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      config.plugins.push(
        new SentryCliPlugin({
          include: "./dist", // 作用的文件夹(打包好的文件夹)
          release: process.env.RELEASE_VERSION, // 版本号
          configFile: "sentry.properties",
          ignore: ["node_modules"],
          urlPrefix: "~/" // 这个地址要对应你线上的js地址!!!
        })
      );
    }
  },

执行build,sentry上能看到版本,工件,上传成功,测试错误就能定位到源码啦

撒花结束 💯💯💯💯💯💯