サイトメンテナンスをしているので一時的に表示が崩れる場合があります。何卒ご理解頂けますようお願い申し上げます。

【2017年版】Sublime Text 3で鍵を使ってXserverとSFTP接続する方法[ST3シリーズ04]

【2017年版】Sublime Text 3で鍵を使ってXserverとSFTP接続する方法[ST3シリーズ04]

前回の記事【2017年版】Sublime Text 3の神パッケージ「SFTP」の設定と使い方[ST3シリーズ03]で「ロリポップ!でSFTPを使う方法」を紹介しましたが、今回は「Xserver編」となります。

XserverでSFTPを使うためには鍵(key)を使って通信をしなくてはならないため、少々手間がかかります。

とはいえ鍵を使うことでセキュリティはより一層強固なものになるのは間違いないので、Sublime Text 3をお使いの方でXserverをお使いの方はこの記事を参考に設定してみてください☆

初心者の方にはちょっとハードルが高いかもしれませんが、検索してもなかなか良い記事が見つからなかったので、なるべくわかりやすく書いてるのでこの記事の通りにやってみてください。

※もしわからない事などあればコメントかTwitterからご連絡頂ければ出来る範囲でお応えします。

「Sublime Text 3シリーズ」は他にも以下の記事がありますので、初めてSublime Text 3を使うという方は最初から順番にご覧頂く事をおすすめします。

【2017年版】Sublime Text 3のインストールから日本語化の設定まで[ST3シリーズ01]
テキストエディタは数多くありますが、その中でも「恋するエディタ」と呼ばれるほど「Sublime Textシリーズ」は皆さん声を揃えて良いと言います。 超が付くほど高機能なうえ、極めて軽く、更に無料でも使えるという神がかったエディタなの
【2017年版】私が「Sublime Text 3」に入れているプラグイン(パッケージ)一覧[ST3シリーズ02]
前回「【2017年版】Sublime Text 3のインストールから日本語化の設定まで」でSublime Text 3のインストールから日本語化までのやり方を紹介しましたので、今回は「私がSublime Text 3に入れているプラグイ
【2017年版】Sublime Text 3の神パッケージ「SFTP」の設定と使い方[ST3シリーズ03]
今回で3弾目になります「Sublime Text 3シリーズ」ですが、今回はSublime Text 3の中でも、私がかなりお世話になっているプラグイン(パッケージ)「SFTP」の設定方法と使い方をご紹介します。 もはや私にとって「こ

全体の流れ

まずは今回の目的である鍵を使ってXserverとSFTP接続するを達成するまでの全体の流れが以下になります。
※本記事では、使うフリーソフトに「FileZilla」と「TeraTerm」を使って説明してますが、他のソフトでも出来ると思いますのでご自身にあったソフトを使って頂いて結構です。

Tipsアイコン[ 全体の流れ ]

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ダウンロードページ01

ファイルのダウンロードが完了したら、あとは特に難しいポイントもないので画面通りに進めて行けば問題なく簡単にインストール出来ます。

TeraTermで公開鍵と秘密鍵の作成

TeraTermのインストールが完了したら「公開鍵」「秘密鍵」の作成です。

「公開鍵」に関しては誰に見られても問題ないのですが、「秘密鍵」は絶対に見られてはいけないので必ずローカル上に保存し、自分以外が見れない状態にしておくよう注意して下さい。

TeraTermの日本語化

先程インストールしたTeraTermを開いて、メニューなどが英語表記になっている場合は、まずはこれを日本語表記に変更します。

TeraTermを日本語表記にする方法は以下の通りです。

メニューの[Setup] > [General]と進みます。

TeraTerm日本語化説明01

すると以下の画面が表示されるので「Language」「LanguageUI」を以下の通りにします。

TeraTerm日本語化説明02

これで日本語化はOKです。

TeraTerm日本語化説明03

次に「公開鍵と秘密鍵の作成」です。

メニューの[設定] > [SSH鍵生成]と進みます。

TeraTerm鍵作成説明01

以下の画面では「鍵の種類」「RSA」「ビット数」「2048」になっている事を確認して「生成」をクリック。

TeraTerm鍵作成説明02

すると以下のように「鍵を生成しました。」と表示されて「鍵のパスフレーズ」「コメント」が入力出来る様になるので、それぞれ入力します。

「パスフレーズ」というのは「長めのパスワード」とでも思って頂ければOKです。
※パスフレーズは無くさないよう必ず保管しておきましょう。
※パスフレーズは本記事でも何度も使うのでメモ帳などにコピペしていつでも開ける状態にしておくと良いです。

コメントに関しては入力してもしなくても問題ありません。

TeraTerm鍵作成説明03

「公開鍵の保存」をクリックして任意の場所に公開鍵を保存します。
※公開鍵ファイル名は「id_rsa.pub」になっていると思うのでそのままで大丈夫です。

TeraTerm鍵作成説明04

次に「秘密鍵の保存」をクリックして、同じく任意の場所に保存します。
※秘密鍵のファイル名はid_rsaになっていると思うのでそのままで大丈夫です。

TeraTerm鍵作成説明05

これで「公開鍵」「秘密鍵」の作成&保存が出来ました☆

XserverでSSHの設定

Xserverもロリポップ!と同じでデフォルトだとSSHは利用できない設定になってます。

これを解除する為に、以下の手順でSSHをONにしてあげます。

Tipsアイコン[ 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に登録します。

前項と同じ画面で、「公開鍵登録・設定」というタブを選択すると以下の画面になります。

Xserverに公開鍵の登録01

次に、先程生成した公開鍵(id_rsa.pub)をテキストエディタ(Sublime Text 3でOK)で開き、記述されているコードを全てコピーして以下の赤枠内へ貼り付けます。

Xserverに公開鍵の登録02

公開鍵を登録する(確認)をクリックすると確認画面が出るので公開鍵を登録する(確定)をクリックして終了です☆

FTPソフト(FileZilla)のインストール

今回紹介する方法ではFTPソフトにフリーソフトの「FileZilla」を使いますので、以下を参考に「FileZilla」をインストールしましょう。

今サーバーの管理画面でFTPの操作をしてる方も、FTPソフトを使った方が便利で効率的で安心で良い事ばかりなので絶対にFTPソフトは使えるようになった方が良いです。

そもそも「FTP」という単語が出てきた時点で「難しそう」と感じるかもしれませんが、実際にやってみると非常に簡単で、すぐに自分にとって必須のツールになっていきます。

今回の「Sublime Text 3シリーズ」で紹介しているテキストエディタに関しても同じことが言えますが、便利なツールを使っていくと「Wordpressの管理画面で作業するのがムリになるほど快適な環境」になるので、その分執筆にも集中出来ます。

前置きが長くなってしまいましたが、さっそく「FileZilla」をインストールしましょう!

まず「ダウンロードファイル一覧 – FileZilla – OSDN」へ行くと以下のような画面が表示されます。

FileZillaダウンロードページ01

上記ページの「ダウンロードパッケージ一覧」の中に「パッケージ FileZilla_Client のリリース」の項目がありますので、以下の画像を参考にご自分の環境にあったものをダウンロードして下さい。

FileZillaダウンロードページ02

あとは特に難しいポイントも無いので、ダウンロードしたファイルを開いて画面通りに進めて行けば問題なく簡単にインストール出来ます。

FileZillaでFTP情報の登録

FileZillaのインストールが完了したら「FTP情報の登録」です。

FileZillaを起動すると以下の画面が開きますので、メニューから[ファイル] > [サイトマネージャ]と進みます。

FileZillaFTP情報の登録方法の説明01

サイトマネージャを開いたら「新しいサイト」をクリックします。

FileZillaFTP情報の登録方法の説明02

以下の「新規サイト」の部分に任意の名前を入力し、右側の項目に「XserverでSSHの設定」の項でメモした「FTPアカウント設定」の情報を見ながら必要事項を入力します。

FileZillaFTP情報の登録方法の説明03

以下を参考に、Xserverのサーバーパネル内の「FTPアカウント設定」の情報を見ながら入力してください。

Tipsアイコン[ 入力事項 ]

「ホスト」→FTPサーバー(ホスト)名

「ポート」→10022

「プロトコル」→SFTP – SSH File Transfer Protocol

「ログオンの種類」→通常でOK

「ユーザ」→ユーザー名(アカウント名)

「パスワード」→入力しなくてOKです

上記の入力が終わったら一旦OKボタンでウィンドウを閉じます。

FileZillaでSFTPの設定

サイトマネージャでFTP情報の登録が終わったら、SFTPの接続設定を行います。

メニューから、[編集] > [設定]と進むと以下の画面が表示されます。

FileZillaでSFTP接続設定の説明01

左のツリーから「SFTP」を選択すると右側が以下のように変わるので「鍵ファイルを追加」をクリック。

FileZillaでSFTP接続設定の説明02

鍵ファイルを選択する画面になるので、先程「TeraTerm」で作成した「秘密鍵(id_rsa)」を指定します。

すると、FileZillaが「RSA」の形式に対応していないので以下のポップアップが表示されるので「はい」をクリック。

FileZillaでSFTP接続設定の説明03

以下の画面では、TeraTermで鍵を作成した時に「鍵のパスフレーズ」に入力したパスフレーズを入力して「OK」をクリック。

FileZillaでSFTP接続設定の説明04

ファイルの保存画面になるので、混乱しないように先程と同じ場所に保存します。(説明のために同じ場所と書いてますが別の場所でもOKです)

※ファイル名を変更する必要はありませんが、拡張子(.以降の文字)は「ppk」とします。

FileZillaでSFTP接続設定の説明05

以下のように「id_rsa.ppk」のファイルがアップされたら赤丸のOKをクリックしてウィンドウを閉じます。

FileZillaでSFTP接続設定の説明06

これでFileZillaに対して「秘密鍵」の設定が完了しました。

あとはサイトマネージャーから先程FTP情報を登録したサイトを選択して接続をクリックするとパスフレーズの入力を求められるので、TeraTermで鍵を生成したときに入力したパスフレーズを入力してOKで接続されます。

※ここでうまく接続されない場合は、再度ここまでの説明をよく見直してみてください。

パッケージ「SFTP」の設定

ここまで済んだらあとはSublime Text 3のパッケージ「SFTP」で「sftp-config.json」の設定です。

※「sftp-config.json」の設定方法までは以下の記事をご覧ください。

【2017年版】Sublime Text 3の神パッケージ「SFTP」の設定と使い方[ST3シリーズ03]
今回で3弾目になります「Sublime Text 3シリーズ」ですが、今回はSublime Text 3の中でも、私がかなりお世話になっているプラグイン(パッケージ)「SFTP」の設定方法と使い方をご紹介します。 もはや私にとって「こ

今回「sftp-config.json」の中で編集する項目は以下になります。

「sftp-config.json」の編集箇所

Tipsアイコン[ 各項目説明 ]

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に限らず他のソフトでも使える方法なので、是非次回もご覧くださいね☆

シェアして頂けると喜びます☆

この記事が気に入ったら
いいね ! しよう

WordPressでPCやスマホ(iPhone)などのTips(便利情報)、その他日常生活で便利だと感じた事やモノを書いているIT関係のナンデモ屋さんです。 シンプルなプラグインなどもたまに作っていますのでご自由にお使い下さい☆
RA's(らす)@Tips4Lifeをフォローする
Sublime Text 3
記事が良かったらこちらから教えてあげてください☆
Tips 4 Life|毎日が便利で快適なiPhone&PC生活

ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆

Top