PPTist在线PPT制作工具部署教程 基于Vue3+TypeScript开发 帕斯内网穿透实现公网访问 NAS自建PPT编辑器

项目介绍

PPTist 是一个功能强大的在线PPT制作工具，完全基于Web技术开发。它复刻了Microsoft Office PowerPoint的大部分常用功能，支持文本、图片、形状、线条、图表、表格、视频、音频、公式等多种元素类型。用户可以直接在浏览器中编辑和演示幻灯片，无需安装任何软件。

PPTist采用Vue 3.x + TypeScript构建，界面美观易用，提供了丰富的编辑功能包括撤销重做、快捷键操作、右键菜单、多种导出格式（PPTX、JSON、图片、PDF）、AI生成PPT等特色功能。项目还支持移动端的基础编辑和预览功能，让您随时随地都能进行PPT创作。

项目地址： 点我跳转

部署安装

如需在外也打开项目需要配置内网穿透使用，点击前往 帕斯内网穿透，先注册好账号备用。

由于PPTist是一个前端项目，没有官方提供的Docker镜像，我们需要手动构建Docker容器来部署。下面提供最简单的Docker部署方案。

--- 下面是 docker-compose 的模版

复制下列的配置文件

1version: '3.8'
2services:
3  pptist:
4    image: node:18-alpine
5    container_name: pptist
6    working_dir: /app
7    ports:
8      - "5173:5173"
9    volumes:
10      - ./pptist:/app
11    command: sh -c "npm install && npm run dev -- --host 0.0.0.0"
12    restart: unless-stopped
Copy

打开飞牛 NAS 或其他的 NAS 设备

项目名称可以随便填，点击创建 docker-compose.yml

点击 Compose -> 新建项目

首先需要在NAS上创建一个文件夹用于存放项目代码，然后将PPTist项目代码下载到该文件夹中。可以通过Git克隆或直接下载ZIP包的方式获取代码。

如果提示端口被占用可以修改下面的字段，但是需要保持格式正确。

--- 下面是 docker 的模版

打开飞牛 NAS 或其他的 NAS 设备 点击本地镜像-添加镜像-从 URL 添加。这一步先添加 docker 镜像

镜像填 node:18-alpine 等待下载完成后点击启动按钮启动容器

勾选开机自动启动后下一步，端口设置这里。请设置容器端口5173映射到主机端口5173（如果端口冲突可以修改主机端口，比如改为8080:5173，但容器内端口必须保持5173）

存储位置这里，需要创建一个文件夹映射到容器的/app目录，用于存放PPTist项目代码。请先在NAS上创建一个名为pptist的文件夹，并将项目源码放入其中。

环境变量设置：无需设置特殊环境变量

启动命令设置：

1sh -c "npm install && npm run dev -- --host 0.0.0.0"
Copy

其他的都不用填写，直接下一步启动就好了。

创建成功后可以访问 ip:5173 到这里就可以正常显示项目了

穿透公网

打开帕斯内网穿透控制台，点击隧道管理-隧道列表

点击创建新隧道

隧道节点可以随便选，一般选个负载低的就可以

接下来填写信息，隧道名称可以随便填写

本地 IP 默认就可以

传输协议可以选择 TCP 也可以选择 HTTP/HTTPS

HTTP 就是域名的形式，教程以使用 TCP 为演示

本项目中如果没有修改端口的话默认是 5173 端口，这里本地端口就填 5173

远程端口可以留空也可以自定义。下图仅做参考，请按照实际项目端口添加。

填写完毕点击确定

点击刚才创建好的隧道，点击获取配置文件

回到飞牛 NAS，点击应用中心下载 frpc 客户端

打开后粘贴刚才复制的配置文件，点击确定即可

复制帕斯内网穿透控制台的访问 IP 和端口

可以看到已经正常穿透成功了

本篇教程结束