この記事で分かること

Reactやvueアプリをサーバーにアップロードする場合rsyncというLinuxコマンドを使用して手軽に更新できる。

しかし、Windowsからだと情報も少なく様々なエラーでなかなかうまくいかない箇所が多かった。

そこで恐らく多くの人が遭遇するトラブルを解決しながら一通りの手順を解説する。

rsyncって何？

サーバー側のディレクトリにローカルのファイルを同期するlinuxコマンド。

これの良いところはgitのようにリモートとローカルの「差」を検知してそれに応じてデータ通信をするので、巨大なアプリであっても変更されたファイルだけ送受信すれば良いところ

gatsbyのような大量のファイルを扱うアプリでは非常に重宝する。

Github Actionsは使わない

この手の記事を検索すると、殆どがGithub Actionsを経由してrsyncを実行している。

恐らく上で書いたようにWindowsから作業するとエラーが多く使用感が悪いためだと思われる。

ただGithub Actionsを利用するとなるとgit側にビルド後のファイルをアップロードする必要がありコミット時等に重要なファイルの更新履歴などが見にくくなってしまう。

そこでこの記事ではWindowsから直接webサーバーと同期できる方法を記す。

Cygwinを使う

この記事ではSSHのターミナルとしてCygwinを使用することとする。

そもそもWindowsにはrsyncの機能がないがCygwinはインストール時にこの機能を追加できる。

インストール時の注意

この記事では誰でも分かるレベルのインストール手順は省略する。

ただSelect Local Package Directoryの画面でパッケージを保存するディレクトリの初期値がWindowsのTempフォルダになってしまっているため、勝手に削除されてしまう恐れがある。

ここだけ変更することをおすすめする。

私は上のようにCygwinと同じディレクトリに作成した。

インストール時に追加する機能

インストール時にパッケージを選択する箇所があるが、ここでrsyncなどの機能を追加する必要がある。

次の2つをチェックして次へ(検索を利用すると楽)

• rsync
• openssh

SSHのログインを試しておく

Cygwinを起動して自分のサーバーへSSHログインを試しておく。

この時私は秘密鍵ファイルを使ってログインしたのだが次のエラーに悩まされた

Warning: Identity file [ファイル名].pem not accessible: No such file or directory.

ファイルが無いと言われる。

これはCygwin本体がアプリ配下のディレクトリ以外に直接アクセスできないようになっているからだ。

この場合はディレクトリパスの頭に/cygdrive/をつけてやれば良い。

実際に動作したSSHコマンドは次のようになった。

ssh [ユーザ名]@[サーバ名] -p 8022 -i /cygdrive/c/user/.ssh/[ファイル名].pem

Cygwin本体の設定を変更する(重要)

[Cygwinのインストールディレクトリ]/etc/fstabファイルをメモ帳で開いて編集する。

none~から始まっている行にnoaclとnotexecを追加する

変更後例

none /cygdrive cygdrive binary,posix=0,user,noacl,notexec 0 0

なぜ必要か？

rsyncする時にLinux側のファイルのパーミッション設定が変になってアクセスできなくなるため。

rsyncはデフォルトでWindows側のセキュリティ設定をLinux側のパーミッションに変換して設定してしまう。

そもそもLinuxとWindowsは別物なのでこれをnoaclにしておかないと自動的にすべてのファイルがアクセス不可能になってしまう。

最終的に動作OKだったコマンド例

Cygwinにて次のコマンドで完全に成功した。

rsync -ahvz --delete --info=progress2 -e "/cygdrive/C/cygwin64/bin/ssh -p 8022 -i /cygdrive/C/Users/[ユーザ名]/.ssh/[キー名]" /cygdrive/C/Users/[ユーザ名]/Documents/[なんやらかんやら]/ [ID]@[サーバ.com]:./public_html/ultra-noob.com/

それぞれ何をやっているのかメモする

rsync

言うまでもなくrsyncを呼び出すコマンド

-ahvz

オプション。

これに関しては-aが最も重要かと思う。

-aはフォルダを再帰的にコピーしたり、タイムスタンプを継承したりと、おおよそ必要なものがセットになったオプション。

他は割と適当でもなんとかなりそう。わからなければこれをそのまま使えば概ね良いのではないだろうか。

--delete

元フォルダ存在せず、コピー先フォルダに存在した場合、コピー先のファイルを「削除」する。

gatsby.jsの場合は同じページのデータでもビルドするたびにファイル名が変わる。

つまり、このオプションがないとコピー先にごみが溜まり続けてしまう。

--info=progress2

コピーの進行状況を見やすくするオプション。

-e

このオプションを指定した次にSSHのログインコマンドを指定する重要オプション。

これに続くコードをダブルクォーテーションで囲ってSSHにログインする。

"/cygdrive/C/cygwin64/bin/ssh -p 8022 -i /cygdrive/C/Users/[ユーザ名]/.ssh/[キー名]"

この中の/cygdrive/C/cygwin64/bin/ssh

ここがなぜsshではなく/cygdrive/C/cygwin64/bin/sshになっているのかというとCygwinではなくWindows側のコマンドプロンプトからsshだけで呼び出した時にWindows内蔵のsshが優先的に呼ばれてしまうため。

これを追加しないとバッチファイル化して起動するときにエラーで接続できない。

Cygwinの中でコマンドを打つだけなら必要ないのだが、後の項でバッチファイル化して簡単に起動する方法を記載するため、始めからこのようにしている。

もちろんこのフルパスをCygwinで打ち込んでも正常動作する。

最後のパス２つ

最後にコピー元、コピー先のパスを指定している。

/cygdrive/C/Users/[ユーザ名]/Documents/[なんやらかんやら]/ [ID]@[サーバ.com]:./public_html/ultra-noob.com/

ここで最初にコピー元、次にコピー先のパスを指定する。

このときコピー元の最後のスラッシュが重要であることを覚えておく

ここにスラッシュをつけない場合、出力結果は./public_html/ultra-noob.com/[なんやらかんやら]/[ファイルたち]というようなディレクトリ構造になる。

スラッシュを付けた場合は、コピー元のディレクトリを「展開して」その中身をコピーという動きになる。

つまり./public_html/ultra-noob.com/[ファイルたち]のようになる。

コピー先の「./」は何？

コピー先の頭が./から始まっているがConoHa Wingのサーバーで実行する場合このドットが抜けるとエラーで動かない。

バッチファイル化

上までの例で既に正常に動作するのだが、ダブルクリックorコマンドラインから簡単に呼び出せるようにしたい。

そこで次のバッチファイルを作成した。

@echo off
rem バッチファイルのファイル名をrsyncにするとエラーになるので注意

SETLOCAL
SET PATH=C:\cygwin64\bin;%PATH%

SET PORT_NO=8022
SET KEY_PATH=/cygdrive/C/Users/[ユーザ名]/.ssh/[キー名]
SET SSH_USER=[ID]@[サーバ.com]
SET PATH_SOURCE=/cygdrive/C/[なんやらかんやら]/
SET PATH_DIST=%SSH_USER%:./public_html/ultra-noob.com/

rsync -ahvz --delete --info=progress2 -e "/cygdrive/C/cygwin64/bin/ssh -p 8022 -i %KEY_PATH%" %PATH_SOURCE% %PATH_DIST%

pause

SET PATHでCygwin本体のパスを入れることでその配下のrsyncコマンドをバッチファイルから呼び出せるようにしている。

また、上でも述べたがここで-eに続くsshコマンドはcygwin64/bin/のなかにあるものを直接呼び出さないとWindows側のSSHが使用されてしまいエラーとなる。

更にこのバッチファイルをコマンドラインから呼び出す場合はcallコマンドを使う。

さいごに

今回多数のWEBサイトを参考にさせていただきました。

この場をかりて感謝します。素晴らしい記事をありがとうございます。