shlinkio/shlink-web-client

shlink-web-client

![Code Coverage]([***]

![]([] ![Bluesky]([] ![ ]([]

基于ReactJS的渐进式Web应用，用于Shlink短链接服务管理。

!shlink-web-client

若需了解如何在开发模式下运行项目或贡献代码，请阅读CONTRIBUTING文档。

安装

有三种方式可以使用此应用：

通过app.shlink.io

使用shlink-web-client最简单的方式是直接访问<[***]>。

该应用100%在浏览器中运行，因此您可以安全地从那里访问任何shlink实例。

Docker镜像

如果您想在基于容器的集群（Kubernetes、Docker Swarm等）中部署shlink-web-client，只需使用https://hub.docker.com/r/shlinkio/shlink-web-client/%E9%95%9C%E5%83%8F%E5%8D%B3%E5%8F%AF%E3%80%82

这是一个轻量级的https://hub.docker.com/r/library/nginx/%E9%95%9C%E5%83%8F%EF%BC%8C%E5%9C%A88080%E7%AB%AF%E5%8F%A3%E6%8F%90%E4%BE%9B%E9%9D%99%E6%80%81%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E3%80%82

自托管

如果您想自行托管，获取https://github.com/shlinkio/shlink-web-client/releases/latest%E5%B9%B6%E4%B8%8B%E8%BD%BD%E9%99%84%E5%B8%A6%E7%9A%84%E5%8F%AF%E5%88%86%E5%8F%91zip%E6%96%87%E4%BB%B6%EF%BC%88%60shlink-web-client_X.X.X_dist.zip%60%EF%BC%89%E3%80%82

该包仅包含静态文件，只需将其放在文件夹中并使用您选择的Web服务器提供服务。

注意事项：

• 提供的dist文件配置为从域名根目录提供服务。如果需要从子路径提供shlink-web-client服务，您需要按照以下步骤自行构建。
• 应用具有客户端路由器，用于处理动态路径。因此，您需要配置Web服务器，当请求的文件不存在时回退到index.html文件：
  • 若使用Apache，项目包含的.htaccess文件已配置此功能。
  • 若使用nginx，可参考Docker镜像的配置方式进行设置。

预配置服务器

首次从浏览器访问shlink-web-client时，您需要配置要管理的shlink服务器列表，这些配置将保存在本地存储中。

这些服务器可以导出并导入到其他浏览器，但如果您需要某些服务器从一开始就可用，从shlink-web-client 2.1.0开始，您可以在项目根目录（包含index.html、favicon.ico等文件的目录）中提供servers.json文件，结构如下：

json
[
  {
    "name": "主服务器",
    "url": "https://s.test",
    "apiKey": "09c972b7-506b-49f1-a19a-d729e22e599c"
  },
  {
    "name": "本地服务器",
    "url": "http://localhost:8080",
    "apiKey": "580d0b42-4dea-419a-96bf-6c876b901451"
  }
]

列表中可包含任意数量的服务器。

如果使用shlink-web-client Docker镜像，您可以通过卷将servers.json文件挂载到容器内的/usr/share/nginx/html目录（应用的文档根目录）：

bash
docker run --name shlink-web-client -p 8000:8080 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client

或者，您可以将包含servers.json文件的conf.d目录挂载到/usr/share/nginx/html目录（自shlink-web-client 3.2.0起）：

bash
docker run --name shlink-web-client -p 8000:8080 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client

如果您想预配置单个服务器，可以通过环境变量提供其配置。容器启动时将基于这些变量动态构建servers.json文件（自shlink-web-client 3.2.0起）：

• SHLINK_SERVER_URL: shlink服务器的完整URL
• SHLINK_SERVER_API_KEY: API密钥
• SHLINK_SERVER_NAME: 显示名称，未提供时默认为Shlink

bash
docker run \
    --name shlink-web-client \
    -p 8000:8080 \
    -e SHLINK_SERVER_URL=https://s.test \
    -e SHLINK_SERVER_API_KEY=6aeb82c6-e275-4538-a747-31f9abfba63c \
    shlinkio/shlink-web-client

使用此功能时需格外小心：

由于shlink-web-client是客户端应用，该文件需要可从浏览器访问。

因此，确保仅在自托管shlink-web-client且确认只有受信任人员可访问时使用此功能。

否则可能导致您的API密钥泄露。

在子路径中提供服务

官方可分发文件已配置为从域名根目录提供服务。

如果您需要自行托管并从子路径提供shlink-web-client服务，请按照以下步骤操作：

• 下载您要构建的版本的shlink-web-client源代码：
  • 例如，若要构建v1.0.1，使用此链接https://github.com/shlinkio/shlink-web-client/archive/v1.0.1.zip
  • 将链接中的v1.0.1替换为您需要的版本。
• 解压文件并cd进入结果文件夹。
• 打开项目根目录下的package.json文件，找到homepage属性，将其值（应为空字符串）替换为您要提供shlink-web-client服务的路径：
  • 例如："homepage": "/my-projects/shlink-web-client",
• 构建项目：
  • 传统托管：
    • 下载Node.js 10.15或更高版本
    • 运行npm install安装项目依赖
    • 运行npm run build构建项目
    • 命令完成后，将生成包含所有静态资源的build文件夹，将其放置在您要提供服务的位置即可。
  • Docker镜像：
    • 下载Docker
    • 运行docker build . -t shlink-web-client构建Docker镜像
    • 命令完成后，将生成名为shlink-web-client的镜像。