More than 3 years have passed since last update.

Svelteで生成したページをレンタルサーバに自動デプロイする

Last updated at 2020-08-19Posted at 2020-08-19

はじめに

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 には、ユーザ名@ホスト名:コピー先のパスを指定します。今回はデプロイ先を切り替えられるようにこうしましたが、
デプロイ先が固定なら直書きのほうが手っ取り早いです。

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