몇 달 전에 Raspberry Pi 4를 구입했습니다. 그 이후로 SSH, SCP, Systemd, DDNS 및 이전에 한 번도 해본 적이 없는 다른 작업으로 손을 더럽히고 있습니다. 이 머신은 이제 내 Veloren 서버(Join me at vlrn.duckdns.org )와 랜딩 페이지를 호스트합니다. 랜딩 페이지는 수동으로 빌드하고 많이 SCP'ing한 후 이제 GitHub Actions를 통해 배포됩니다. 이것이 오늘의 주제입니다. GH Actions를 사용하여 RPi에 웹 페이지를 배포하는 방법은 무엇입니까?

시작하기 전에

동적 IP 주소가 있는 경우 동적 DNS를 설정해야 합니다. 그렇지 않으면 대상 IP 주소가 변경될 때마다 대상 IP 주소를 변경해야 합니다(매월, 매주 또는 매일 발생할 수 있음). 라우터 모델에 따라 프로세스가 다르기 때문에 여기서는 다루지 않습니다. 하지만 좋은 무료 동적 DNS 서비스를 원하신다면 제가 현재 사용하고 있는 duckdns.org에 사용(및 기부!)하는 것을 고려해보세요.

RPi 준비

이 경우 준비는 매우 간단합니다. 다음을 사용하여 NGINX를 설치하기만 하면 됩니다.

apt install nginx

그런 다음 시작합니다.

systemctl enable nginx
systemctl start nginx

포트 포워딩

RPi의 포트 80을 외부 포트 80으로 포트 포워딩합니다. 이제 브라우저에서 IP에 액세스하면 다음 화면이 나타납니다.



또한 RPi의 포트 22를 22가 아닌 다른 포트로 포트 포워딩합니다. 기본 SSH 포트이므로 보안상의 이유로 노출하지 않는 것이 좋습니다.

액션 만들기

appleboy/scp-action 때문에 매우 간단한 단계입니다. 작업에는 Raspberry Pi 빌드 및 푸싱의 두 단계로 구성된 작업이 하나만 있습니다.

건물

여기에는 비밀이 없습니다. 이것은 빌드 단계입니다.

name: deploy
on:
  push:
    branches:
      - main
jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "14"
      - name: "Install & build"
        run: |
          npm i
          npm run build
          mv public/index.html public/index.nginx-debian.html

여기서 알아야 할 유일한 것은 index.html 가 index.nginx-debian.html 로 이름이 바뀌는 마지막 줄입니다. 이는 Debian에서 NGINX가 /var/www/html/index.nginx-debian.html를 사용하기 때문에 수행됩니다. 다른 배포판은 다른 디렉터리 및 인덱스 이름 지정을 사용할 수 있습니다.

미는

최근에 빌드한 아티팩트를 Raspberry Pi에 푸시하려면 appleboy/scp-action 을 사용합니다. 올바르게 설정하려면 GitHub 리포지토리에 다음 비밀을 추가합니다.

SSH_HOST: RPi의 IP/URL;

SSH_PORT: Port Forwarding 섹션에서 전달된 RPi에서 사용하는 SSH 포트입니다.

SSH_USERNAME: SCP에 대한 RPi 사용자 이름입니다. 파일이 /var/www/html 에 복사되기 때문에 이 사용자는 루트 권한이 있어야 하며 가급적이면 암호를 묻지 않는 것이 좋습니다.

SSH_KEY: SSH 개인 키로 ssh-keygen 또는 online generator 을 사용하여 생성합니다.

모든 것이 생성되면 SSH 공개 키를 ~/.ssh/authorized_keys 에 추가합니다. 이제 "푸시"단계를 만들 차례입니다.

      - name: "Push to server"
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_KEY }}
          port: ${{ secrets.SSH_PORT }}
          source: "public/"
          strip_components: 1
          target: "/var/www/html"

strip_components: 1 외에는 새로운 것이 없어야 합니다. 이것
설정은 지정된 수의 선행 경로 요소를 제거합니다. 이 요소가 없으면 콘텐츠를 /var/www/html/public 대신 /var/www/html로 푸시합니다.

끝

이제 자동으로 빌드하고 Raspberry Pi에 푸시하는 완전히 작동하는 GitHub 작업이 있어야 합니다. 더 이상 단일 라인을 변경하거나 RPi 내부에서 실행npm run build하기 위한 SCP'ing이 없습니다. 여기에서 내 웹 사이트의 저장소를 볼 수 있습니다.

hnrq / vlrn 웹사이트

벨로렌 서버 랜딩 페이지

Psst — 보다 완벽한 솔루션을 찾고 계십니까? 아름다운 개발 경험과 유연한 파일 시스템 기반 라우팅을 통해 모든 규모의 웹 애플리케이션을 구축하기 위한 공식 프레임워크인 SvelteKit을 확인하십시오.
대신 공유 가능한 구성 요소 템플릿을 찾고 계십니까? 당신은 할 수 있습니다 use SvelteKit for that as well 또는 이전 sveltejs/component-template

날렵한 앱

Svelte 앱용 프로젝트 템플릿입니다. 그것은 https://github.com/sveltejs/template에 살고 있습니다.
degit을 사용하여 이 템플릿을 기반으로 새 프로젝트를 만들려면 다음을 수행합니다.

npx degit sveltejs/template svelte-app
cd svelte-app

Node.js이 설치되어 있어야 합니다.

시작하다

종속성 설치...

cd svelte-app
npm install

...그런 다음 시작Rollup:

npm run dev

localhost:8080 으로 이동합니다. 앱이 실행되는 것을 볼 수 있습니다. src에서 구성 요소 파일을 편집하고 저장한 다음 페이지를 다시 로드하여 변경 사항을 확인하십시오.
기본적으로 서버는 localhost의 요청에만 응답합니다. 다음에서 연결을 허용하려면…

View on GitHub