![【2017年版】Sublime Text 3で鍵を使ってXserverとSFTP接続する方法[ST3シリーズ04]](https://tips4life.me/in_post/images/2017/09/sublime_text-sftp-xserver/sublime_text-sftp-xserverTP.jpg)
前回の記事【2017年版】Sublime Text 3の神パッケージ「SFTP」の設定と使い方[ST3シリーズ03]で「ロリポップ！でSFTPを使う方法」を紹介しましたが、今回は「Xserver編」となります。
XserverでSFTPを使うためには鍵（key）を使って通信をしなくてはならないため、少々手間がかかります。
とはいえ鍵を使うことでセキュリティはより一層強固なものになるのは間違いないので、Sublime Text 3をお使いの方でXserverをお使いの方はこの記事を参考に設定してみてください☆
初心者の方にはちょっとハードルが高いかもしれませんが、検索してもなかなか良い記事が見つからなかったので、なるべくわかりやすく書いてるのでこの記事の通りにやってみてください。
※もしわからない事などあればコメントかTwitterからご連絡頂ければ出来る範囲でお応えします。
「Sublime Text 3シリーズ」は他にも以下の記事がありますので、初めてSublime Text 3を使うという方は最初から順番にご覧頂く事をおすすめします。
Contents
全体の流れ
まずは今回の目的である「鍵を使ってXserverとSFTP接続する」を達成するまでの全体の流れが以下になります。
※本記事では、使うフリーソフトに「FileZilla」と「TeraTerm」を使って説明してますが、他のソフトでも出来ると思いますのでご自身にあったソフトを使って頂いて結構です。
[ 全体の流れ ]
1. 鍵の作成準備（TeraTermのインストール）
2. TeraTermで公開鍵と秘密鍵の作成
3. XserverでSSHの設定をON＆公開鍵の登録
4. FTPソフトの準備（FileZillaのインストール）
5. FileZillaでFTP情報の登録＆SSHの設定・確認
6.「sftp-config.json」の設定＆確認
という流れになります。
※FileZillaの項目は不要といえば不要なのですが、後述する「id_rsa.ppk」の生成に使うので入れてあります。
ちょっと手間がかかって難しそうな感じがするかもしれませんが、この記事の通りにやれば問題なく出来ますのでさっそくやってみましょう！
鍵の作成準備（TeraTermのインストール）
XserverとSFTP接続をする為には「鍵」が必要になります。
鍵には「公開鍵」と「秘密鍵」があり、この2つの鍵を使ってSFTP接続をします。
鍵を作成する方法はいくつかあるのですが、今回はその中でも個人的に一番簡単だと思う「TeraTerm」を使った方法で紹介します。
まず、「ダウンロードファイル一覧 – Tera Term – OSDN」へ行き、以下の画像を参考に最新版のファイルをダウンロードします。
※クリックで拡大出来ます。
ファイルのダウンロードが完了したら、あとは特に難しいポイントもないので画面通りに進めて行けば問題なく簡単にインストール出来ます。
TeraTermで公開鍵と秘密鍵の作成
TeraTermのインストールが完了したら「公開鍵」と「秘密鍵」の作成です。
「公開鍵」に関しては誰に見られても問題ないのですが、「秘密鍵」は絶対に見られてはいけないので必ずローカル上に保存し、自分以外が見れない状態にしておくよう注意して下さい。
TeraTermの日本語化
先程インストールしたTeraTermを開いて、メニューなどが英語表記になっている場合は、まずはこれを日本語表記に変更します。
TeraTermを日本語表記にする方法は以下の通りです。
メニューの［Setup］ > ［General］と進みます。
すると以下の画面が表示されるので「Language」と「LanguageUI」を以下の通りにします。
これで日本語化はOKです。
次に「公開鍵と秘密鍵の作成」です。
メニューの［設定］ > ［SSH鍵生成］と進みます。
以下の画面では「鍵の種類」が「RSA」、「ビット数」が「2048」になっている事を確認して「生成」をクリック。
すると以下のように「鍵を生成しました。」と表示されて「鍵のパスフレーズ」と「コメント」が入力出来る様になるので、それぞれ入力します。
「パスフレーズ」というのは「長めのパスワード」とでも思って頂ければOKです。
※パスフレーズは無くさないよう必ず保管しておきましょう。
※パスフレーズは本記事でも何度も使うのでメモ帳などにコピペしていつでも開ける状態にしておくと良いです。
コメントに関しては入力してもしなくても問題ありません。
「公開鍵の保存」をクリックして任意の場所に公開鍵を保存します。
※公開鍵ファイル名は「id_rsa.pub」になっていると思うのでそのままで大丈夫です。
次に「秘密鍵の保存」をクリックして、同じく任意の場所に保存します。
※秘密鍵のファイル名はid_rsaになっていると思うのでそのままで大丈夫です。
これで「公開鍵」と「秘密鍵」の作成＆保存が出来ました☆
XserverでSSHの設定
Xserverもロリポップ！と同じでデフォルトだとSSHは利用できない設定になってます。
これを解除する為に、以下の手順でSSHをONにしてあげます。
[ SSHをONにする手順 ]
1.Xserverのインフォパネルへログイン
2.Xserverのサーバーパネルへログイン後、「SSH」の項目にある「SSH設定」をクリック。
3.「SSH設定」タブでONにするボタンをクリック。
これでXserver側でSSHをONに設定出来ました。
次に、FTPソフトの設定時に使うのでXserverのサーバーパネルへログインして［FTPアカウント設定］ > 対象のドメインの右にある［選択する］をクリック > ［FTPソフト設定］のタブを選択して、「FTPサーバー(ホスト)名」、「ユーザー名(アカウント名)」、「パスワード」をメモ帳などにコピペして保存しておきましょう。
Xserverに公開鍵の登録
先程TeraTermで生成した鍵は「公開鍵」と「秘密鍵」ですが、このうち、公開鍵、（id_rsa.pub）をXserverに登録します。
前項と同じ画面で、「公開鍵登録・設定」というタブを選択すると以下の画面になります。
次に、先程生成した公開鍵（id_rsa.pub）をテキストエディタ（Sublime Text 3でOK）で開き、記述されているコードを全てコピーして以下の赤枠内へ貼り付けます。
公開鍵を登録する（確認）をクリックすると確認画面が出るので公開鍵を登録する（確定）をクリックして終了です☆
FTPソフト（FileZilla）のインストール
今回紹介する方法ではFTPソフトにフリーソフトの「FileZilla」を使いますので、以下を参考に「FileZilla」をインストールしましょう。
今サーバーの管理画面でFTPの操作をしてる方も、FTPソフトを使った方が便利で効率的で安心で良い事ばかりなので絶対にFTPソフトは使えるようになった方が良いです。
そもそも「FTP」という単語が出てきた時点で「難しそう」と感じるかもしれませんが、実際にやってみると非常に簡単で、すぐに自分にとって必須のツールになっていきます。
今回の「Sublime Text 3シリーズ」で紹介しているテキストエディタに関しても同じことが言えますが、便利なツールを使っていくと「Wordpressの管理画面で作業するのがムリになるほど快適な環境」になるので、その分執筆にも集中出来ます。
前置きが長くなってしまいましたが、さっそく「FileZilla」をインストールしましょう！
まず「ダウンロードファイル一覧 – FileZilla – OSDN」へ行くと以下のような画面が表示されます。
上記ページの「ダウンロードパッケージ一覧」の中に「パッケージ FileZilla_Client のリリース」の項目がありますので、以下の画像を参考にご自分の環境にあったものをダウンロードして下さい。
あとは特に難しいポイントも無いので、ダウンロードしたファイルを開いて画面通りに進めて行けば問題なく簡単にインストール出来ます。
FileZillaでFTP情報の登録
FileZillaのインストールが完了したら「FTP情報の登録」です。
FileZillaを起動すると以下の画面が開きますので、メニューから［ファイル］ > ［サイトマネージャ］と進みます。
サイトマネージャを開いたら「新しいサイト」をクリックします。
以下の「新規サイト」の部分に任意の名前を入力し、右側の項目に「XserverでSSHの設定」の項でメモした「FTPアカウント設定」の情報を見ながら必要事項を入力します。
以下を参考に、Xserverのサーバーパネル内の「FTPアカウント設定」の情報を見ながら入力してください。
[ 入力事項 ]
「ホスト」→FTPサーバー(ホスト)名
「ポート」→10022
「プロトコル」→SFTP – SSH File Transfer Protocol
「ログオンの種類」→通常でOK
「ユーザ」→ユーザー名(アカウント名)
「パスワード」→入力しなくてOKです
上記の入力が終わったら一旦OKボタンでウィンドウを閉じます。
FileZillaでSFTPの設定
サイトマネージャでFTP情報の登録が終わったら、SFTPの接続設定を行います。
メニューから、［編集］ > ［設定］と進むと以下の画面が表示されます。
左のツリーから「SFTP」を選択すると右側が以下のように変わるので「鍵ファイルを追加」をクリック。
鍵ファイルを選択する画面になるので、先程「TeraTerm」で作成した「秘密鍵（id_rsa）」を指定します。
すると、FileZillaが「RSA」の形式に対応していないので以下のポップアップが表示されるので「はい」をクリック。
以下の画面では、TeraTermで鍵を作成した時に「鍵のパスフレーズ」に入力したパスフレーズを入力して「OK」をクリック。
ファイルの保存画面になるので、混乱しないように先程と同じ場所に保存します。（説明のために同じ場所と書いてますが別の場所でもOKです）
※ファイル名を変更する必要はありませんが、拡張子（.以降の文字）は「ppk」とします。
以下のように「id_rsa.ppk」のファイルがアップされたら赤丸のOKをクリックしてウィンドウを閉じます。
これでFileZillaに対して「秘密鍵」の設定が完了しました。
あとはサイトマネージャーから先程FTP情報を登録したサイトを選択して接続をクリックするとパスフレーズの入力を求められるので、TeraTermで鍵を生成したときに入力したパスフレーズを入力してOKで接続されます。
※ここでうまく接続されない場合は、再度ここまでの説明をよく見直してみてください。
パッケージ「SFTP」の設定
ここまで済んだらあとはSublime Text 3のパッケージ「SFTP」で「sftp-config.json」の設定です。
※「sftp-config.json」の設定方法までは以下の記事をご覧ください。
今回「sftp-config.json」の中で編集する項目は以下になります。
[ 各項目説明 ]
1.接続方式を選択できます。今回は「sftp」とします。
2.アップロード前に保存するかを設定できます。今回は「true」とします。
3.「ファイルの保存と同時にアップロードするか」を設定できるので「true」にします。
4.サーバーのホスト名を入力します。
5.ユーザー名を入力します。
6.ここはコメントアウトでOKです。
7.ポート番号（10022）を入力します。
8.サーバーのディレクトリのパスを入力します。
9.「id_rsa.ppk」を置いてあるディレクトリのパスを入力します。
※9.の書き方について、迷う方がいるかもしれないのでちょっと補足します。
【補足1】
「id_rsa.ppk」は、前項の「FileZilla」のSFTPの設定の時に「秘密鍵」をFileZillaに対応した形式に変換したファイルです。
もし「あれ…なんだっけ？？」となった方は、前項の「FileZillaでSFTPの設定」を確認してみてください。
【補足2】
ディレクトリのパスがわからないという方は、エクスプローラーで「id_rsa.ppk」を選択した状態でエクスプローラーのメニューの中から「パスのコピー」をクリックすればディレクトリのパスをコピー出来ます。
【補足3】
9.の部分が具体的にどういう感じになるかの例を書いておきます。
※「id_rsa.ppk」がCドライブの「Users/keys」の中にある場合の例です。
//"ssh_key_file": "~/.ssh/id_rsa",
↓
//"ssh_key_file": "C:/Users/keys/id_rsa.ppk",
こんな感じの書き方になりますので、上記を参考にしてみてください☆
「sftp-config.json」の設定が完了したら、ファイルを保存して接続確認です。
同じプロジェクト内のファイル（style.cssなど）を開いてそのままCtrl+Sで保存してみて下さい。
そうするとSublime Text 3の画面下部にパスフレーズを入力するようコマンドラインが表示されるので、ここまで何度も出てきたパスフレーズを入力してEnter。
Sublime Text 3の画面下部にログが表示されて「Success」のログが表示されれば成功です。
ここで「Failed」と表示される状態は設定のミスが考えられますので「sftp-config.json」を見直しましょう。
まとめ
かなり長くなってしまいましたが、これでXserverでSublime Text 3をSFTP接続して自動アップロードが出来るようになりました。
初めて設定される方にとっては少々難しい（というか面倒）かもしれませんが、一度トライして理解してみれば難しい内容ではありません。
可能な限り初めての方でも迷わずに設定出来るよう意識して書いてはいますが、もし不明な点や誤った説明などがありましたらコメント頂ければ幸いです。
一般的に鍵を使って接続するSFTPは初心者には難しいと言われているのでちょっと敷居が高いような気がするかもしれませんが、その分セキュリティ的にはしっかりと見合ったものを得られます。
特に、いまだにFTPで通信しているという方は「かなり危険」なので、Sublime Text 3を使っていて（またはこれから使う）、Xserverを使っている方は是非試してみて下さい☆
次回は「Sublime Text 3を他のPCでも同じ環境で使う方法」を紹介する予定です。
これももう便利過ぎるTipsで、Sublime Text 3に限らず他のソフトでも使える方法なので、是非次回もご覧くださいね☆
[]
以下の記事「Sublime Text 3シリーズ05」を公開致しました。
この記事が気に入ったら
いいね ! しよう
ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆
突然のご連絡失礼致します！
sublimetext3で作成したデータをエックスサーバーにてアップロードしたく、記事を参照させて頂きました。
記事の「7.FileZillaでSFTPの設定」まで辿り着いたのですが、FileZilaにて秘密鍵ファイルを登録しようとしたところ、この記事で紹介されている通り、「FileZilaは〜の形式に対応していません。FileZilaに対応した形式に変換しますか？」とメッセージが出るところまでは良いのですが、そのメッセージに「はい」と入力すると「秘密鍵の読み込みに失敗しました」というエラーメッセージが出てしまいます。
このような場合、どのような原因が考えられ、どういった修正を施せばよいでしょうか？
ご面倒をお掛けしますが、お答え頂けますと幸いです。
よろしくお願い致します？
こんにちわ☆
秘密鍵の読み込みを失敗してしまうのですね。。
先程、当方環境でも問題を再現出来るか確認してみたのですが、問題なく登録できてしまい検証出来ない状態です…
根本的な回答にはなっておりませんが、一度問題が起きている鍵ファイルを削除して、以下の項目を再確認しながら再度作りなおしてみてください。
①まず、記事内「FileZillaでFTP情報の登録」の項目にある[ 入力事項 ]の内容を間違いないか確認。（ホストやユーザー名の部分は間違いやすいです）
※ホスト名とユーザー名の確認方法は、サーバーパネルログイン後、FTPアカウント設定 > ドメイン選択 > FTPソフト設定 > 「FTPサーバー(ホスト)名」と「ユーザー名(アカウント名)」です。
②TeraTerm で鍵ファイルを作成する際の「パスフレーズ」をテキストエディタなどにコピペしておく。
③公開鍵（id_rsa.pub）作成後、秘密鍵（id_rsa）も作成。
④記事内「FileZillaでSFTPの設定」の項で「鍵ファイルの追加」ボタンをクリックした後に表示されるファイル選択画面で「id_rsa.ppk ではなく id_rsa」を選択。
⑤「FileZilaはファイル’～id_rsa’の形式に対応していません。FileZilaに対応した形式に変換しますか？」のウィンドウで、ファイル名の末尾が「id_rsa」になっているか確認。
※上記を確認して、「はい」をクリックした直後に「秘密鍵の読み込みに失敗しました」のエラーが表示される場合は、現状私の環境で問題を再現出来ないので原因を判別出来かねます。。
⑥上記「はい」をクリックして「パスフレーズの入力画面（パスワードが必要というタイトルのウィンドウです）」が表示されたら、②で TeraTerm からテキストエディタへコピペしたパスフレーズをコピペします。
※ここを手入力で打ったりしてエラーになるパターンは多いです。
これでうまく行ってくれると良いのですが・・・(~_~;)
ご丁寧に返信頂きありがとうございます！
ご指摘のように最初からやり直してみたところ解決することができ、無事最後のsuccessの表示がされるところまで辿り着けました。
もう一点、かなり初歩的と思われる質問で申し訳ないのですが、sublimetext3で作成したファイルをこの記事の手順でアップロード出来たと思うのですが、これは指定されたURLを入力すれば、そのsublimetext3で作成したファイルに飛べる状態になっているということなのでしょうか？
そしてそのファイルに飛べるURLというのは、どこで確認することができるでしょうか？
それとも、URLが付与(というのかわかりませんが…)されるためには、何かまた別の操作をする必要があるのでしょうか？
引き続きご面倒をおかけしますが、お答え頂けますと幸いです。
無事解決できたようで良かったです☆
もう一点のご質問の件ですが、私の理解力が足りなくてご質問の意味を理解出来ておりませんが、例えば以下のような事でしょうか？
例① 「https://○○○.com」で表示されるディレクトリに Sublime Text 3で「sample.html」をアップ→「https://○○○.com/sample.html」
例② 「https://○○○.com」で表示されるディレクトリに「test」というフォルダがあり、その中へ Sublime Text 3で「sample.html」をアップ→「https://○○○.com/test/sample.html」
上記はあくまで基本的な考え方で、WordPress だとこの辺は FTP のディレクトリやパス、PHP について少し理解していないとまた少し難しくなるのかなぁ…と思います。
ファイルの URL を知る方法についても基本的に例の通りで、おそらくご質問の内容についてはここで理解出来るまで説明出来る範囲ではないかと思います。。
「ftp url ディレクトリ」のようなワードで検索されると詳しい説明を見つけられるかもです。
参考になる記事をありがとうございます。
いろいろと試したのですが、successとなりませんでした。
おそらくですが、
サーバーのディレクトリの入力が間違っているのでは…と思います。
サーバーのディレクトリの末尾の拡張子は「.ドメイン」「.html」どちらになりますでしょうか。
お手すきの際にご連絡いただければと存じます。
よろしくお願い致します。
こんにちわ。
ご質問の内容からはどうしても正確な原因の判断が出来ないので、
頂いた以下の文から、私の勝手な想像での解答になってしまいますことご了承下さいm(＿ ＿)m
>おそらくですが、
>サーバーのディレクトリの入力が間違っているのでは…と思います。
>
>サーバーのディレクトリの末尾の拡張子は「.ドメイン」「.html」どちらになりますでしょうか。
こちら、「パッケージ「SFTP」の設定」の項にある「設定項目⑧」の「remote_path」に記述する内容の事かなと予想して解答します。
わかりやすく簡単に「考え方」を書くと、「このファイル（sftp-config.json）の内容でやり取りするのはサーバーのどこのディレクトリですか？」という事なので、記述内容は質問者さんが仰られている通り「ディレクトリ（パス）」で正解です。
ただ、「ディレクトリの末尾の拡張子は～～～」と書かれている事から、もしかしたら少しだけ勘違いされているかもしれないな～と思います。
まず、本記事内の内容にディレクトリ名（フォルダ名）の「拡張子」は関係なく、シンプルに「ディレクトリ名」です。
不要とは思いますが、以下に少し整理します。
・ディレクトリ = フォルダ
・ディレクトリ名 = フォルダ名
・ディレクトリ名「public_html」←この「_html」は拡張子ではない
・Xserver のサーバーID直下のディレクトリ名である「ドメインフォルダ名」の「拡張子」←この拡張子（正確には拡張子ではない）に意味はなく、単なる「名前の一部」である
重複してしまいますが、考え方は「このファイル（sftp-config.json）の内容でやり取りするのはサーバーのどこのディレクトリですか？」という事ですので、Xserver を使われている場合でドメインフォルダ直下の「public_html」にアップしようとする場合の例を挙げると、「sftp-config.json」 の「remote_path」 に記述する内容は、
のような内容になります。
なので念の為「当該行」を全て書くと以下のようになります。
上記記述の際のローカル上の当該ディレクトリはこんな感じです。
上記内容で、画像の「public_html」（ローカル上）の中身はサーバー上の「public_html」の中にアップされます。
初めての方で最初のうちは理解するまでちょっとややこしいかもしれませんが、一度考え方というか仕組みというかを理解されてしまうと非常にシンプルで簡単で便利に使えますよ☆
丁寧にご教示いただきありがとうございます。
説明不足で申し訳ございませんでした。
RA’s（らす）@Tips4Life様のご認識でお間違いないです。
考え方がわからなかったのでとても参考になりました。
しかし修正はしてみたのですが、コネクションタイムアウトのポップが出てしまいました。
もはや、何が異なっているのか自分でも検討もつきません。
もう一度、一からやり直してみます。
ありがとうございました。