サイトデータのアップロード

サイトデータをにアップロードする方法
開発ツールを使ってアップロード
FTPソフトを使ってアップする方法
ファイルマネージャからアップする方法

前回のステップでサーバーの設定を行いました。
このステップでは、サイトを公開するために、サイトデータをアップロードしていきます。

サイトデータをにアップロードする方法

サイトデータをサーバーにアップロードする方法は3つあります。

開発ツールを使ってアップロード
FTPソフトを使ってアップロード
ファイルマネージャからアップロード

それでは、それぞれのアップロード方法を見ていきましょう。

開発ツールを使ってアップロード

SSHキーの作成
契約しているサーバーの管理画面の「SSH設定」からSSHキーを生成します。生成後、ダウンロードしたSSHキーはPC上の任意の場所に保存しておきましょう。（Users/UserName/.sshフォルダ内に保存しておくと後々、便利です。）
「Remote - SSH」をインストール
Visual Studio Codeを開き、拡張機能からSSH接続に必要なプラグインをインストールします。
SSH接続の設定
インストールが完了すると、新たに「リモートエクスプローラー」という項目が追加されます。これをクリックして開き、左上のプルダウンメニューから「SSH Target」を選択し、歯車アイコンをクリックしてください。接続設定ファイル（~/.ssh/config）の場所を指定します。
接続設定ファイルを作成する
設定ファイルの場所を指定すると、そのままエディタが開くので編集していきます。Host・HostName・User・Port・IdentityFileを設定していきます。
```
Host sample
HostName dev-server.com
  User dev-user
  Port 22
  IdentityFile ~/.ssh/my_apps
```
SSH接続
設定ファイルを編集して保存すると、「SSH Targets」に先程のHost名で接続が追加されます。Host名の右側にあるアイコンをクリックすると、新しいウィンドウが起動します。問題なく接続が完了すると、画面の左下にHost名が表示されます。接続完了後は、リモートサーバー側のディレクトリを「フォルダを開く」から選択できる様になります。

FTPソフトを使ってアップする方法

FTP（File Transfer Protocol）とは
ネットワーク上のコンピュータ間でファイル転送を行うための通信方法です。
FTPソフトを利用することで作成したWebサイトのデータを簡単にサーバーにアップロードすることができます。

FTPソフト一覧

FileZilla
無料で利用でき、SFTPやFTPSに対応し、日本語にも対応しています。
Cyberduck
FileZillaと同様

アップロード方法

事前準備
FileZillaをダウンロードしておきます。
言語が日本語でない場合は、日本語に設定しておきましょう。
https://filezilla-project.org/download.php?show_all=1
接続情報の確認方法
接続情報は、各レンタルサーバーの管理画面にて確認することができます。

サーバーパネル画面にて、「サブFTPアカウント設定」をクリックします。

FTP情報確認手順 | レンタルサーバーならエックスサーバー
https://www.xserver.ne.jp/manual/man_ftp_info_check.php
ドメイン選択画面にて、すべてのドメインの「選択する」をクリックします。

FTP情報確認手順 | レンタルサーバーならエックスサーバー
https://www.xserver.ne.jp/manual/man_ftp_info_check.php
サブFTPアカウント設定画面にて、「FTPソフト設定」タブを選択し、「FTP サーバー（ホスト）名」を確認します。

FTP情報確認手順 | レンタルサーバーならエックスサーバー
https://www.xserver.ne.jp/manual/man_ftp_info_check.php
Xサーバーへの接続情報を設定
先ほど調べた接続情報をFTPソフト（FileZilla）に設定します。

FileZillaを開き、画面左上の「サイトマネージャー」を選択します。サイトマネージャー画面で「新しいサイト」を選択します。画面右側に調べた接続情報を入力します。設定情報の名前を分かりやすい名前に変えておきましょう。
※マウスで選択すると簡単に変更可能です。
XサーバーへFTP接続を行う
接続情報の入力が完了したら、「接続」を選択します。接続すると画面右側に、サーバー上のファイルやフォルダが表示されます。独自ドメインを設定した場合、独自ドメイン名のフォルダが作成されています。
公開用ファイルのアップロード
公開フォルダ（public_html）に公開用ファイル（HTML・CSSなど）を全てアップロードします。
サイト確認
ブラウザから独自ドメインにアクセスし、用意した公開用ファイルが表示できれば、全ての作業完了となります。