使用 Raspberry Pi 作为开发服务器

2025-05-26

使用 Raspberry Pi 作为开发服务器

在本教程中，我将向您展示如何将 Raspberry Pi 4 设置为开发（或测试）服务器。您可以将其用作推送代码并在 Web 浏览器中进行测试的地方。在演示中，我将使用一个 React 应用程序，但只需进行一些修改，您就可以使用它构建几乎任何内容。

对于这个项目，我使用了Canakit Raspberry Pi 4 完整套件。它提供了启动所需的一切，包括外壳、电源和 SD 卡。

Raspberry Pi 4 开发服务器

何必呢？

一个稳定的开发环境至关重要。您需要一个可以查看应用程序以确保其正常运行的地方。很多时候，人们会在本地机器上进行此操作。最好在与当前工作环境不同的机器上进行测试。这样，您就可以捕获依赖项和配置更改等信息。

该开发/测试服务器具有以下优点：

  • 与生产相匹配的配置和环境（如果您有 Linux 主机）
  • 在任何机器上构建代码并将其推送到集中位置
  • 持续集成——在浏览器中推送、刷新！

理想情况下，您可以设置如下所示的工作流程：


Raspberry Pi 4 开发服务器

  1. 在本地开发您的代码并提交。
  2. 推进开发并进行测试
  3. 批准变更，并上线

这实现了一个很棒的工作流程，您可以进行更改和编辑、提交、推送并刷新浏览器。之后，您可以从网络上任何安装了 Git 的机器上开发代码。对更改满意后，即可将工件复制到生产环境。实际上，您可以将生产环境推送集成到此工作流程中，使所有操作自动化。

将 Pi 设置为服务器

Raspberry Pi 4 开发服务器

对于这个项目，我使用了完整的Canakit 树莓派套件。它包含了你所需的一切。我不会在本文中详细介绍它的设置，但需要注意的是，我在这个项目中使用了Ubuntu Server 镜像，并建议你也这样做。

我使用我的Pinebook pro将图像刻录到卡上，但如果需要，您也可以在 Windows 或 Mac 中执行此操作。

这是有关设置这些套件之一的良好指南。

我们将把它设置为开发/测试服务器，并使用 GIT 与其通信。具体操作如下：

  • 设置 Git 进行发布
  • 安装 Nginx
  • 安装 NPM
  • 只需一步即可从您机器上的 repo 创建到 Raspberry Pi Web 服务器的部署。

完成后，我们可以更改我们的 React 应用程序并将更改推送到 Pi 以将其作为网页查看。

1. 设置 Git 进行发布

位置：在 Raspberry Pi 上

首先我们需要安装 Git。



sudo apt install git
Enter fullscreen mode Exit fullscreen mode

现在我们需要将 git shell 复制到 /etc/shells



which git-shell
Enter fullscreen mode Exit fullscreen mode

我们将把该输出添加到 /etc/shells

Raspberry Pi 4 开发服务器

现在我们要设置一个没有您的帐户所具有的酷权限的 git 用户。



sudo adduser --disabled-password git
Enter fullscreen mode Exit fullscreen mode

切换到 git 用户



sudo su git
Enter fullscreen mode Exit fullscreen mode

切换到 git 用户主目录



cd ~
Enter fullscreen mode Exit fullscreen mode

为 ssh 文件创建目录



mkdir ~/.ssh && chmod 700 ~/.ssh
Enter fullscreen mode Exit fullscreen mode

我们将创建我们的authorized_keys文件



touch ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys
Enter fullscreen mode Exit fullscreen mode

现在，您可以通过将任何想要访问服务器的机器的公钥添加到以下内容来添加它们：



/home/git/.ssh/authorized_keys
Enter fullscreen mode Exit fullscreen mode

然后我们将 git 用户的 shell 设置为 git-shell



sudo chsh git -s $(which git-shell)
Enter fullscreen mode Exit fullscreen mode

为我们稍后提供的 www 文件创建一个文件夹：



mkdir ~/www
Enter fullscreen mode Exit fullscreen mode

2.创建我们的项目文件夹

位置：在 Raspberry Pi 上

这是一个远程存储库设置，因此我们可以在任何其他机器上处理该项目，然后将其推送到 Raspberry Pi。



cd ~
mkdir /home/git/react-hello-world.git
Enter fullscreen mode Exit fullscreen mode

现在，让我们开始吧：



cd react-hello-world.git && git init --bare
Enter fullscreen mode Exit fullscreen mode

让我们回到我们的机器并测试一下。

在您的开发人员机器上，输入：



git clone git@[your IP address]:react-hello-world .
Enter fullscreen mode Exit fullscreen mode

您应该能够将其克隆到您的本地机器上。

Raspberry Pi 4 开发服务器

如果可行，我们将回到 Raspberry Pi。

3.安装Nginx

位置：在 Raspberry Pi 上

接下来，我们将在我们的 Raspberry pi 上安装 Nginx 并使用它来提供网页。

在本教程中，我们将为单个项目设置它，因此我们将使用单个 www 目录。但是，如果您有多个项目，则需要将它们拆分到文件夹中。



sudo apt install Nginx
Enter fullscreen mode Exit fullscreen mode

这将安装 Nginx。

您可能需要为 ufw 添加防火墙例外。您可以输入以下命令列出可用的配置文件：



sudo ufw app list
Enter fullscreen mode Exit fullscreen mode

Raspberry Pi 4 开发服务器

您可以使用以下方式添加例外：



sudo ufw allow 'Nginx HTTP'
Enter fullscreen mode Exit fullscreen mode

现在，当您在 Web 浏览器中打开 IP 时，您将看到 Nginx 欢迎页面。

Raspberry Pi 4 开发服务器

现在您已经启动并运行了 Nginx 服务器。

4.配置Nginx

位置：在 Raspberry Pi 上

接下来，我们将更改 Nginx 配置。

将主文件夹中的默认配置复制一份作为备份：



sudo cp /etc/Nginx/sites-available/default ~
Enter fullscreen mode Exit fullscreen mode

编辑 conf 文件并添加到我们之前创建的 www 文件夹。



sudo vim /etc/Nginx/sites-available/default
Enter fullscreen mode Exit fullscreen mode

查找“根”并将默认值更改为我们的 www 文件夹：

Raspberry Pi 4 开发服务器

然后保存文件并重新加载Nginx。



sudo systemctl reload Nginx
Enter fullscreen mode Exit fullscreen mode

现在，您将从 www 文件夹（而不是 git）提供文件。这是我们提交后发布文件的地方。

Raspberry Pi 4 开发服务器

让我们回到我们的开发机器。

5. 设置我们的 React 项目

位置：在您的开发人员机器上

我们将构建一个 React 项目并将其部署到树莓派上。现在就开始设置吧。

首先，我们将删除之前克隆的 repo。



rm -rf react-hello-world/
Enter fullscreen mode Exit fullscreen mode

我们将使用 React CLI 创建一个同名的应用程序。



npx create-react-app react-hello-world
Enter fullscreen mode Exit fullscreen mode

Raspberry Pi 4 开发服务器

现在我们已经创建了一个基本的 React 项目。接下来，将其初始化为 git 仓库。



git init
Enter fullscreen mode Exit fullscreen mode

我们将添加现有文件并提交它们。



git add .
git commit -m "Our first commit"
Enter fullscreen mode Exit fullscreen mode

我们将远程设置为我们的 Raspberry Pi。设置好之后，当我们推送到远程时，文件就会发送到我们的 Raspberry Pi。



git remote add origin git@[Your IP Address]:react-hello-world.git
Enter fullscreen mode Exit fullscreen mode

我们将它推送到 Raspberry Pi：



git push --set-upstream origin master
Enter fullscreen mode Exit fullscreen mode

如果你访问 Pi，你将在 react-hello-world.git 文件夹中看到存储库：

Raspberry Pi 4 开发服务器

现在我们已经完成了设置，我们必须设置 Pi 来构建您的 React 应用程序。

6. 设置要构建的服务器

位置：在 Raspberry Pi 上

我们已经设置好了 git 远程仓库，也安装了 Nginx，但我们需要把它们整合在一起。我们需要构建我们的应用程序。

我们现在需要在 Raspberry Pi 上安装 Node 和 NPM 来启动。



curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt install nodejs
Enter fullscreen mode Exit fullscreen mode

您可以通过输入以下内容来验证它们是否已安装：



node --version 
npm --version
Enter fullscreen mode Exit fullscreen mode

Raspberry Pi 4 开发服务器

现在我们已经启动并运行 Node。

7. 设置 React 进行构建

位置：在 Raspberry Pi 上

让我们在 Raspberry Pi 上构建我们的 React App，只是为了测试它。

在本地检查 repo：



cd ~ && git clone react-hello-world.git/ test
Enter fullscreen mode Exit fullscreen mode

然后我们将安装 react 和 react-scripts (-g 使其成为全局的)



npm install react -g
npm install react-scripts -g
Enter fullscreen mode Exit fullscreen mode

如果我们运行：



npm run-scripts build
Enter fullscreen mode Exit fullscreen mode

我们可以看到它已正确构建。

Raspberry Pi 4 开发服务器

一旦我们知道可以手动构建 React 应用程序，我们就可以自动化它。

8. 整合所有

位置：在 Raspberry Pi 上

现在我们需要将这些文件复制到 www 文件夹中。我们希望每次推送到 git 仓库时都能自动执行此操作。

确保您位于 Raspberry Pi 上的 git 远程文件夹中（对我来说是 /home/git/react-hello-world.git/）

并创建一个新文件：



vim hooks/post-receive
Enter fullscreen mode Exit fullscreen mode

加入：



#!/bin/bash
unset GIT_INDEX_FILE
echo "Publishing our React App"
git --work-tree /home/git/build --git-dir=/home/git/react-hello-world.git checkout -f
cd /home/git/build
npm run-script build
cp -r /home/git/build/build/* /home/git/www
Enter fullscreen mode Exit fullscreen mode

请使用您自己的文件夹名称。我创建了一个 /home/git/build 文件夹，它的作用是保存源文件并进行构建。

该文件的作用是在 git 中创建一个 post-receive 钩子，因此在你推送到远程后，这些操作就会运行。

  • 它将仓库签出到构建文件夹中
  • 运行构建脚本
  • 将工件复制到我们的 www 文件夹。

您可以通过几种不同的方式执行此操作，但这是一种构建应用程序并将其推送到 www 文件夹的简单方法。

您可以在本地构建应用程序，只需提交/推送工件即可。我正在“服务器”（我们的 Raspberry Pi）上构建它。这是一种更好的方法，因为您可以将 Raspberry Pi 与生产服务器匹配，并且只需推送源代码即可自动构建。您不必担心开发计算机上的配置更改会在生产计算机上发生。这在一定程度上增强了一致性。

如果您愿意，您也可以在这里运行测试。

添加完这些更改后，将文件标记为可执行文件。



chmod +x hooks/post-receive
Enter fullscreen mode Exit fullscreen mode

9. 测试集成

位置：您的本地机器和 Raspberry Pi

现在是时候测试一切了。在你的 React 应用中，打开 App.js 并进行一些更改。

添加并提交。



git add .
git commit "small change"
git push origin master
Enter fullscreen mode Exit fullscreen mode

您将看到来自遥控器的输出：

Raspberry Pi 4 开发服务器

现在您可以在 Web 浏览器中测试它了！！！

这就是我们一直在等待的！

Raspberry Pi 4 开发服务器

这就是我的 React 网站的全部亮点。

现在，我可以通过以下方式更新此应用程序：

  • 做出改变
  • 承诺
  • 推送至 Master

只需几秒钟，我就能看到修改结果。简单易用。您可以轻松扩展，只需将其推送到这里，进行抽样检查，然后将其推送到暂存服务器或生产服务器即可。可能性无穷无尽。

10.开始开发！

本教程以 React 应用为例，但它也可以是 Angular、Vue、Golang、Python、PHP 或其他任何语言。概念相同。我希望这能加快您的工作流程，并在应用上线之前为您提供一个良好的检查和测试平台。

它不完全是一个企业解决方案，但它是实际服务器的廉价替代品。

以下是我的设置方法：

Raspberry Pi 4 开发服务器

我使用我的Pinebook Pro作为本文的开发机器。您在这里看到的是一套功能齐全的开发设备，售价约为 300 美元。使用这套设备，我可以轻松开发大量应用程序并将其投入生产。这要感谢 ARM 处理器以及Raspberry Pi 基金会和Pine64 项目等创新者的不懈努力。

你怎么看？快在推特上留言告诉我吧！

文章来源：https://dev.to/pluralsight/using-a-raspberry-pi-as-your-development-server-28c
Devto 翻译
PREV
原生 JavaScript 和 HTML - 无需框架，无需库。没问题。
NEXT
学习围棋的十大最佳地点