FTPソフトを使ってWebサイトデータをアップロードしてサイト公開までの流れを抑えておこう

FTPソフトを使ってWebサイトデータをアップロードしてサイト公開までの流れを抑えておこう

Webサイトを制作するツール・方法などについて、最近んでは様々なサービスや手段が登場するようになっています。

Webサイトの公開環境についても、レンタルサーバから、Firebase Hosting・GitHub Pages・Netlifyなどの静的ホスティングサービス・AWSやGCP、種類や規模に応じて様々なものが存在するようになりました。

その中でも、今回の記事においては、FTPソフトを使ってレンタルサーバにWebサイトのデータをアップロードするというオーソドックスな方法について、改めて見ていきたいと思います!

改めて確認しておきたい・Webサーバについて

まずはレンタルサーバに触れる前に、Webサーバについて改めて抑えておきたいと思います!

昨日書いたブログ「インターネットとWebサイトの関係!IPアドレス・ドメイン…Web制作における基本について知る」でば、インターネットって...

レンタルサーバというのは、要するにWebサーバというものを特定のサービス提供会社から借りて利用するものになっています。

Webサーバというのは、Webサイトを見る時に起きていること・Webサーバとブラウザの役割について知るでも紹介したように、Webサイトのデータ置き場のことです。(他にも役割はあります)

世界中に置かれているPCであり、皆さん自身が所有しているPCと違って、他の人が中を覗き見ることができるというイメージを持ってもらえるとわかりやすいのではないかと思います。

Webサイトを閲覧する時、私たちはGoogle Chromeなどのブラウザから「お願いします〜このWebサイトのデータを見せてください〜」とお願いし、そのお願いごとにWebサーバが反応する形で、必要なデータを送り返してくれるのがWebサーバの仕組みであり、役割となっています。

レンタルサーバとは??

先ほど説明したようなWebサーバは、頑張れば自分でも作成することができます。自身で所有しているPCも、必要な条件や設定を満たせばWebサーバに変身させることができます。

ですが、それを実現するためにはかなり高い記述を求められます。

そのため、「お金さえ払ってくれればWebサーバ貸しますよ!難しい技術いらないですよ!」というスタンスでサービスを提供してくれるのが、レンタルサーバ提供サービスになるのです!

有名なレンタルサーバ提供会社としては、ロリポップ・さくらインターネット・XSERVERなどがあります!

レンタルサーバを用意・FTPソフトを使ってWebサイトのデータをアップロードする流れ

レンタルサーバについて簡単に触れましたので、ここからはレンタルサーバを用意したと仮定して、FTPソフトを使ってWebサイトのデータをアップロードする流れを見ていきましょう!

なお、今回はさくらインターネットを使ったSFTP(パスワード認証方式)による接続を想定して内容をご紹介していきますが、他のサーバを利用する場合でも応用が効くように、内容をお伝えしていけたらと思います!

Webサイトのデータをサーバにアップロードするために必要なもの

ここからは、Wenサイトのデータをサーバにアップロードするために必要なものを確認していきましょう!

必要なものとしては、以下のものがあります。

  • レンタルサーバ提供サービス会社より貸し出しされたWebサーバの住所(アドレス)。ホストやFTPホストとも表現されます。さくらインターネットであれば●●.sakura.ne.jpとなっていると思います。
  • 貸し出しされたレンタルサーバに接続するためのIDとパスワード
  • FTPソフト(今回は無料で利用できるFile Zillaを利用してみます)

使用するレンタルサーバによっては、FTPホストやIDなどの表現名が違っていることもありますが、概念さえ掴めば名称が変わっても大丈夫かと思っています!

FileZillaをダウンロードする

それでは、FileZillaをダウンロードしてみましょう!

上記 URLからダウンロードできます!WindowsとMacでダウンロードするためのボタンが異なっているようなので、注意が必要です!

FileZillaをインストールしたら、サイトマネージャーという機能を開きましょう!メニュー→サイトマネージャーと進むと、開くことができます!

ちなみにサイトマネージャーとは、何度も同じサーバへの接続を利用する時に、簡単に利用できるようにFileZillaにサーバ情報を登録しておくという機能です!

開くことができたら、上記に掲載した画像を参照していただき、設定を行ってみてください!

  • FTPホスト
  • ユーザー名(アカウント名)
  • パスワード

をそれぞれ必要な箇所に入れていただきます!

必要事項を入力できたら、接続(Connect)を押しましょう!

FTPソフトでサーバに接続した場合の状態

接続に成功すると、上記のような画面になります!いわば「他の人のPCの中身をのぞきみているような状態になるわけですね!

FTPソフトを使ってWebサイトのデータをアップロードする方法

それではここからはFTPソフトを使ってWebサイトのデータをアップロードする方法を見ていきましょう!

FTPソフトを使ったアップロード方法

といっても、仕組みは非常にシンプル!

FileZillaなどの多くのFTPソフトでは、画面左半分が自分のPC内のデータ・右半分が接続したサーバの中身になっています!

左側で自分のPC内の中からアップロードしたいデータの場所を探索して表示するようにしましょう!

そして右半分に必要なデータをドラッグ&ドロップしていただければOKです!

なお、さくらインターネットの場合は、サーバに接続した際に「www」というフォルダが存在しているのですが、WEbサイトとして公開したいデータは最低限wwwフォルダの中に入れなければならないという決まりがあります!

ご使用されるレンタルサーバによって、このあたりの仕様が異なることもあるので、注意が必要です!

アップロードして公開されたWebサイトのデータをブラウザで確認するには?

FTPソフトを使ってアップロードしたデータを確認するには?

あっという間にWebサイトのデータをアップロードするところまでをやりました!

それでは、実際にアップロードされたデータをWebブラウザで確認する方法を見ていきましょう!

さくらインターネットの場合のブラウザURL確認方法

レンタルサーバなどを契約すると、サーバ提供会社から特定のアドレスが割り振られる形となります。

従いまして、割り振られたアドレスURLを元にWebブラウザでWebサイトのデータを表示するためのアドレスを確認していく形となります!

https://kosuge.sakura.ne.jpというアドレスURLが割り振られているとすると、さくらインターネットの場合であれば、wwwフォルダ直下に入っているデータ=https://kosuge.sakura.ne.jpでアクセス可能という決まりがあります。

まずhttps://kosuge.sakura.ne.jpを入力していただき、その後はフォルダ名とファイル名をつなげていけばOKです!

sumainフォルダの中のindex.htmlを表示したいという時はhttps://kosuge.sakura.ne.jp/sumain/index.htmlとWebブラウザに入力してアクセスすればOKということですね!

まとめ

以上で「FTPソフトを使ってWebサイトデータをアップロードしてサイト公開までの流れを抑えておこう」という内容の記事は終了となります!

最近ではパスワード認証ではなく鍵認証形式での接続形式が一般的にもなり、今回ご紹介したような接続方法で行うことも少なくなってきた印象があります、

とはいえ、環境や状況によっては今回ご紹介したような接続方法のみ対応可能というケースもあるかと思いますので、そういった時に参考になれば幸いです!

なお、1ヶ月ほど前にGitHub Actionsを使ってFTP自動デプロイ(Webサイト公開)を実現!ソフトを使った手動アップロードを卒業するという記事も書いているので、こちらも参考にしてくださいね!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする