レンタルサーバーとGitHub ActionsでCI/CD環境を構築

Astroでブログを作ってみたいので、事前準備としてシン・レンタルサーバーとGitHub ActionsでCI/CDができる環境を構築してみました。

本番のブログはそのままにして、サブドメインへ静的ファイルを自動で置くところまでを目標にしています。

目次

環境と事前準備

環境

  • シン・レンタルサーバー
  • GitHub
  • GitHub Actions

今回はこのブログのサブドメインを作成し、そこに構築するようにしました。

サブドメインの準備は作業前に実施済みで、サンプルページにアクセスできることまで確認済みです。

この記事では、そのアップロードをGitHub Actionsに置き換える手順を書きます。

広告

SSHを有効にして公開鍵を登録する

シン・レンタルサーバーで鍵を作成します。公開鍵はサーバーに登録され、秘密鍵は作成と同時にダウンロードされます。

サーバーパネルの『SSH設定』を開き、『SSH設定』タブで鍵を作成します。

  • 登録方式：自動生成
  • ラベル：Github
  • パスフレーズ：設定しない
Information

GitHub Actionsではパスフレーズを使えないので、パスフレーズは設定しません。

他のレンタルサーバーの場合は、対象のレンタルサーバーのマニュアル等を確認します。

次に、GitHub Actionsは海外からのアクセスとなるので、『アクセス制限』タブで国外アクセス制限をOFFにします。

Information

国外からのアクセスが許可できていないと、プッシュしたあとに GitHub Actions からサーバーへ接続できません。

GitHubにリポジトリを作り、秘密鍵を登録する

GitHubでリポジトリを作ります。

ここに、レンタルサーバーに送るファイルを置きます。

Information

秘密鍵はこのリポジトリには置きません。

GitHubにログインし、New repository を開きます。

  • Repository name は任意です。今回は Blog にしました。
  • 公開設定は Private を選びます。
  • Add a README file はオフのまま、Create repository をクリックします。

作成したリポジトリで Add file、Create new file を開きます。ファイル名を index.html にして以下の内容を書いて、Commit changes で保存します。

保存後に https://github.com/ユーザー名/Blog/blob/main/index.html を開き、ページが表示されることを確認します。404になる場合は、ファイル名が index.html になっていません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>GitHubからプッシュしたページ</title>
</head>
<body>
  GitHubからプッシュしたページ
</body>
</html>

次に、GitHubへ秘密鍵を登録します。

ダウンロードした秘密鍵をテキストエディタで開きます。先頭は -----BEGIN OPENSSH PRIVATE KEY----- です。

リポジトリの Settings を開き、Secrets and variables の Actions を開きます。New repository secret をクリックし、次のように入力します。

  • Name は SSH_PRIVATE_KEY
  • Secret は、秘密鍵の BEGIN の行から END の行まで全部

Add secret で保存します。秘密鍵はコミットしません。スクリーンショットを載せるときは、Secret の中身が読めないようにぼかしてください。

広告

GitHub Actionsでレンタルサーバーへ送る

GitHub Actionsで、リポジトリの index.html をサブドメインへ送ります。

ファイルマネージャ上の送り先は public_html/new.3ryu-engineer.work/ です。YAMLに書くフルパスは /home/サーバーID/3ryu-engineer.work/public_html/new.3ryu-engineer.work です。

リポジトリで Add file、Create new file を開き、ファイル名を .github/workflows/deploy.yml にします。スラッシュは半角の / で、前後に空白は入れません。上の表示が .github / workflows / deploy.yml の3段になれば、フォルダは正しく作れています。

中身は次のとおりです。サーバーID は、自分のサーバーIDに置き換えます。

初期ドメインが xxxx.wpx.jp なら、xxxx の部分です。

Information

ディレクトリ、サーバーIDなどの環境情報は、各自の環境に置き換えてください。

レンタルサーバーによっても異なります。

name: deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7

      - name: サブドメインへ送る
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          SSH_HOST: サーバーID.wpx.jp
          SSH_USER: サーバーID
          DEPLOY_PATH: /home/サーバーID/3ryu-engineer.work/public_html/new.3ryu-engineer.work
        run: |
          sudo apt-get update
          sudo apt-get install -y rsync
          mkdir -p ~/.ssh
          echo "$SSH_PRIVATE_KEY" > ~/.ssh/deploy_key
          chmod 600 ~/.ssh/deploy_key
          ssh-keyscan -p 10022 "$SSH_HOST" >> ~/.ssh/known_hosts
          rsync -avz -e "ssh -p 10022 -i ~/.ssh/deploy_key" \
            ./index.html \
            "${SSH_USER}@${SSH_HOST}:${DEPLOY_PATH}/"

ブランチ名が master のときは、main を master に変えます。Commit changes で保存すると、そのプッシュでこのワークフローが動きます。

ここまでできたら、Actions を開いてデプロイの状況を確認します。緑のチェックが付いた最新の実行が、成功したデプロイです。

サブドメインのURLを開くと、表示が「GitHubからプッシュしたページ」に書き換わっていることも確認できます。

まとめ

main へプッシュすると、GitHub Actions が index.html をサブドメインへ送ります。表示が「GitHubからプッシュしたページ」に変われば完了です。

プログラミングの最新記事4件