SFTPクライアントを導入する

サーバ上でファイルを編集してもいいのですが、通常はローカル環境で作業・動作確認し、SFTPクライアントを利用してサーバにアップするのが一般的なので、試してみます。

Macでよく利用されているファイルアップロードクライアントであるCyberduckを利用してみます。
CyberduckはbrewでもApp Storeからもインストールできます。

brew cask install cyberduck

すでにcyberduckがインストールされているとエラーになります（追加インストールの必要はありません）。

インストールが成功すればLaunchpadにアイコンが追加されるのでクリックして起動します。

Cyberduckが起動したら接続するサーバを登録します。左下の[+]ボタンをクリックします。

登録画面が起動するので、

を入力します。

通常rootユーザーを利用することありません。またリモートからのrootログインは不許可に設定するのが一般的です。

入力したら一度Windowを閉じます（左上の赤丸をクリック）。
そうするとサーバが登録されているので、アイコンをクリックして接続させます。

このとき再度ユーザー名とパスワードを聞かれる場合がありますが、おとなしく入力します。

そうするとログインが成功し、rootのホームディレクトリが表示されます。

接続としては以上です。

ただ単にサーバにファイルをアップしたいだけならrootのホームディレクトリでも問題ありませんが、今回はWebコンテンツをアプロードしたいので公開ディレクトリ（DocumentRoot）に移動します。

上部のプルダウンメニューを利用して/var/www/htmlまで移動します。

移動したら前のセクションで作成したファイルが存在しているのが確認できます。

ファイルをアップロードしてみる

存在するファイルを編集してもいいのですが、新規にアップロードしてみます。
下記のコードをtest.htmlとしてデスクトップ等に保存します。

test.html

<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
</head>
<body>
this is a test file.
</body>
</html>

保存したらCyberduckの /var/www/html ウインドウ上にドラッグアンドドロップします。
そうするとファイルがアップロードされました（再度ユーザー名やパスワードを聞かれたら入力してください）。

ローカルファイルをサーバ上にアップロードして確認することができました。

Cyberduckで利用するエディタを設定します。
Cyberduckメニューから環境設定を開き、外部エディタを設定します。

ここではVisual Studio Codeを設定します。

編集したいファイルを選択した状態で[編集]をクリックします。

ファイルを編集して保存するとリアルタイムにサーバのファイルに反映されます。

保存（更新）が完了したらブラウザで更新を確認します。