» BASE91詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら

今覚える! FTPソフトを使ってWEBサイトを公開する方法

知識と経験|2018年10月18日

2018年10月18日
  • このエントリーをはてなブックマークに追加

WEBサイトを制作したけれど、どうやって公開するんだろう?
そんな疑問を、ここで解決してしまいましょう。

WEBサイトを公開するには、サーバーを借り、ドメインを取得する必要があります。
ドメインやサーバーの取得方法ついては以下の記事をに目を通してみてください。

■ レンタルサーバーって何? 初心者へのオススメはこれ!
https://base91.net/server/

■ ドメインって何? WEBサイトを表示するには?
https://base91.net/domein-show-web/

準備が整ったら、今度はサーバーにファイルをアップロードする必要があります。
自分で作ったWEBサイトのデータをサーバーに送らなければ、公開はできません。

では、どうやってサーバーにファイルをアップロードするのでしょうか。

そこで、登場するのがFTPソフトです。

FTPソフトとは、自分のパソコンとサーバーを繋ぐ「どこでもドア」のようなものです。
直接、FTPソフトを通じて、自分のパソコンからサーバーの中が覗けます。
また、中を除くだけではなく、データのアップロードやダウンロードもできるのです。

まずは、FTPソフトをダウンロードしてみましょう。

Macであればサイバーダックというアヒルアイコンのソフトが有名ですね。
Windowsであれば、FFFTPを使っている人が多いのではないでしょうか。
※ windowsでもサイバーダックはあります。

それぞれ、ダウンロード&インストールして準備を整えましょう。

ダウンロード&インストール完了したら、今度はサーバーの「FTP情報」を調べます。

「FTP情報」とは、ソフトとサーバーを繋ぐための鍵みたいなものです。
主に「ホスト」「ユーザー名」「パスワード」で1組になっています。
FTP情報をソフトに登録することで、サーバーと繋がるようになります。

ただ、どこにあるのか、サーバーによっては案外、分かりづらいこともあるんですよね。

大抵の場合、サーバーの管理画面にFTP情報が掲載されているはずです。
または、登録時に送られてきたメールに記載されていることも多いです。

みつけたら、FTPソフトに情報を登録していきましょう。
登録が無事に完了すると、ソフトを通じてサーバーと繋げるようになります。

サイバーダックの場合

ここでは、サイバーダックの例をあげて、接続方法をご紹介します。
FFFTPの接続方法は、後ほど掲載予定ですが、検索してもたくさん見つかるはずです。
あまり大きな差はありませんので、ぜひ検索して挑戦してみてください。

なお、今回はmac+サイバーダックの組み合わせです。
windowsだと、表示が異なることがありますのでご了承ください。

さて、進めていきましょう。

まず、サイバーダックを開きます。
すると、何も無い、横線が入った画面が現れます。

この横線が入ったエリア、どこでも良いので、右クリックしましょう。
キーボードのcontrolキーを押しながら左クリックでも大丈夫です。
するとポップアップウィンドウがあらわれます。

新規ブックマークを押します。

すると、上記のような画面が出てくるのですが、ここで入力するのは2つ。
「サーバ」と「ユーザー名」にFTP情報の「サーバー情報」と「ユーザー名」を入れましょう。

その後、左上の「×」ボタンを押してウィンドウを閉じます。
すると、先程何もなかった横線の入ったエリアに情報が追加されました。

この追加された情報をダブルクリックしてみましょう。

もし、「非セキュアなFTP接続」画面が出てきたら「続ける」を押してください。

続けていくと、ログイン失敗、という画面が出てくるのですが大丈夫です。
FTPパスワードを入力してログインしてください。

すると、下記のような画面が表示されるはずです。
今回は仮にエックスサーバーを使ったとします。

入力情報があっていれば、フォルダ / ファイルが現れ、ログイン成功となるはずです。
サーバーの中身とは言え、扱いは普通のファインダーと一緒です。
ドラックアンドドロップでファイルをアップロードできますし、ダウンロードもできます。

僕の場合、サイトを色々と管理しているので、少しファイル数が多いです。
エックスサーバーの場合、オリジナルドメイン1つにつき1つのフォルダが自動で作られます。
startoutであれば、startout.workの中にデータがあります。

しかし、最初の段階では、オリジナルドメインも何もありません。
あるのは「サーバーから付与されたテスト用のドメイン」だけとなります。
大抵のサーバーは、最初に「テスト用のドメイン」が1つ付与されているはずです。
サーバーを契約した時のメールや管理画面を確認してみましょう。

エックスサーバーの場合、「アカウントID.xsrv.jp」が提供されます。
上記の場合、quadraがIDとして、「quadra.xsrv.jp」がテスト用ドメインです。
URLにアクセスするときは「http://quadra.xsrv.jp」になります。
※ 上記、パスワードかけましたので、入れません。

サーバーへのアップロード自体は対象のファイルをドラック&ドロップするだけです。
しかし、各ドメインに「対応したフォルダ内」にアップしなければ反映されません。
別の箇所にアップしても、あてがわれたドメインがないからです。

まず、ドメインに対応したフォルダを開いてみましょう。
初期の場合であれば、テスト用のドメインフォルダを開いてください。

すると、エックスサーバーの場合、上記のような画面になります。
各フォルダは、メール機能やサーバーの設定などが入っています。

ここで、僕たちが触るフォルダは1つだけです。
public_htmlフォルダを開きましょう。
その他は、触ってはいけません。

エックスサーバー以外も、同じような構造になっている場合は多々あります。
ファイルをアップロードして良いフォルダが大抵決まっているのです。

多くの初心者さんがつまずくポイントですね。

FTPでログインしてもどこにアップすれば良いかわからない。
FTPを開いて、どこにアップしていいか、どのURLで開けば良いかわからない。

テスト用ドメインと、そのドメインに紐づくフォルダが決まっているからです。

中には、ログインしてそのままアップロードできる画面の場合もあります。
しかし、そういった場合は稀です。

アップロードできるフォルダは大抵、似たような名前になっています。
public_htmlやwwwなど、それに親しい名前になっている場合が多いです。

わからない場合は各サーバーの情報をGoogle検索してみましょう。
では、public_htmlを開いてみます。

エックスサーバーの場合、最初に上記のファイルが入っていました。
このファイルが何かと言うと、

上記の画面のファイルです。
index.htmlとdefault_page.pngは消しても問題ありません。
記念としてダウンロードしておいても良いでしょう。笑

ここまできたら、あとはご自身の作ったWEBサイトデータをアップロードしましょう。
アップロードするフォルダやファイルが間違っていなければ、それで公開完了となります。

FTP以外にもSFTPなどセキュリティが強化された接続方式もある。

今回は、最もよく使われる「FTP」という形でサーバーに接続しました。
ただ、サーバーにファイルを転送する方式は、FTPだけではありません。
よりセキュリティが強化された「SFTP」をはじめとした別の方式である場合もあります。

それは、サーバーの設定にもよります。

といっても、使うソフトが変わるわけではありません。
サイバーダックでは、FTP情報を設定する際に方式を変更できます。

一番上にFTP(ファイル転送プロトコル)と書かれているのが分かるでしょうか。
こちらをクリックすると、色々な方式が現れます。

このように、色々なファイル転送の形式があるのです。
転送の形式によって、サーバーに接続する方法も少しだけ異なります。

例えば、パスワードじゃなく、鍵となる「ファイル」をもらうケースもあります。
鍵となるファイルを接続時に登録することで、サーバーへの接続が許可される場合も多いです。

ただ、ひとまずここではFTPによるノーマルな形だけ覚えておいてください。
SFTPを始めとしたその他の転送方法は、必要な時に調べてみると良いです。
あまり色々やりすぎると、頭もごちゃごちゃしてしまいますからね。

通常のアップロード方法はご理解頂けたかと思います。
ぜひぜひ、どんどんファイルを公開して、試してみてください!

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

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

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら