docker部署onlyOffice

最新推荐文章于 2025-06-17 11:37:15 发布

雨中奔跑的小孩

最新推荐文章于 2025-06-17 11:37:15 发布

阅读量1.5k

点赞数 19

CC 4.0 BY-SA版权

分类专栏：前端文章标签： docker 容器运维

本文链接：https://blog.csdn.net/weixin_47617631/article/details/147980981

前端专栏收录该内容

17 篇文章

订阅专栏

首先安装docker环境，启动docker，我这里以前安过，跳过该步骤

步骤 1：拉取 OnlyOffice Docker 镜像

首先，使用以下命令从 Docker Hub 拉取 OnlyOffice Document Server 镜像：

sudo docker pull onlyoffice/documentserver

步骤 2：运行 OnlyOffice Docker 容器

创建挂载目录

sudo mkdir -p /app/onlyoffice/DocumentServer/logs
sudo mkdir -p /app/onlyoffice/DocumentServer/data
sudo mkdir -p /app/onlyoffice/DocumentServer/lib
sudo mkdir -p /app/onlyoffice/DocumentServer/db

接下来，运行以下命令以创建和启动 OnlyOffice Docker 容器，并设置必要的卷（volumes）：

sudo docker run -i -t -d -p 9898:80 --restart=always \
  -v /app/onlyoffice/DocumentServer/logs:/var/log/onlyoffice \
  -v /app/onlyoffice/DocumentServer/data:/var/www/onlyoffice/Data \
  -v /app/onlyoffice/DocumentServer/lib:/var/lib/onlyoffice \
  -v /app/onlyoffice/DocumentServer/db:/var/lib/postgresql \
  --name onlyoffice \
  onlyoffice/documentserver

阿里云放行端口9898

在这里插入图片描述
浏览器访问ip:端口/welcome,执行，三步骤
http://112.74.xxx.xxx:9898/welcome/

或者请求接口测试(get请求)
http://ip:端口/healthcheck
返回true，代表服务没问题，false就需要查看日志

# 查看错误日志，没错忽略该步骤
docker logs onlyoffice

在这里插入图片描述

在html页面中测试或者vue3组件测试

直接创建一个html文件
修改script src的ip和端口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 此处的ip,我onlyoffice所在的机器ip是192.168.7.46，你要改成你自己的服务IP -->
    <script src="http://112.74.xxx.xxx:9898/web-apps/apps/api/documents/api.js"></script>
</head>
<body style="margin:0px;padding:0px;">
    <div id="placeholder" class = "nav" style="width:100%;height:100%;min-height:900px;"></div>
</body>
<script>
    new DocsAPI.DocEditor("placeholder", {
        "document": {
            "fileType": "docx", //文件类型，我用的docx文件，你可以根据需要改其他格式等
            "key": "12qNAFE", //文件key，确保唯一就行
            "title": "aaa测试.docx", //文件名称
            "url": "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx" //文件地址，你可以根据需要改其他地址，前提是本地或外网能够访问的到
        },
 
        "documentType": "word",//文件类型，上面的fileType进行对应匹配
        "type": "desktop",
        "width": "100%",
        "height": "900px",
        "editorConfig": {
            "callbackUrl": ""
        },
        "permissions": {
            "edit": false,
            "comment": true,
            "download": true,
            "fillForms": true,
            "print": true,
            "review": true
        }
    });
</script>
</html>

运行效果：
在这里插入图片描述
vue3页面
官方文档例子
安装依赖

npm install --save @onlyoffice/document-editor-vue

ruoyi自己手动指定个路由页面跳转一下
在这里插入图片描述

<template>
  <DocumentEditor
    id="docEditor"
    documentServerUrl="http://192.168.xxx.xxx:9000/"
    :config="config"
    :events_onDocumentReady="onDocumentReady"
    :onLoadComponentError="onLoadComponentError"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { DocumentEditor } from "@onlyoffice/document-editor-vue";

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    DocumentEditor
  },
  data() {
    return {
      config: {
        "document": {
          "fileType": "docx", //文件类型，我用的docx文件，你可以根据需要改其他格式等
          "key": "12qNAFE", //文件key，确保唯一就行
          "title": "aaa测试.docx", //文件名称
          "url": "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx" //文件地址，你可以根据需要改其他地址，前提是本地或外网能够访问的到
        },

        "documentType": "word",//文件类型，上面的fileType进行对应匹配
        "type": "desktop",
        "width": "100%",
        "height": "900px",
        "editorConfig": {
          "callbackUrl": ""
        },
        "permissions": {
          "edit": false,
          "comment": true,
          "download": true,
          "fillForms": true,
          "print": true,
          "review": true
        }
      }
    }
  },
  methods: {
    onDocumentReady() {
      // const documentEditor = window.DocEditor.instances["docEditor"]
      //
      // documentEditor.showMessage("Welcome to ONLYOFFICE Editor!")
      console.log("Document is loaded");
    },
    onLoadComponentError (errorCode, errorDescription) {
      switch(errorCode) {
        case -1: // Unknown error loading component
          console.log(errorDescription);
          break;

        case -2: // Error load DocsAPI from http://documentserver/
          console.log(errorCode);
          console.log(errorDescription);
          break;

        case -3: // DocsAPI is not defined
          console.log(errorDescription);
          break;
      }
    }
  },
});
</script>

npm run dev

在这里插入图片描述