SFTPクライアントを利用してサーバにファイルをアップロードする


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

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

### Cyberduckのダウンロードとインストール

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

```bash
brew cask install cyberduck
```

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

### Cyberduckの起動

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


![スクリーンショット 2020-04-01 18.33.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/a76b0e28-477b-4305-9d7a-43eea97af12a.png "スクリーンショット 2020-04-01 18.33.59.png")


### Cyberduckの設定（サーバへの接続設定）

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


![スクリーンショット_2020-04-01_18_35_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/194c5e91-4d7d-44cd-4b1c-e3dc9f887b7b.png "スクリーンショット_2020-04-01_18_35_54.png")


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

* まず形式SFTPにします（一番上のプルダウンメニューから選択）
* サーバ名：localhost
* ポート：2222
* ユーザー名：root
* パスワード：CentOSのrootのパスワード

を入力します。

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


<img width="474" alt="スクリーンショット 2020-04-02 15.24.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612627/9b3f60cd-65f5-b2f3-d130-d460ec592ecf.png">


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

![スクリーンショット_2020-04-01_18_36_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/cb4d97d2-bb62-978c-d5f5-ceef938ccf53.png "スクリーンショット_2020-04-01_18_36_50.png")

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

![スクリーンショット 2020-04-01 18.40.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/7a5f79af-63d3-a352-2847-9b3022647eaa.png "スクリーンショット 2020-04-01 18.40.27.png")

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

![スクリーンショット 2020-04-01 18.40.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/a5ea18fd-ed9e-ada2-8f4c-ac9053033019.png "スクリーンショット 2020-04-01 18.40.45.png")

接続としては以上です。

### WebサーバのDocumentRootに移動

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

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

![スクリーンショット_2020-04-01_18_42_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/8c371eef-20c2-b98b-38be-544451702725.png "スクリーンショット_2020-04-01_18_42_24.png")

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

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

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

```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 ウインドウ上にドラッグアンドドロップします。
そうするとファイルがアップロードされました（再度ユーザー名やパスワードを聞かれたら入力してください）。


![スクリーンショット 2020-04-01 18.46.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/98ad2d84-2e4c-dd6a-9780-47c0aff34850.png "スクリーンショット 2020-04-01 18.46.52.png")

http://localhost:8888/test.html にアクセスしてみると、下記のような画面が表示されるはずです。

![スクリーンショット 2020-04-01 18.47.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/96fdfa23-286d-0f0e-f1e4-0f5ebe016d26.png "スクリーンショット 2020-04-01 18.47.40.png")

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

## ファイルを（リアルタイム）編集してみる

### エディタを選択する

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

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


![スクリーンショット_2020-04-01_19_02_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/4191e644-59a6-29fb-b532-38a8a85f238a.png "スクリーンショット_2020-04-01_19_02_35.png")


### エディタを開く

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

![スクリーンショット_2020-04-01_18_58_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/dbe94363-e86b-d94d-1340-8b9ec9656449.png "スクリーンショット_2020-04-01_18_58_42.png")

### 編集して更新してみる

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


![スクリーンショット 2020-04-01 19.01.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/75fe846e-f028-5728-04ab-471351245f1d.png "スクリーンショット 2020-04-01 19.01.55.png")

### 更新を確認する

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


![スクリーンショット 2020-04-01 19.03.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/df2ae236-846d-1d7b-7cd0-232bc2e52961.png "スクリーンショット 2020-04-01 19.03.44.png")




## 考えよう

* SFTPとFTPの違いはなんですか？
* SFTPとFTPSの違いはなんですか？
* なぜrootでログインしたのでしょうか？
* rootじゃない場合、どのような操作が必要ですか？