LPの公開方法!SFTPからベーシック認証・公開までわかりやすく(プログラミング初心者向け)

プログラミング/ブログ

せっかく作った模写LP、HP。どうせなら公開したい!!
模写LP、HPを公開してポートフォリオにしたい!!

こんにちは。roroです。
このように思っても実際「あれ…公開ってどうするんだ?」となってフリーズする方もいるのではないでしょうか。

そんな人のために、僕が模写LPを公開するにあたっての手順を細かく公開します。

※XserverとWinSPCを使いました。
※この記事では「ページを公開できるようにする」「ページにベーシック認証をつけれるようにする」ことを重視していますので細かい語句の説明等は省略しております。プログラミングに慣れてらっしゃる方にとっては物足りなく感じると思われますがご了承ください。

この記事を読むことで

  • ページを公開できるようになる
  • ページにベーシック認証をつけることができるようになる
スポンサーリンク

そもそもFTP、SFTPって何?

簡単に言うと個人のパソコンから通信してサーバーとのやり取りをする仕組みをFTPといいます。その際に暗号化して、閲覧にID、パスワードを要求(ベーシック認証)するときにSFTPが使われます。”S”は”secret”の頭文字ですね。SFTPによってセキュリティが強化されますし、模写LPを公開したいとなるとベーシック認証は必要不可欠なので注意が必要です。
 それではさっそく手順を見ていきましょう!

スポンサーリンク

①WinSPCのダウンロード

まずは「WinSPC ダウンロード」と検索してください。すると下のようなHPが出てくるはずです。

WinSPCダウンロード画面
  1. ①をクリックしてWinSPCをダウンロードします
  2. ダウンロード完了後②のように下にファイルが表示されるのでそこをクリックして開いてください。
  3. セットアップ形式の選択がありますがデフォルトの設定でOKです。そのまま進んでインストールしてください
  4. 最後にWinSPCセットアップウィザードの完了と出るので下の完了をクリック

これでWinSPCのインストールは完了です!するとWinSPCが起動すると思います。

スポンサーリンク

②Xserverの設定をする

ここでいったんXserverを開いて、サーバーパネルにログインしてください。

XserverHPの右上のログインをクリック→サーバーパネルをクリック

ですね!

Xserverサーバーパネル画面

ここでSHH設定を選んでください

SSH設定説明画面

まずはSSH設定のタグを開いて、状態をONにしてください!(デフォルトはOFFのはずです)そして今はまだ「???」って感じだと思いますが接続ポートNo.は10022となります。これだけ覚えておいてくださいね~

次に公開鍵というものを作ります。WinSPCのログイン画面を出してくださいね!

スポンサーリンク

③公開鍵を設定しよう

PuTTgen説明画像

矢印に示されているように、左下のツールを開いて「PuTTYgenを実行」をクリックしてください

秘密鍵を作る手順

このような画面が出てくるかと思います。
①の項目を画面通りになっていることをチェックしてください。すべてデフォルトのままなので特に変える必要はないと思います。
確認後、②の”Generate”をクリックしてください。

すると進行具合を示すメーターが出てくるかと思います。マウスを適当に動かすとそのメーターがたまっていくので、100%になるまでグリグリマウスを動かしてください。100%になれば公開鍵生成完了となります。

秘密鍵生成後の説明

公開鍵が生成完了するとこのような画面が出てきます。
まずは①で自分でパスフレーズを設定してください。上の欄に入力後、下の欄は確認欄なのでそちらにも同じパスフレーズを入力してください。
そしてよろしければ②の”Save private key”をクリック。これで公開鍵を保存します。フォルダの場所、ファイル名(.ppk)を覚えておいてくださいね!
そして③が公開鍵となるのでコピーします。
もう一度Xserverに戻りまーす

Xserver公開鍵登録・設定画面

サーバーパネル→SSH設定→公開鍵登録・設定のタグ
の順にクリックするとこのような画面が出てきます。
①に先ほどコピーした公開鍵をペースト
②をクリック

これでXserver側はこれで設定完了です!
ひとまずティータイムをとってゆっくりしてください(笑)

休憩のイメージ
スポンサーリンク

④WinSPCの設定(もう少しです!)

ゆっくり休憩できましたでしょうか?慣れない作業ってとても疲れますよね。でもあともう少しです!頑張りましょう!WinSPCのログイン画面を開いてください!

WinSPCログイン画面

この画面になってますでしょうか。まずは「編集」を押します。

ポート番号を入力しましょう!今あなたは「ポート番号って聞いたことあるな、なんだったっけ」ってなってる頃でしょう。あれです。XserverのSSH設定をした時に10022になったやつです。デフォルトでは違う番号なので10022に変更してください!

Xserverのホスト名、ユーザー名を入力しましょう。「あれそれなんだ?」となったあなた!Xserverと契約をした時の「サーバーアカウント設定完了」と書かれたメールを読み返してください!下のほうに「FTP情報」というのがあるはずです。ここに書かれているホスト名、パスワードを入力してください。

これらが終われば「設定」をクリックしてください。

SSH認証説明画面

こんな画面が出てくると思うので秘密鍵のところに先ほどの長~い秘密鍵をペーストしてあげましょう。そしてOKをクリックしてください。

するとひとつ前の画面に戻るので「保存」をクリックします。すると「セッション保存名」「フォルダ」を入力するウィンドウが出てきます。任意で入力できるので名前はお好きにどうぞ。

※「パスワードを保存」にチェックをつけないこと!!!

入力後OKをクリックするとまたひとつ前のウィンドウに戻ります。そこで「ログイン」をクリックしてください。

サーバー接続画面

こういう画面になったら秘密鍵を生成するときに設定したパスフレーズを入力してください。
なんか警告っぽいものがでますが気にせず「はい」で大丈夫です。

達成感を感じているイメージ

🎊おめでとうございます!! これで設定終了です!!!🎊

あとはサクッと公開までの方法を紹介しますね。

設定終了画面

終わるとこんな画面が出てきます。左がPC、右がサーバー内と考えてもらってOKです。

自分のサーバーID(見当たらなければ右上のほうにある家のマーク)→ファイルを公開したいドメイン→public_htmlの中に公開したいファイルをドラッグアンドドロップ

これで公開できるようになります!

また、そのURLを知りたいときはXserverのサーバーパネルから確認することができます。

いかがでしたでしょうか?かなりの長丁場本当にお疲れ様でした!

同じエンジニアを目指す身としてお互いに頑張りましょう!

スポンサーリンク
プログラミング/ブログ
スポンサーリンク
スポンサーリンク
roroをフォローする
スポンサーリンク
roroLog(ろろろぐ)

コメント

タイトルとURLをコピーしました