Logo

菜单

发布于 2026-01-05 3 阅读
0

🔗 通过 GitHub Actions 实现您域名上的个性化 URL 缩短服务自动化

🔗 通过 GitHub Actions 实现您域名上的个性化 URL 缩短服务自动化

介绍

嘿嘿！👋 准备好继续学习如何使用 GitHub Actions 并深入了解它了吗？太好了！今天，我们将创建你自己的链接缩短器，以简化互联网上的互动。

那么 GitHub Actions 在哪里呢？几乎无处不在，因为它是核心部分！我们将充分利用它的强大功能来添加新链接、重启 Web 服务器并部署一个友好的短链接网站首页。

📝 目录

🤔 我们将建造什么？

我们将仅为重要的链接构建URL 缩短服务，这些链接您经常使用，并且不会经常更改。

👀 例如，在演示文稿中添加包含联系信息的幻灯片，或者从存储库中下载有用的代码片段（以便轻松wget操作），或者提供 YouTube 视频链接的较短版本……等等。

好了，这是我们的计划：

  • 注册域名
  • 配置远程虚拟服务器
  • 配置同一个 GitHub 仓库的独立分支
  • 配置 GitHub Actions 以进行部署
  • 推送部署

↑ 目录

存储库结构

正如我之前所说，我们将把代码仓库分成两个分支：

  1. master分支将包含主要场景（一系列缩短的 URL）。
  2. website该分支将包含您网站的首页（向好奇的用户展示的“你好”信息）。

☝️请注意：在这种情况下，两个分支的展开将彼此独立进行。感谢 GitHub Actions！

分支结构master：

.
├── .github
│   └── workflows
│       └── urls_deploy.yml  # <-- GitHub Action
└── short_urls_list.conf     # <-- List of shorted URLs (NGINX config)
Enter fullscreen mode Exit fullscreen mode

分支结构website：

.
├── .github
│   └── workflows
│       └── website_deploy.yml  # <-- GitHub Action
└── index.html                  # <-- Index page of website
Enter fullscreen mode Exit fullscreen mode

↑ 目录

🌐 注册域名

在我们激动人心的旅程伊始，让我们先为您的项目确定一个域名。我很幸运地注册了一个域名shrts.website或类似的域名，它完全符合我们的理念：创建网站的短链接。

😉有趣的事实：我使用这家域名注册商已经超过 14 年了（确切地说，是从 2006 年 10 月开始），我对它的价格和支持仍然非常满意。

您可以尝试不同的组合和缩写，但此类项目域名的主要目的是→简单易记！

↑ 目录

⚙️ 配置远程虚拟服务器

为了避免重复，我不会详细描述虚拟服务器的配置过程，只会提供我之前文章的链接，其中我已经对此进行了描述：

  1. 在 DigitalOcean 上创建一个新的 droplet
  2. 通过以下方式设置虚拟服务器snippets-deploy
  3. 为 GitHub Actions 部署创建私有 SSH 密钥

↑ 目录

🤖 配置 GitHub Actions 以进行部署

让我们从最有趣的部分开始：设置 GitHub Actions。

↑ 目录

GitHub 机密

以下是我们需要知道的所有秘密：

  • REMOTE_HOST– 您的虚拟服务器的 IP 地址
  • REMOTE_USER– 您虚拟服务器上的用户（请勿root使用逗号）
  • REMOTE_NGINX_DIR– NGINX 文件夹的完整路径，用于放置代码片段（默认情况下应该是/etc/nginx/snippets）。
  • REMOTE_WEBSITE_DIR– 网站根文件夹的完整路径（如果您通过设置虚拟服务器snippets-deploy，则应该是/var/www/<domain>/html）
  • SSH_KEY— SSH 密钥私钥部分的内容，该密钥是我们之前文章“ SSH私钥”部分中生成的。~/.ssh/gha_rsa
  • SSH_KEY_PASSPHRASE— 我们在生成 SSH 密钥时输入的 SSH 密钥密码

GitHub 机密

☝️如果您想了解更多相关信息，请阅读我之前题为“了解 GitHub 的秘密”的文章的部分内容。

↑ 目录

短链接列表

让我们开始配置<domain>远程虚拟服务器上的 NGINX。

连接到服务器并在nano编辑器中打开配置文件。转到主配置部分，并在 ` <head>` 标签后server {...}添加一行，如下所示：include snippets/short_urls_list.conf;index index.html;

# /etc/nginx/sites-available/<domain>.conf

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name <domain>;
    root /var/www/<domain>/html;
    index index.html;

    include snippets/short_urls_list.conf; # <-- include file with URLs redirects

    ssl_certificate /etc/letsencrypt/live/<domain>/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/<domain>/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/<domain>/chain.pem;

    # ...
Enter fullscreen mode Exit fullscreen mode

❗️注意：请不要忘记换成<domain>您自己的。

好！👍 现在，在你的 GitHub 仓库中创建一个包含缩短 URL 的代码片段：

# short_urls_list.conf

rewrite /link-1 https://huge-example-1.com/very-long/link/1 permanent;
Enter fullscreen mode Exit fullscreen mode

如您所见，这些都是常见的301 Moved Permanently重定向，从一个链接跳转https://<domain>/link-1到另一个链接（https://huge-example-1.com/very-long/link/1在本例中）。

现在，我们需要为master分支创建 GitHub Action 配置：

# .github/workflows/urls_deploy.yml

name: Deploy new short URLs via SSH

on:
  push:
    branches: [master] # triggered only if pushed to master branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # Checks-out repository under $GITHUB_WORKSPACE
      - uses: actions/checkout@master

      # Copying files to server via SSH
      - name: Copying files to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.REMOTE_HOST }}
          username: ${{ secrets.REMOTE_USER }}
          key: ${{ secrets.SSH_KEY }}
          passphrase: ${{ secrets.SSH_KEY_PASSPHRASE }}
          source: "short_urls_list.conf"
          target: "${{ secrets.REMOTE_NGINX_DIR }}"

      # Restart NGINX after deploy
      - name: Restart NGINX
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.REMOTE_HOST }}
          username: ${{ secrets.REMOTE_USER }}
          key: ${{ secrets.SSH_KEY }}
          passphrase: ${{ secrets.SSH_KEY_PASSPHRASE }}
          script: sudo nginx -t && sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

↑ 目录

网站首页

切换到分支并创建符合您喜好的网站website索引页面（简单文件）。index.html

👌 可以是介绍您短链接服务的欢迎信息，或者任何您想要的内容。尽情发挥想象吧！

最后，我们准备为分支创建 GitHub Actionwebsite：

# .github/workflows/website_deploy.yml

name: Deploy website via SSH

on:
  push:
    branches: [website] # triggered only if pushed to website branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # Checks-out repository under $GITHUB_WORKSPACE
      - uses: actions/checkout@master

      # Copying files to server via SSH
      - name: Copying files to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.REMOTE_HOST }}
          username: ${{ secrets.REMOTE_USER }}
          key: ${{ secrets.SSH_KEY }}
          passphrase: ${{ secrets.SSH_KEY_PASSPHRASE }}
          source: "index.html"
          target: "${{ secrets.REMOTE_WEBSITE_DIR }}"
Enter fullscreen mode Exit fullscreen mode

让我们部署它！

将更改提交并推送到您的存储库（两个分支都要推送），然后访问https://<domain>以查看网站首页，如下所示：

shrts.网站屏幕

现在，点击你的短链接，确保一切运行正常。

没错，它真的管用！ 🎉

添加新链接

要添加新链接，你只需要将其添加到short_urls_list.conf文件（在master分支中）并执行推送操作即可。

就这些啦！酷吧？😎

↑ 目录

💬 问题以加深理解

  1. 链接缩短服务的域名应该是什么？
  2. 短链接重定向到原链接的原因是什么？
  3. GitHub Actions 配置中的哪个参数负责按分支名称触发作业？

↑ 目录

✏️ 独立完成的练习

  • 请按照文章中的步骤操作，但使用您自己的域名和虚拟服务器。请在下方评论区分享您的结果并附上您创建的简短网站的链接！
  • 尝试使用正确的操作，将应用部署index.html到 GitHub Pages（位于您的代码仓库），而不是虚拟服务器。请参阅此处的gh-pages文档。

↑ 目录

照片/图像由

  • GitHub 仓库设置（链接）

PS

如果你想在这个博客上看到更多类似的文章，请在下方留言并订阅我。谢谢！😻

❗️您可以通过Boosty平台支持我，既可以长期支持，也可以一次性支持。所有收益都将用于支持我的开源软件项目，并激励我为社区创作新的产品和文章。

在Boosty上支持我

当然，您也可以帮助我让开发者的工作变得更好！只需以贡献者的身份加入我的项目即可。很简单！

我最需要你帮助（和点赞）的项目👇

  • 🔥 gowebly：一款新一代 CLI 工具，可轻松使用 Go 在后端创建出色的 Web 应用程序，使用 htmx、hyperscript 或 Alpine.js 以及最流行的 CSS 框架在前端进行开发。
  • ✨ create-go-app：通过运行一条 CLI 命令，创建一个包含 Go 后端、前端和部署自动化功能的新生产就绪项目。

我的其他一些小项目：yatr、gosl、json2csv、csv2api。

文章来源：https://dev.to/koddr/personal-url-shortener-on-your-domain-with-automation-through-github-actions-2h2i
对象代理的实际应用案例
对程序员来说，干扰真的比其他知识工...