MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)

【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)

公開日:2017年02月01日
最終更新日:2019年07月04日
オンスタ運営
エンジニア
ホーム > 全記事一覧 > 制作 > エンジニア > 【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)
このエントリーをはてなブックマークに追加
【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)
お久しぶりです! 普段はフロントエンジニア兼webデザイナーとして日々精進している山田、いえ GORILLA-Yこと、ただのゴリラです。 さて、今回の記事は表題の通り 「SSH接続でXserverに接続してみよう!」です! 通常サーバーにファイルをアップロードするとき、 FTPソフトを使ってサーバーへつなぎ、ファイルをアップロードすると思いますが、 普段Gitを使ってバージョン管理を取り入れている方は 黒い画面からSSH接続でサーバーに接続し、サーバーにGitを導入してクローンしてくるなど かなり便利な使い方もできますので知っておいて損はないはず! 今回は黒い画面からサーバーにSSH接続するところまでをご紹介します! また、「なぜMacなんだ」というと Macの場合デフォルトでOpenSSHのクライアントソフトがインスコしてあるので楽ちんだからです! ※最近はwindows版もデフォルトで入っているんでしょうか? というわけで今回は人気のサーバーXserverにSSHで接続する方法を記事にしてみました! SSH接続が可能かどうかはサーバー会社さんによるので使いたいサーバーのヘルプ等参照してみてくださいね。 また、クライアントソフトを使用するケースもあるかと思いますので、 黒い画面の他、FileZillaクライアントを例にご紹介します! もう知ってるよって方は華麗にスルーで以下から他のいい記事へGO! https://grow-group.jp/blog/ では行ってみよ〜

黒い画面でSSH接続

管理画面からSSH接続機能をONにする

こちらのマニュアルに詳しく掲載されてますのでまずは管理画面から 以下を参照にSSH接続機能をONにしましょう!  Xserverマニュアル https://www.xserver.ne.jp/manual/man_server_ssh.php

公開鍵認証用鍵ペアの生成

SSH接続には2種類の認証方法があり、公開鍵と秘密鍵を使った認証方法パスワード認証方式です。 Xserverではパスワード認証には対応していないそうですので、 公開鍵と秘密鍵を使った認証方法でサーバーにログインしましょう。 ssh-keygenコマンドで生成という自作の流れでもいいですが、 今回の目的はXserverにSSH接続する1択ですので手早くサーバー上でペアを作成しましょう。 https://www.xserver.ne.jp/manual/man_server_ssh.php ※上記ヘルプ内「公開鍵認証用鍵ペアの生成を行う場合」参照! マニュアル通りに進めればそのまま秘密鍵をダウンロードできますんでダウンロードしちゃいましょう! ※注意 パスフレーズはどっか別のところにメモしておいてください! このファイル自体が鍵ですので、これを使う時にパスフレーズを尋ねられます。その時のためにメモっときましょう!

※※※.keyファイルを.sshディレクトリに設置する

鍵認証での接続の場合、公開鍵はサーバーに設置し、秘密鍵は自分のMacの任意の場所へ設置して行いますが、 公開鍵は今回サーバー上で作成しましたのでXserverが設置してくれています。 残るは秘密鍵ですが、まずはご自分のMacに.sshディレクトリを作ってそこへ設置しましょう! ここから黒い画面でいきます! まずはターミナルを立ち上げましょう! ターミナルを立ち上げると初っ端のカレントディレクトリ(自分がいるディレクトリの位置)が アカウント直下、一番上のディレクトリかと思いますんで、 以下コマンドでディレクトリを生成しましょう。 コマンドを打ったらエンターを押してくださいね
mkdir .ssh
mkdirってのはメイクディレクトリ、ディレクトリ作れってLinuxの命令文ですね! エンターを押すと実行されますので、これでディレクトリができています! で、こんな要領でコマンド打っていきます(黒い画面が一般人に敬遠されがちなところですが頑張りましょう!) 次にファイルを置いた場所へ移動しましょう! (デフォだとDownloadsなのでDownloadsで進めます。ダウンロード先のディレクトリを変更しているときは~/任意のディレクトリで移動してくださいね)
cd ~/Downloads
cdってのはチェンジディレクトリ、ディレクトリを移動するLinuxコマンドですね! 頭の~線は「一番上のディレクトリから見てココ」という指定の時に使います。 で、そのままファイルを移動させましょう!
mv ※※※.key ~/.ssh
mvってのはムーブです。続く一文でファイルを指定し、移動先をしていしてやると 「このファイルをここへムーブ(移動)してね」になります。 うーん直感的 では、ほんとにファイルが移動したのかを確認しましょう。
cd ~/.ssh
.sshディレクトリに移動して、、、
ls
lsってのはファイルやディレクトリの情報を表示するLinux・・・以下略)です!! ここダウンロードした※※※.keyという秘密鍵が表示されていれば問題ありません!  

※※※.keyにアクセス権を付与する

続いて.sshディレクトリに居る状態で※※※.keyアクセス権限を付与します。 いわゆるパーミッションを書き換えます。 読み込めるようにしてあげないとせっかく作ったこの秘密鍵も使えませんので、 付与してあげましょう。
chmod ~/.ssh/※※※.key 600
.sshディレクトリのパーミッションも書き換えます。
chmod ~/.ssh 700
これで秘密鍵の設置がOKということで、準備が整いました!  

いざ接続

それでは接続しましょう!
ssh -i ~/.ssh/※※※.key -p 10022 ユーザー名@※※※※※※.xserver.jp
ワンライナーで書きます。少しコマンド解説しておきます。 ・頭の「ssh」でopenSSHのコマンド使います宣言。 ・続く「-i」がオプションです。いくつかありますが、-iで秘密鍵を使いますってことになります。 半角スペースを置いて続きに使用する秘密鍵へのパスを書き、これ使いますと命令します。 ・続く「-p」でポートを指定します。xserverはSSHで接続する際、ポートが10022になりますのでご注意を。 上記を入れるとパスフレーズを尋ねられますので、 先ほどメモしたパスフレーズを挿入、エンター。 すると以下のような問いかけが返ってきます。 これは初めてそのサーバーにSSH接続するとき、 「本当に接続先サーバーがこれであっていますか?」と尋ねてくれています。 接続先のサーバーがちゃんとあってるか、ここでしっかり確認しましょう! 変なとこ指していると本当に危険ですし、SSHの意味がありませんから、マジで気をつけてください! ちなみにこれは初回のみです。一度接続するとサーバー側に指紋という形でログが残り、訊かれなくなります。 問題なければ「yes」と打って再びエンター す。。る。。と。。 こんな表示がでます。 もしこんな表示が出たらそのままlsコマンドを打ってみましょう。 デフォルトのルートディレクトリが表示されていれば無事接続完了です! お疲れ様した! ここからGitを導入と行きたいですが、もう長いのでまた次の機会にでも。。。

クライアントソフトでSSH接続したい

「黒い画面ヤダ!」って方のためにも クライアントソフトを使っての接続をご紹介します! 今回使用するクライアントソフトはFileZillaです。 と言っても簡単で、 メニューから「FileZilla -> 設定 -> 接続メニューのSFTP」をクリックすると、 以下画面になりますので、ここで秘密鍵を登録すればOKです。 なお、登録後にFileZillaで認識できる形式.ppkファイルを生成しますがいいですか? と尋ねられるのでOKしてあげてください。 そしてFileZillaを使うときはこのppkファイルを指定して読み込むようにしてあげましょう。 これで秘密鍵を使う準備はOK! 次にサイトマネージャーからサイトを登録しますが、プロトコルをFTPではなくSSHに変更しましょう。 あとは通常通りの設定でOKです!

よくわかんないから、ssh接続はやめたいときは?

そんなときは管理画面ではじめにonにしたところをoffにするだけです。

まとめ

いかがでしたか?ぜひ一度チャレンジしてみてください! Xserver Business  

関連コンテンツ

【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
エンジニア
公開日: 2019年03月07日
最終更新日: 2019年05月28日
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
オンスタ運営
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
エンジニア
公開日: 2019年02月09日
最終更新日: 2019年05月28日
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
オンスタ運営
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
エンジニア
オンライン学習
オンライン学習キャンペーン情報
デザイナー
デザイン
プログラミング
制作
公開日: 2019年11月07日
最終更新日: 2019年11月07日
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
  • # Python
  • # Udemy
  • # セール情報
  • # タイムセール
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
エンジニア
制作
公開日: 2019年09月02日
最終更新日: 2019年09月02日
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
オンスタ運営
AMP (Accelerated Mobile Pages) HTML のおさらい
エンジニア
公開日: 2016年11月14日
最終更新日: 2019年05月28日
AMP (Accelerated Mobile Pages) HTML のおさらい
  • # AMP HTML
オンスタ運営
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
エンジニア
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2019年06月19日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。