0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@molphosync102

【CI/CD】Webサイトのコンテンツ更新〜自宅Webサーバーへのデプロイを自動化！【VPNあり】

0
Posted at

目次

はじめに

先日、自身のポートフォリオサイトを作成しました。

（よかったら見ていってください！）

本Webサイトのコンテンツ制作は動的更新に対応しておらず、
Configファイルを編集してコンテンツを更新しています。

CMSの動的更新を導入したいと思いつつ、静的なコンテンツを弄りたかったりレイアウト変更したかったりする場合を想定して、
自宅のWebサーバー（Raspberry Pi）へ自動デプロイ（CI/CD）を行う環境を構築しました。

全体構成

image.png

git push
  ↓
GitHub Actions
  ↓（test, build）
dist/
  ↓（SCP with WireGuard）
Raspberry Pi
  ↓
/var/www/html
  ↓
Nginx

今回は自宅ネットワークで既に構築していたVPNを用いてデプロイする構成を採用しています。

Cloudflareのトンネル機能を使ってSCPすることも可能で、よりセキュアそうなので今後変更したいところです（今回の構成はCloudflare Tunnel構築前に作ったものでした）

CI/CDとは？

CI/CD (Continuous Integration / Continuous Deployment) とは、ソフトウェアの変更を自動的にテスト・ビルドし、本番環境へ適用（デプロイ）する仕組みのことです。

  • CI (Integration): 自動でテストやビルドを行うこと
    （今回は npm run lint や npm run test:ui、npm run build）
  • CD (Deployment): テストをパスした成果物を、自動でサーバへアップロードして公開すること
    （今回は scp での転送）

今回のケースでは、ローカルでWebコンテンツを編集しでGitHubにプッシュすると、自動でテスト & 日付更新 & Webサーバーへデプロイする仕組みです。

GitHubへのプッシュ〜Webサーバーデプロイまでを担ってくれるのがGitHub Actionsです。

GitHub Actions とは？

GitHub Actions は、GitHub が標準で提供しているCI/CDプラットフォームです。
リポジトリ内に設定ファイル（YAML）を置くだけで、「リポジトリにプッシュされたら自動でテストしてデプロイする」といった一連の処理を GitHub のサーバ上で実行してくれます。

GitHub Actionsを用いるためのトリガーとしてはpushの他にpull_requestやcronでの実行などがありますが、今回は個人開発のためpushのみで対応することとします。

事前構成

今回の構築を行うにあたっての環境条件は下記となります。

  • GitHub リポジトリを作成済み。
  • Raspberry Pi に SSH 接続できる環境。
  • Nginx が /var/www/html を配信している。
  • dist ディレクトリの内容を Pi 側の Web ルートに反映させる構成である。

① Raspberry Pi 側の準備

1-1. デプロイ用ユーザの作成

pi ユーザなどを直接使うのはセキュリティ上避けたいため、デプロイ専用ユーザを作成しました。

sudo useradd -m -s /bin/bash deploy
sudo passwd deploy

1-2. SSH 鍵認証の有効化

GitHub Actions から接続するための鍵ペアを作成します。

su - deploy
ssh-keygen -t ed25519 -C "github-actions"

生成された公開鍵を登録します。

sudo mkdir -p /home/deploy/.ssh
sudo touch /home/deploy/.ssh/authorized_keys
sudo chown -R deploy:deploy /home/deploy/.ssh
sudo chmod 700 /home/deploy/.ssh
sudo chmod 600 /home/deploy/.ssh/authorized_keys

sudo vi /home/deploy/.ssh/authorized_keys

# 生成した公開鍵を追加

1-3. Web ディレクトリの権限調整

sudo chown -R root:www-data /var/www/html
sudo chmod -R 755 /var/www/html
sudo setfacl -R -m u:deploy:rwx /var/www/html

② GitHub Secrets の設定

GitHub リポジトリの Settings → Secrets and variables → Actions → New Repository Secret に以下の値を設定します。

基本接続情報

名前 内容
PI_HOST 接続先ホスト名またはIPアドレス（今回はWireGuard経由のためプライベートIPを設定）
PI_USER deploy (作成したデプロイ用ユーザ)
PI_SSH_KEY 秘密鍵（id_ed25519 の中身）

WireGuard 関連の Secrets と設定

ご説明の通り、今回は自宅ネットワークで既に構築していたVPNを用いてデプロイする構成を採用しています。

GitHub ActionsのランナーからVPN接続する人は限られると思いますが、備忘として残しておきます。

WireGuard 関連の Secrets と設定

WireGuard 設定情報

名前 内容
WG_ADDRESS GitHub Actions ランナーに割り当てる静的IPアドレス
WG_ALLOWED_IPS VPN 経由でアクセスを許可するネットワーク帯
WG_ENDPOINT <VPNサーバのIP>:<VPNサーバのポート番号>
WG_PRIVATE_KEY GitHub Actions（クライアント）側の秘密鍵
WG_PUBLIC_KEY サーバ側の公開鍵

WireGuard サーバ側の設定手順（参考）

VPN サーバ（Pi 側など）でクライアント（GitHub Actions）用の鍵を生成し、設定を追加する手順です。

cd /etc/wireguard
umask 077
wg genkey | tee gactions_client_private.key | wg pubkey > gactions_client_public.key

sudo vi /etc/wireguard/wg0.conf

# /etc/wireguard/wg0.conf への追記例:

[Peer]
PublicKey = ＜gactions_client_public.keyの中身＞
AllowedIPs = 10.0.0.1/32

設定反映のため再起動します。

sudo wg-quick down wg0 && sudo wg-quick up wg0

③ GitHub Actions workflow の作成

GitHubリポジトリ内に.github/workflows/config.yml を作成し、以下の内容を記述します。

name: Deploy React

on:
  push:
    branches: [ main ]

jobs:
  test: # lint, testを行う
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: 'npm'
          cache-dependency-path: package-lock.json

      - name: Install dependencies
        run: |
          npm ci

      - name: Run Lint
        run: |
          npm run lint

      - name: Run Test
        run: |
          npm run test:ui

  build: # build、Webコンテンツの更新日時を更新、Artifactとして出力
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: 'npm'
          cache-dependency-path: package-lock.json

      - name: Install dependencies
        run: |
          npm ci

      - name: Update Last Updated Date
        run: |
          CURRENT_DATE=$(date +'%Y.%m.%d')
          sed -i "s/lastUpdated: '.*'/lastUpdated: '$CURRENT_DATE'/" src/app/content/contentConfig.js
          grep "lastUpdated" src/app/content/contentConfig.js

      - name: Build
        run: |
          npm run build

      - name: Upload Build Artifact
        uses: actions/upload-artifact@v4
        with:
          name: dist-files
          path: dist/

  deploy: # WireGuard設定、SSH接続を行い、Artifactをサーバに転送
    runs-on: ubuntu-latest
    needs: [test, build]
    steps:
      - name: Download Build Artifact
        uses: actions/download-artifact@v4
        with:
          name: dist-files
          path: dist

      - name: Install and Setup WireGuard
        run: 
          # WireGuard設定を追記

      - name: Deploy to server
        run: |
          mkdir -p ~/.ssh/
          echo "${{ secrets.PI_SSH_KEY }}" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519

      - name: Add SSH key to known hosts
        run:
          ssh-keyscan -H ${{ secrets.PI_HOST }} >> ~/.ssh/known_hosts
      
      - name: Send to server
        run:
          scp -r -i ~/.ssh/id_ed25519 dist/* ${{ secrets.PI_USER }}@${{ secrets.PI_HOST }}:/var/www/html

※WireGuard設定は省略しました。興味のある方はこちらの記事を参考にしてください。

④ GitHub リポジトリへ Push

すべての設定が完了したら、変更をリポジトリの main ブランチにプッシュします。

プッシュ後、GitHub リポジトリの Actions タブを開くと、ワークフローが自動的に起動していることが確認できます。

image-3.png

以上でCI/CDの設定は完了です。快適な個人開発ライフを送りましょう！

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?