さくらインターネット Advent Calendar 2020 - Day 7

3 年連続登場！ 一般ユーザーの ふうせん🎈 FU-SEN です。
一昨年は Akuras（サービス終了により記事は削除済み）、
昨年はさくらのレンタルサーバの SSL・.htaccess 関連でした。

🎈 さくらのレンタルサーバの話ですが、ところで……。| ふうせん🎈 FU-SEN

現在も さくらのレンタルサーバ ライト を継続使用しています。
独自ドメインのメールサーバが必要だったので契約しているのですが、
更に IchigoJam の周辺機器である MixJuice のコンテンツとして
現在 さくらのレンタルサーバ を使用しています。

http/2 対応だと、MixJuice が 1.2.2 以降になってしまう問題があったのですが、
2020 年になって http/2 対応がかなり進み、
どのサーバを使用しても変わらない状態になったので、
さくらのレンタルサーバを使用する手段に落ち着いた、という経緯があります。

🎈 Ichigojam web で使えるようになったバーチャル MixJuice を使ってみる。| ふうせん🎈 FU-SEN

数日前にも MixJuice の記事を公開してありますので、気になる方はそちらをどうぞ。

 さくらインターネットが提供するIoTプラットフォームサービス、sakura.io ｜ IchigoSoda/IchigoJam for sakura.io

さくらインターネット と IchigoJam との接点は
IchigoSoda という IchigoJam 互換機がある！ という事も紹介しておきます。

この MixJuice コンテンツは GitHub で公開しているので、git-ftp を使えます。

 Git-ftp – uploads to FTP servers the Git way - git-ftp/git-ftp | GitHub

git push で公開した後に git ftp push でアップロードするわけです。
今だと GitHub Action などを使用して自動化する人もいると思いますが、
自分は確実なアップロードと確認ができるように手作業にしてます。
でも FTP クライアントでアップロードするよりも容易です。

では、GitHub などで公開していない場合はどのようにするか？

ええ、実はここが原因で さくらのレンタルサーバ を使いこなせずにいたのです。
もう自分は FTP をほとんど使いません。
Windows ですが、 PowerShell 起動して、コマンドでデプロイするのが当たり前。
FTP のセキュリティは FTPS・SFTP で良いのですが、（さくらのレンタルサーバは対応してます）
問題はファイル転送が 1 ファイルずつで、ファイルが多くなると同期に時間を要したり、
最近は UTF-8 の扱いが標準になって、
古い FTP クライアントだと文字コードの問題も出てきます。

GitHub を探せば良いものがあるような……💻ｶﾀｶﾀ…あ、これこれ！

 Simple command-line interface for ftp-deploy - ball6847/ftp-deploy | GitHub

ftp-deploy が使用している  Basic FTP が FTPS にも対応しています。
FTPS は さくらのレンタルサーバ でも使用できるので、これなら安心です。

まずは npm でインストールしまして……

npm i -g @ball6847/ftp-deploy

そして次を実行します。

ftp-deploy ローカルの場所 ftps://ユーザー:パスワード@ユーザー.sakura.ne.jp/~/www/アップロード先

~/www/ が初期ドメイン ユーザーsakura.ne.jp での公開先ですね。
ドメインに応じて、後ろに付加するようになります。

Windows 向けのバッチファイルを入れておきます。Windows 10 でも大丈夫です。

@echo off
setlocal

set DOMAIN=ドメイン

title ftp-deploy %DOMAIN%

set LOCAL=%DOMAIN%/

set PROTOCOL=ftps
set USER=ユーザー
set PASS=パスワード
set HOST=ユーザー.sakura.ne.jp
set DIR=www/%DOMAIN%/

set URL=%PROTOCOL%://%USER%:%PASS%@%HOST%/~/%DIR%

call ftp-deploy %LOCAL% %URL%

endlocal

pause

エクスプローラから .bat ファイルをクリックするだけでデプロイできます。

セキュリティを気にする場合はパスワード部分を改良してみて下さい。
例えば Hugo を使っているなら ftp-deploy の前に hugo する等もできますね。

ftp-deploy はローカルの状態を完全に反映させます。これはファイルの削除が含まれます。
ディレクトリの指定によっては公開ファイルを削除して破壊してしまう恐れがあるので、
くれぐれも DIR 部分のアップロード先にはご注意下さい。

おまけ。ftp-deploy を用いて、ユーザー.sakura.ne.jp を更新したい場合、
www/ 直下でサブドメインを無視する、という事ができません。
www/ をアップロード先にすると、
他ドメイン向けのディレクトリがバッサリ削除されてしまうわけですね。😲😅😣
そこで www/ユーザー.sakura.ne.jp フォルダ内で公開するようにします。
コントロールパネルからは設定できませんが、
実は www/.htaccess 内に記載を含めて、これが実現できます。

RewriteEngine On

RewriteCond %{HTTP_HOST} ユーザー.sakura.ne.jp
RewriteRule ^(.*)$ /ユーザー.sakura.ne.jp/$1 [L]

これで ユーザー.sakura.ne.jp も他のドメインのようにフォルダ内で扱えます。
こんな裏技があったとは！ 😲😲😲
ユーザー.sakura.ne.jp を使えずにいた人も、これで使い道ができたかもしれません。

注意として https://ユーザー.sakura.ne.jp/dir/ を参照する場合、
www/ユーザー.sakura.ne.jp/dir よりも www/dir が優先されます。
使用してみたい場合は www 内の状態にご注意下さい。

追加 2021/05/02

アプリが npm を採用している事が多いので、
最近は npm を使う機会が多くなっていますが、
package.json にコマンドや設定を記載して、npm run で実行するのも良いですね。

package.json は次のようになります。
Windows 向けなのにご注意下さい。他の OS は環境変数が異なります。

{
  "config": {
    "PROTOCOL": "ftps",
    "USER": "username",
    "PASS": "password",
    "HOST": "example.sakura.ne.jp"
  },
  "scripts": {
    "deploy": "ftp-deploy ./ %npm_package_config_PROTOCOL%://%npm_package_config_USER%:%npm_package_config_PASS%@%npm_package_config_HOST%/~/www/"
  }
}

これで

npm run deploy

で FTP のアップロードを行えます。便利～～～ 💻😁
コマンドを入力するのが好みの場合はこの方が良いですね。

deploy 行の ./ 部分がローカル側のアップロード元、
末尾 www/ から追加して、アップロード先の下層ディレクトリを指定します。
もちろん静的サイトジェネータなどでは deploy 行の頭に
ビルドコマンドを追加する事もできます。
シンプルに HTML のアップロードですむようであれば、
deploy をドメイン名にして、複数記載しても良いですね。

今は GitHub Action などの方法もありますが、
海外のサービスから FTP などをする場合、
国外IPアドレスフィルタ を無効にする必要が出てくるので、
セキュリティ的な攻撃を受けやすくなってしまいます。
FTP などを日本に限定するだけでも効果は大きいです。

 国外IPアドレスフィルタ - さくらのサポート情報

という事で、自分はさくらのレンタルサーバでは
パソコンから直接ビルド・デプロイする方法を使用しています。

追加 2022/05/20

現在自分は Basic FTP を用いています。

 basic-ftp | npm
 patrickjuchli/basic-ftp | GitHub

こんな感じのソースを作っておきます。 sakura.js とでもしておきましょう。
その下層に HTML があるドメイン名を一覧しておきます。

const ftp = require("basic-ftp")
const client = new ftp.Client()
client.ftp.verbose = true

let remote = "~/www/" + process.argv[2]
let local = process.argv[2]

FTPDeploy().then(() => {
  console.log('success!');
})

async function FTPDeploy() {
  try {
    await client.access({
      host: "ユーザー名.sakura.ne.jp",
      user: "ユーザー名",
      password: "パスワード",
      secure: true
    })
    await client.ensureDir(remote)
    await client.clearWorkingDir()
    await client.uploadFromDir(local)
  }
  catch(err) {
    console.log(err)
  }
  client.close()
}

同じところに package.json を作成します。

{
  "scripts": {
    "ユーザー.sakura.ne.jp": "node sakura.js ユーザー.sakura.ne.jp",
    "example.com":           "node sakura.js example.com",
    "example.net":           "node sakura.js example.net"
  },
  "dependencies": {
    "basic-ftp": "^4.6.6"
  }
}

これで

npm run ユーザー.sakura.ne.jp

で初期ドメイン

npm run example.com

で独自ドメインやさくらインターネットのサブドメインも行えます。
独自ドメインは www/example.com などと、
www 内に独自ドメイン名で設定している前提です。

ここではすでに生成された HTML ファイルなどを
アップロード（デプロイ）する前提です。

ユーザー.sakura.ne.jp は通常 www 内になりますが……
www に次の .htaccess を入れます。
すでにあれば追加します。（追加場所に注意）

RewriteEngine On

RewriteCond %{HTTP_HOST} ユーザー.sakura.ne.jp
RewriteRule ^(.*)$ /ユーザー.sakura.ne.jp/$1 [L]

これで www 内に ユーザー.sakura.ne.jp を作成できます。

p.s. 🎈 イチゴジャム レシピ 運営者より、 SAKURA.Jam は……えっ、もうない!? 😭

さくらインターネット Advent Calendar 2020

 さくらインターネット Advent Calendar 2020 | Qiita