.has-very-dark-gray-color{color:#313131}.has-small-font-size{font-size:13px}.has-normal-font-size,.has-regular-font-size{font-size:16px}.has-medium-font-size{font-size:20px}.has-large-font-size{font-size:36px}.has-huge-font-size,.has-larger-font-size{font-size:42px}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}.list{background-color:skyblue;padding:20px;border-radius:5px;font-weight:bold}.broken_link,a.broken_link{text-decoration:line-through}心理学専攻の現役国公立大生によるブログ。2019.03.17スポンサーリンクせっかく作った模写LP、HP。公開したい!!模写LP、HPを公開してポートフォリオにしたい!!こんにちは。このように思っても実際「あれ...公開ってどうするんだ?」となってフリーズする方もいるのではないでしょうか。そんな人のために、僕が模写LPを公開するにあたっての手順を細かく公開します。※XserverとWinSPCを使いました。※この記事では「ページを公開できるようにする」「ページにベーシック認証をつけれるようにする」ことを重視していますので細かい語句の説明等は省略しております。プログラミングに慣れてらっしゃる方にとっては物足りなく感じると思われますがご了承ください。この記事を読むことでページを公開できるようになるページにベーシック認証をつけることができるようになるスポンサーリンク目次そもそもFTP、SFTPって何?1WinSPCのダウンロード2Xserverの設定をする3公開鍵を設定しよう4WinSPCの設定(もう少しです!)そもそもFTP、SFTPって何?簡単に言うと個人のパソコンから通信してサーバーとのやり取りをする仕組みをFTPといいます。その際に暗号化して、閲覧にID、パスワードを要求(ベーシック認証)するときにSFTPが使われます。”S”は”secret”の頭文字ですね。SFTPによってセキュリティが強化されますし、模写LPを公開したいとなるとベーシック認証は必要不可欠なので注意が必要です。ダウンロード」と検索してください。すると下のようなHPが出てくるはずです。1をクリックしてWinSPCをダウンロードしますダウンロード完了後2のように下にファイルが表示されるのでそこをクリックして開いてください。セットアップ形式の選択がありますがデフォルトの設定でOKです。そのまま進んでインストールしてください最後にWinSPCセットアップウィザードの完了と出るので下の完了をクリックこれでWinSPCのインストールは完了です!するとWinSPCが起動すると思います。スポンサーリンク2Xserverの設定をするここでいったんXserverを開いて、サーバーパネルにログインしてください。XserverHPの右上のログインをクリック→サーバーパネルをクリックですね!ここでSHH設定を選んでくださいまずはSSH設定のタグを開いて、状態をONにしてください!(デフォルトはOFFのはずです)そして今はまだ「???」って感じだと思いますが接続ポートNo.は10022となります。これだけ覚えておいてくださいね~次に公開鍵というものを作ります。WinSPCのログイン画面を出してくださいね!スポンサーリンク3公開鍵を設定しよう矢印に示されているように、左下のツールを開いて「PuTTYgenを実行」をクリックしてくださいこのような画面が出てくるかと思います。1の項目を画面通りになっていることをチェックしてください。すべてデフォルトのままなので特に変える必要はないと思います。確認後、2の”Generate”をクリックしてください。すると進行具合を示すメーターが出てくるかと思います。マウスを適当に動かすとそのメーターがたまっていくので、100%になるまでグリグリマウスを動かしてください。100%になれば公開鍵生成完了となります。公開鍵が生成完了するとこのような画面が出てきます。1で自分でパスフレーズを設定してください。上の欄に入力後、下の欄は確認欄なのでそちらにも同じパスフレーズを入力してください。これで公開鍵を保存します。フォルダの場所、ファイル名(.ppk)を覚えておいてくださいね!そして3が公開鍵となるのでコピーします。タグの順にクリックするとこのような画面が出てきます。1に先ほどコピーした公開鍵をペースト2をクリックこれでXserver側はこれで設定完了です!ひとまずティータイムをとってゆっくりしてください(笑)スポンサーリンク4WinSPCの設定(もう少しです!)ゆっくり休憩できましたでしょうか?慣れない作業ってとても疲れますよね。あともう少しです!頑張りましょう!WinSPCのログイン画面を開いてください!この画面になってますでしょうか。ポート番号を入力しましょう!今あなたは「ポート番号って聞いたことあるな、なんだったっけ」ってなってる頃でしょう。XserverのSSH設定をした時に10022になったやつです。デフォルトでは違う番号なので10022に変更してください!Xserverのホスト名、ユーザー名を入力しましょう。「あれそれなんだ?」となったあなた!Xserverと契約をした時の「サーバーアカウント設定完了」と書かれたメールを読み返してください!下のほうに「FTP情報」というのがあるはずです。ここに書かれているホスト名、パスワードを入力してください。これらが終われば「設定」をクリックしてください。こんな画面が出てくると思うので秘密鍵のところに先ほどの長~い秘密鍵をペーストしてあげましょう。OKをクリックしてください。するとひとつ前の画面に戻るので「保存」をクリックします。すると「セッション保存名」「フォルダ」を入力するウィンドウが出てきます。任意で入力できるので名前はお好きにどうぞ。※「パスワードを保存」にチェックをつけないこと!!!入力後OKをクリックするとまたひとつ前のウィンドウに戻ります。そこで「ログイン」をクリックしてください。いう画面になったら秘密鍵を生成するときに設定したパスフレーズを入力してください。なんか警告っぽいものがでますが気にせず「はい」で大丈夫です。これで設定終了です!!!🎊あとはサクッと公開までの方法を紹介しますね。終わるとこんな画面が出てきます。左がPC、右がサーバー内と考えてもらってOKです。自分のサーバーID(見当たらなければ右上のほうにある家のマーク)→ファイルを公開したいドメイン→public_htmlの中に公開したいファイルをドラッグアンドドロップこれで公開できるようになります!また、そのURLを知りたいときはXserverのサーバーパネルから確認することができます。いかがでしたでしょうか?かなりの長丁場本当にお疲れ様でした!同じエンジニアを目指す身としてお互いに頑張りましょう!スポンサーリンクプログラミング/ブログスポンサーリンクスポンサーリンクシェアするTwitterFacebookはてブPocketLINEコピーroroをフォローするスポンサーリンクrorororoLog(ろろろぐ)関連記事プログラミング/ブログブログ歴一ヶ月の僕がブログを一ヶ月連続更新してみた件。【実感した成果やコツを紹介】あなたは毎日ブログを書いているでしょうか?絶対にブログは毎日更新がいいですよ!本記事ではブログ歴一ヶ月の僕が一ヶ月毎日ブログを更新した事による成果を紹介しています。それに加え、毎日更新をするコツ、その際にやっておくべきことを紹介しています。2019.05.15プログラミング/ブログ東大物理学者の「考える力」の鍛え方とは??考える力を鍛えたりクリエイティブになりたいと思いませんか?本記事では東大式の考える力の鍛え方を紹介しています。すべて簡単に実践できる方法です。あなたもこの記事を読み、実践に移して考える力のある独創的な人間になりませんか?2020.02.12プログラミング/ブログ僕がTwitterで1000フォロワーを達成した手順【誰にでもできる簡単な方法】フォロワーを増やしたくありませんか?本記事で僕がツイッターのフォロワーさんが1000人になるためにした超簡単な方法を紹介しています!時間がなくてもあなたもインフルエンサーを目指せますよ!あなたもこの方法で1000人のフォロワーを手に入れませんか?プログラミング/ブログ著作権、大丈夫?正しい引用を知ろう!あなたはブログを書くときに引用を正しい方法でできていますか?本記事ではブログやWebの記事においてテキストや画像、動画の正しい引用の方法を解説しております。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。「懸垂(チンニング)」の効果がすごすぎる件。roroprogスポンサーリンクスポンサーリンクタイトルとURLをコピーしました。