はじめに

ssh で接続可能な任意のサーバに GitHub Actions で master ブランチに push された時デプロイする仕組みを作りました。
さくらのレンタルサーバ（月額500円程度）でも使えるので、Webサイトなどを GitHub で管理しながら運用するのに使えるのではないでしょうか。
今回は、Svelte で生成した静的ファイルを配置するようにしていますが Next.js や NuxtJS でも同様にデプロイできます。

VSCode を起動

プロジェクト用フォルダを作成

ここでは svelte というフォルダを作成しました。

Dockerfile 作成

./Dockerfile

FROM node:alpine
RUN apk update && apk add git

Reopen in Container で From Dockerfile を選択しコンテナに入る

左下のを押すとメニューが出ます。

作成された .devcontainer/devcontainer.json に Svelte 拡張機能を追加

.devcontainer/devcontainer.json変更前

	"extensions": []

.devcontainer/devcontainer.json変更後

	"extensions": ["svelte.svelte-vscode"]

Rebuild Container で拡張機能を有効にする

左下のを押して選択します。

ターミナルを開いて Svelte プロジェクト作成コマンド実行

プロジェクト作成

npx degit sveltejs/template --force

メニューの Terminal / New Terminal でターミナルを開けます。

必要なパッケージをインストール

パッケージインストール

yarn

開発サーバ起動

package.json ファイルを選択すると、 NPM SCRIPTS が表示されますので、その中の dev の三角ボタンをクリックします。

ブラウザで確認

git管理開始

を押して、Source Control に切り替えます。

Publish to GitHub を押します。

ブラウザが起動して認証画面が表示されますので、 Continue を押します。

GitHub にログインして Authorize github を選択します。

連携用の token が発行されますので、コピーして VSCode に貼り付けます。

private リポジトリに Publish します。

Publish が完了しました。

右下の Open In GitHub を押すと GitHub のリポジトリが確認できます。

GitHub Actions 用ファイル作成

.github/workflows/deploy.yml

name: deploy with scp

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1 
      - run: sudo apt-get -y install sshpass
      - run: yarn
      - run: yarn build
      - run: sshpass -p '${{secrets.PASSWORD}}' scp -rvo StrictHostKeyChecking=no ./public/* ${{secrets.REMOTE}}

secrets.PASSWORD には、sshで接続する際のパスワードを sshpass で指定しています。実際の値は後ほど設定します。
REMOTE には、ユーザ名@ホスト名:コピー先のパスを指定します。今回はデプロイ先を切り替えられるようにこうしましたが、
デプロイ先が固定なら直書きのほうが手っ取り早いです。

最上位フォルダにあるファイルを選択した状態で、ファイル作成ボタンを押します。

.github/workflows/deploy.yml ファイルを作成します。

コミット

Source Control に切り替え、コミットコメントを入力し（ここでは、「add github actions file」）コミットボタンを押します。

GitHub の Settings / Secret で PASSWORD, REMOTE を作成

PASSWORD には、sshのパスワード、
REMOTE には、ユーザ名@ホスト名:コピー先のパスを指定

New secret ボタンで作成できます。

さくらのレンタルサーバの場合はさくらの管理画面にログインし国外IPアドレスフィルタを OFF にする

※GitHub は海外のサーバのため、これをしないと scp の認証時にエラーになります。

GitHub に Push

View and More Actions... ボタンから Push を選択します。

GitHub Actions の状態を確認

All workflows の add github actions file をクリックすると実行状態を確認できます。

全て緑のチェックがついていれば正常終了です
※Run sshpass の行でエラーになっている場合は、Secrets の設定名や内容が間違っていないか、国外IPアドレスフィルタがONになっていないかなどを確認してください。

サイトの確認

デプロイ先のレンタルサーバ等のURLにアクセスして表示されれば成功です。