【Atom】Remote FTPを使ってエックスサーバーにファイルを送る！｜設定と使い方を解説

こんにちは。いっとくです。

高校生の時に流行っていたものはトミーヒルフィガーのボストンバッグです。

最近友人がダンススクールを始めたので、そのWebサイトを作ったのですが、へ編集するたびにFTPソフトでいちいちサーバーにアップロードするのが面倒臭かったので、AtomのパッケージのRemote FTPを使って編集して速攻アップロードできるようしたので、その時のメモを残しておこうと思います！

まずはエックスサーバーの管理画面でSSHの設定を行う
AtomのRemote FTPでエックスサーバーと接続する

まずはエックスサーバーの管理画面でSSHの設定を行う

SSH接続でファイルのアップロードを行いたいので、まずはエックスサーバーのサーバーパネルにアクセスし、SSHの設定を行いましょう。

SSHの設定がONになっているかを確認しましょう。

SSHがONになっていたら、「公開鍵認証ペアの生成」のタブに切り替えて、任意のパスフレーズを入力して鍵を生成します。

すると鍵のファイルがダウンロードされるので、名前を変更し、わかりやすい場所に保存しておきましょう。

鍵のファイル名 => id_rsa　保存場所 => ./ssh

とかで保存するのが一般的ですね。

僕はまんまそれで保存していますが、もしかするとwindowsだと別の定番があるのかもしれない。

保存したら、コマンドが使えるソフトを開き、ディレクトリとファイルのパーミッションを変更しておきましょう。

# .sshディレクトリのパーミッションを700に変更
$ chmod 700 ~/.ssh

# 秘密鍵のパーミッションを600に変更
$ chmod 600 ~/.ssh/id_rsa

以上で、SSH周りの設定は終了です！

次にAtom側での設定を行いましょう！

AtomのRemote FTPでエックスサーバーと接続する

まずはRemote FTPのパッケージをAtomにインストールしましょう！

ツールバーから設定画面（Preferences）を開きます。

設定をクリック — ちなみに「コマンド + 、」で開けるので覚えておくと便利です

開いたらパッケージのタブからRemote FTPを検索してインストールしましょう。

Remote FTPのインストールが完了したら、次は設定ファイルをいじっていきます。

ツールバーのパッケージ(Packages)の中にRemote FTPが追加されているので、「Create SFTP config file」を選択し、設定ファイルを作成します。

設定ファイルが開かれると思うので、以下のように埋めましょう。

{
    "protocol": "sftp",
    "host": "サーバーID（例 sv****.xserver.jp）",
    "port": 10022,
    "user": "サーバーパネルのログインに使用しているユーザー名",
    "pass": "",
    "promptForPass": false,
    "remote": "サーバー内のどこにアップロードしたいかを指定（例 /home/ユーザー名/サービスのディレクトリ/public_html/ディレクトリ名/）",
    "local": "",
    "agent": "",
    "privatekey": "sshの鍵のパス（僕の場合　~/.ssh/id_rsa）",
    "passphrase": "公開鍵の生成時に使ったパスフレーズ",
    "hosthash": "",
    "ignorehost": false,
    "connTimeout": 10000,
    "keepalive": 10000,
    "keyboardInteractive": false,
    "keyboardInteractiveForPass": false,
    "remoteCommand": "",
    "remoteShell": "",
    "watch": [],
    "watchTimeout": 500
}

remoteのパスを間違えると意図しないディレクトリにファイルがアップロードされるので気をつけましょう。ローカル環境でのftpconfigがあるディレクトリに対応するサーバーのディレクトリを記述してあげます。

以上で設定が完了！

試しにサーバと接続してみましょう。

ツールバーのパッケージからRemote FTP -> Connectを選択。