サーバへのアップロード方法

サーバとは？

  • ​サーバとは「提供（ていきょう）する側」という意味があり、WEBサイトなどのデータ（htmlファイルなど）は、このサーバ上に保存されています。（普段見ているサイトなども、すべてそうです）
  • 反対に「提供される側」のことをクライアントと呼びます。
  • 具体的に言うとクライアントとは、WEBサイトにアクセスしている人のことです。
    • （正確にはアクセスしているブラウザの事ですが）

クライアント

サーバ

  • 自分のWEBサイトをインターネットから見るためには、サーバにデータを送らなければいけません。

  • データをサーバに送る事を「アップロード」と言います。

  • 今回はそのアップロード方法について学びます。

    • （逆に、サーバからデータを持ってくる事を、「ダウンロード」と呼ぶのです）

FTPの場合

プロトコルとは？

約束事（やくそくごと）という意味で、ネットワークにおける通信方法の種類です。

"ルール"と考えてもOKです。

メールの送信用の"SMTP"や、受信用の"POP"、

WEBサイトの"HTTP"など色々あり、通信元と通信先が、同じプロトコルを理解出来なければ通信出来ません。

共通のプロトコル（約束事）を決めたおかげで、現在のインターネットが完成しました。

※これはIT技術の中でも【ネットワーク】と呼ばれる分野の内容です。

パスワードとか丸見え

FTPSの場合

サーバ

クライアント

アップロード方法

  • アップロードの方法はいくつかありますが、一般的な方法として「FTPで送る」という方法があります。
  • 「FTP」とはプロトコル（※下記参照）の一種で、ファイルのやり取りに使われます。
  • ただし、普通のFTPだと暗号化されないので、セキュリティが弱いです。
  • そのために「FTPS」というセキュリティが強化された通信方法（プロトコル）でアップロードします。
  • 「FTPS」であれば暗号化されているため、通信内容やパスワードが守れます。（右下画像）

FTPクライアントソフトのダウンロード①

まずはFileZillaをダウンロードします。（無料です）

FileZillaで検索し、下記のサイトをクリックしてください。

  • サーバとのFTP（FTPS）接続をするためのソフトの事を「FTPクライアントソフト」と言います。
  • 色々種類はありますが、ここでは「FileZilla（ファイルジラ）」というソフトを使用します。

  • ※すでにインストール済みの場合は実際に作業は必要ありませんので、9ページまで読み進めてください。

FTPクライアントソフトのダウンロード②

サイトを開いた画面です。

上の方の【ダウンロード】タブをクリックします。

ダウンロードページが開いたら、少し下にスクロールします。

【パッケージ FileZilla_Client のリリース】の中の【FileZilla_3.15.0.1_win64-setup.exe】をダウンロードします。

※バージョンは随時変わります。※32bit版のwindowsの場合は32の方をダウンロードしてください。

FTPクライアントソフトのインストール①

次は、ダウンロードしたソフトをインストールします。

最初の画面は、「I Agree（同意する）」を押してください。

Next（次へ）をクリック。（別アカウントでは使えなくする時は下を選択）

FTPクライアントソフトのインストール②

デスクトップにショートカットを置く時は、「Desktop Icon」にチェックをつけます。

保存場所の設定です。基本的にはそのままで良いです。

FTPクライアントソフトのインストール③

スタートメニューにショートカットを置きたくない場合は、「Do not create shortcuts」にチェックを付けて「Install」を押します。

インストール完了画面です。

「Finish」を押してFileZillaを開きましょう。

FileZillaの設定①

  • FileZillaを開いた画面です。

    まずは「FileZillaにようこそ」のウィンドウを閉じましょう。

FileZillaの設定②

  • まずはサーバとの接続するための設定をします。

    [ ctrl ]+[ s ]を同時押しするか、左上の「ファイル」から「サイトマネージャー」を開いてください。

FileZillaの設定③

サイトマネージャーの画面です。

左下あたりの「新しいサイト」をクリックしてください。

下記のようになればOKです。（名前は自由です。）

FileZillaの設定④

実際の設定画面は右側の部分です。

ホスト：kinocode.rakusaba.jp　　　　（サーバドメイン）

プロトコル：FTP

暗号化：明示的なFTP over TLSが必要※これがFTPSのみという意味

ログオンの種類：通常

ユーザ：◯◯@kinocode.rakusaba.jp

パスワード：◯◯◯◯◯◯

※◯◯の部分は聞いてください

ポートは無記入でOKです。

（FTPおよびFTPSは21が自動で設定される）

サーバにアクセス

  • 設定が出来れば【接続】をクリックし、サーバにアクセスします。
  • 成功すれば中央の欄に、「ディレクトリ一覧の表示成功」と表示されます。（エラーが出る場合は設定を見直しましょう）

アップロード方法①

ローカルサイト（自分のパソコン）

リモートサイト（サーバ）

  • 画面中央を見てください。左が自分のパソコン、右がサーバの中身です。

アップロード方法②

※CSSファイルや画像フォルダも忘れずにアップロードしておきましょう。

  • エクスプローラーから直接ドロップ&ドロップで移せます。

アップロード方法③

無事表示出来れば、アップロードは完了です。

  • では、実際にインターネットからアクセスして表示させて見ましょう。

  • 接続するURLは【http://kinocode.xyz/◯◯】（”◯◯”はサーバー設定の「ユーザ」の先頭から@までの文字列にしています)

今後の開発の流れ

すでにサーバにファイルがある状態で、新しいファイルをアップロードすると右のような注意が出ます。

基本的に「上書き」で良いと思います。

  • 基本的に開発は、ローカルに保存しているファイルで行い、問題ない事を確認出来した後で、サーバにアップロードする、という流れになります。
  • 自分オリジナルのサイトにするためにドンドンイジってみましょう。