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

# はじめに

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

# VSCode を起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/f8482583-e048-1a40-6b7c-0d3e51e1d5ea.png)

# プロジェクト用フォルダを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/a5cc6568-dbc4-2b39-bbc1-055e8243d284.png)
ここでは svelte というフォルダを作成しました。

# Dockerfile 作成

```dockerfile:./Dockerfile
FROM node:alpine
RUN apk update && apk add git
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/98b83b93-9221-f03c-021b-e417ec65f396.png)

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

左下の ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/df9e2706-5fc3-f40f-116b-1feb526e77c6.png) を押すとメニューが出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/bcabef7c-9c51-928e-31f3-fe3edb507b9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/a2489259-fbd5-0a53-f22d-4d4fab0e7e6a.png)

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

```json:.devcontainer/devcontainer.json変更前
	"extensions": []
```

```json:.devcontainer/devcontainer.json変更後
	"extensions": ["svelte.svelte-vscode"]
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/b6a80f9b-9d1d-9d45-da6e-fb10004013ab.png)

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

左下の ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/34360097-2bc3-59ff-875c-fafe52c7f9b4.png) を押して選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/614ce655-2711-8b3c-f359-ec4c1666904b.png)

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


```sh:プロジェクト作成
npx degit sveltejs/template --force
```

メニューの Terminal / New Terminal でターミナルを開けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/086ccc15-1d99-44b8-9d37-d9cd57e4ded1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/c6e229d1-0e51-ff63-f144-eafb62112836.png)

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

```sh:パッケージインストール
yarn
```

# 開発サーバ起動

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/16a1a0e0-daa1-8ce4-f0c5-770bd6dec436.png)

# ブラウザで確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/47e3bf9f-8100-5b39-f5c9-17850f012b45.png)

# git管理開始

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/30deeca4-ee39-2b4c-3d70-d2fdf8f88086.png) を押して、Source Control に切り替えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/df59cd6b-214c-f1ef-9d69-defc6daf3dea.png)
Publish to GitHub を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/f3d4ba09-768b-cec8-4eff-83cb6334a71a.png)
ブラウザが起動して認証画面が表示されますので、 Continue を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/84669091-5f35-a7b9-3d2e-50c0cf2a7973.png)
GitHub にログインして Authorize github を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/83425a3b-c87d-c75b-15b5-e6a442ed3a18.png)
連携用の token が発行されますので、コピーして VSCode に貼り付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6fb27d51-c127-b367-4d78-d696f51c1807.png)
private リポジトリに Publish します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6df851b0-4720-99fc-2ac3-d6a6e9fbfbcb.png)
Publish が完了しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/e1d74946-59e0-3034-c96e-25a17ee743ec.png)
右下の Open In GitHub を押すと GitHub のリポジトリが確認できます。


# GitHub Actions 用ファイル作成

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/daa80299-1e2b-29b7-96f9-5ceaf0b3eb63.png)
最上位フォルダにあるファイルを選択した状態で、ファイル作成ボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/8d31cde3-6ad1-c26d-c567-8c06b3544ba1.png)を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/5032ce4a-2522-7115-6977-e6eaad6e03bb.png)
 .github/workflows/deploy.yml ファイルを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/2f461f62-c7df-db4e-7a3f-74bca042c68b.png)

# コミット

Source Control に切り替え、コミットコメントを入力し（ここでは、「add github actions file」）コミットボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/c22bc7ff-66ae-8853-5222-da9899d05962.png)を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/130aa29b-e5aa-4079-9728-742316e7247c.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/c7eed9ae-6286-24ea-cf72-e5b9fe9d4c71.png)
New secret ボタンで作成できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/b2fcc243-6dcb-9c69-c4ea-bf6652ad556a.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/10d79e31-2c3d-d9d3-56ce-69717820a6e1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/84f41dce-5704-2624-3cf7-b0e19dd8f7f1.png)
※GitHub は海外のサーバのため、これをしないと scp の認証時にエラーになります。

# GitHub に Push

View and More Actions... ボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/9c28464f-c282-3345-a4a7-34f22d4c5212.png)から Push を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/1e844292-c09d-0593-b9cc-1b0e3f1abc0c.png)

# GitHub Actions の状態を確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/2e72f9fd-47c5-5f9b-e6d1-aa4b099148ce.png)
All workflows の add github actions file をクリックすると実行状態を確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/a96c43a6-ba5a-63ab-989e-fc424a3f8c77.png)
全て緑のチェックがついていれば正常終了です
※Run sshpass の行でエラーになっている場合は、Secrets の設定名や内容が間違っていないか、国外IPアドレスフィルタがONになっていないかなどを確認してください。

# サイトの確認

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/de7487b1-7abf-d42a-ea05-07973ae3e290.png)