1. はじめに 🌸
この記事では、さくらインターネットのレンタルサーバに、みなさんが作った Web アプリをアップロードして公開する方法を解説していきます。
はじめてのデプロイでも大丈夫！一つ一つ、ゆっくり確認しながら、さくらのレンタルサーバのデプロイ方法を学んでいきましょう 🥰
2. このハンズオン講義のゴール ⛳
今回のハンズオン講座では、次の２つの方法でファイルをアップロードする方法を習得します。
- FileZilla（ ファイル転送ソフト ）
- SCP コマンドによるアップロード
ハンズオンを終わるころには『あ、意外と簡単だな』と思ってもらえるはずですので、気楽に進めてくださいね～ 🥤
3. サーバ情報の確認 📝
まず最初に、レンタルサーバに接続するためのサーバー情報を確認しましょう。
FileZilla（ ファイル転送ソフト ）の設定には、「さくらのレンタルサーバ」の申し込み時に送信された 「仮登録完了のお知らせ」 メール内にあるサーバ情報が必要になります。
メーラーを開いて、[さくらのレンタルサーバ]仮登録完了のお知らせ というメールを確認してください。以下のようなメールを受信しているはずです。
この [さくらのレンタルサーバ]仮登録完了のお知らせ 内に記載されている情報はサーバへのファイル転送に必ず必要になるものですので、手元にメモをして大切に保管しておきましょう。
4. 公開フォルダ（www）の説明 📁
Web ページを公開するためには、ファイルを正しい場所にアップロードする必要があります。
さくらインターネットでは、
/home/[FTPアカウント名]/www
ここが公開フォルダ、つまり Web に表示されるフォルダです。
例えば index.html をここに置くと、あなたのホームページとして公開されます。
分かりやすく言うのであれば、ホームページの http://[FTPアカウント名].sakura.ne.jp のURL 構造は /home/[FTPアカウント名]/www 以下のフォルダ構造と同じになります。
5. FileZilla を使ったアップロード ✨
5-1. インストール
FileZilla という有名な FTP ツールを使ってアップロードしてみましょう。
公式サイトからダウンロードして起動します。インストールは基本的に「次へ」を押していくだけで大丈夫です。
5-2. 接続設定
上記の公式リファレンスを参考して Filezilla の設定を行いましょう。
Filezilla をインストール後、起動をして「サイトマネージャー」という場所に接続情報を入力します。「ファイル」→「サイトマネージャー」を選択してクリックしましょう。
すると、サイトマネージャーの画面が表示されますので、「新しいサイト」をクリックします。
すると、エントリの選択欄に接続するサーバーの名前を入力できるようになるので、お好きなサーバー名を入力します。
入力できたら、その接続するサーバーの設定情報を右側に入力していきましょう。「一般」というタブを選択していることを確認して、以下のように、さくらの 仮登録完了のお知らせ メール内の情報を、Filezilla の設定枠内に入力していきます。
「一般」タブでにあるその他の設定もしていきましょう。以下のように設定をします。
| プロトコル | FTP - ファイル転送プロトコル |
| 暗号化 | 明示的な FTP over TLS が必要 |
| ログオンタイプ | 通常 |
次に、「詳細タブ」をクリックして、デフォルトのリモートディレクトリを設定します。
最後に、「転送設定」をクリックして「パッシブ」を選択します。下部の 「接続」ボタン をクリックすれば、さくらサーバと接続が完了します。
初回接続時には、「証明書の確認」に関するウィンドウが表示されると思います。「今後は常にこの証明書を信用する」にチェックを入れて、OKボタンをクリックしてください。
5-3. アップロードの実演
サーバ接続時の画面を確認してみましょう。左側が「自分のパソコン」、右側が現在接続している「さくらのレンタルサーバ」になります。
まず、自分のPC側でアップロードしたいフォルダまで辿っていきます。アップロードしたいフォルダを下部に表示することができます。
アップロード方法はとっても簡単で、左から右へ「ドラッグ＆ドロップ」するだけです。
サーバ側で /home/[FTPアカウント名]/www フォルダが開いていることを確認して、そこにファイルを移せば OK です。
では実際に、みなさんもファイルやフォルダをアップロードしてみましょう！
「ドラッグ＆ドロップ」をする方法の他にも、右クリックして 「アップロードしたいフォルダかファイルをアップロードする方法」 や 「フォルダやファイルを削除する方法」 もありますので、いろいろ試してみましょう。
6. scp コマンドでアップロード 💻
少し上級者向けになりますが、コマンドを使ったアップロード方法も体験してみましょう。今回は scp コマンド というのを利用してファイルのアップロードをしたいと思います。
Mac はターミナルから、Windows の方は Git Bash を起動しましょう。
6-1. scp とは何か？
scp（Secure Copy Protocol）は、暗号化技術を利用して、ファイルを安全にサーバーへ送るためのコマンドです。「コマンドで使う FileZilla」 のようなものと覚えておきましょう。
6-2. scp の基本
scp は、『指定したフォルダ（or ファイル）を、指定したサーバーへ送る』
というコマンドです。
基本のコマンドの形は以下のようになります。
scp コピー元 コピー先
さくらのレンタルサーバ用にコマンドを書き直すと以下のようになります。
scp ファイルのパス [FTPアカウント名]@[FTPアカウント名].sakura.ne.jp:/home/[FTPアカウント名]/www/
では実際に、自分の PC から scp コマンド を使用して、さくらサーバにアップロードしてみましょう。今回は例題として、自分の PC のディスクトップに index.html を作成して簡単なコードを記述して、そのファイルをアップロードさせます。今回アップロードする index.html のコードは以下のように記述しましたが、なんでもOKです('ω')
すでに、アップロード先に「アップロードしようとするファイル名」と同名のファイルが存在する場合、アップロード先にさる同名のファイルは上書きされてしまうので注意してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
index.html をアップロードできました！
</body>
</html>
アップロードできるファイルが用意できたら Git Bash（ターミナル）を起動して、scp を入力してから半角スペースを追加しましょう。
次に、アップロードしたいファイルを Git Bash（ターミナル）にドラッグ＆ドロップします。そうすると、アップロードしたいファイルのパスが自動的に入力されます。
アップロードしたいファイルの右側に１つ半角スペースを記入して、最後にアップロード先にさくらサーバの情報を入力しましょう。([FTPアカウント名]@[FTPアカウント名].sakura.ne.jp:/home/[FTPアカウント名]/www/)
今回の例では以下のようになります。
入力できたらエンターキーを押しましょう。
初めてファイルを送信する際に Are you sure you want to continue connecting (yes/no/[fingerprint])? という質問がでてくるかもしれませんが、「yes」と入力してエンターキーを押してください。
すると、
[FTPアカウント名]@[FTPアカウント名].sakura.ne.jp's password:
という文字列が表示されると思います。メール内に記載されている 「サーバーパスワード」 を入力してエンターを押しましょう。すると以下のようにアップロードが完了するかと思います。
今回は、ファイルを1つだけアップロード しましたが、フォルダとフォルダの中身をまとめてアップロードする には scp コマンドに -r オプションを付けてフォルダを送信することができます。
7. SSH 接続で、さくらサーバの中身を見てみよう！
一通り、アップロードが終わったら、実際にファイルがさくらのレンサバにアップロードされているかを ssh（エス・エス・エイチ）コマンド を使用して確認してみましょう！
難しいことは一切しません。
・今サーバのどこにいるかを見る
・アップロードされたファイルを確認する
この2つをマスターしましょう！
7-1. SSH でログインしてみる
では、サーバーにログインしてみましょう。ssh コマンド でさくらサーバに接続する書き方は以下の通りです。
ssh [FTPアカウント名]@[FTPアカウント名].sakura.ne.jp
見て分かる通り、書き方が scp コマンド と少し似ていますね！今回の自分の例では、FTPアカウント名が gs-usagi となりますので以下のような画像でコマンドを書いていますが、ご自身の FTP アカウント名に置き換えて書き直してください。そしたらエンターキーを押しましょう。
初めて ssh コマンドをする際に Are you sure you want to continue connecting (yes/no/[fingerprint])? という質問がでてくるかもしれませんが、「yes」と入力してエンターキーを押してください。
エンターキーを押すと、パスワードの入力を求められますので、メールに記載されている サーバーパスワード を入力してエンターキーを押しましょう。Welcome to FreeBSD! と表示されたらサーバと接続完了です。
7-2. pwd コマンド と ls コマンド と cd コマンド
それでは、サーバに接続できましたので、これから３種類のコマンドを使ってさくらサーバを探索してみましょう。
pwd コマンド
まず、pwd (Print Working Directory) コマンド を使用して、自分が今さくらサーバのどこにいるかを確認してみましょう。pwd コマンド は、ターミナルで現在いるフォルダの絶対パス（ルートからの完全な経路）を表示するコマンドです。
実際に pwd と入力してみてエンターキーを押すと、現在のさくらサーバの位置を把握することができます。ssh で接続したばかりで pwd コマンド を入力すると、/home/[FTPアカウント名] となっていると思います。
この場所は 「ホームディレクトリ」 と呼ばれており、勝手に他の人が触れられない、自分だけの作業の起点になる フォルダとなっています。
cd コマンド
次に cd コマンド を使用して別のフォルダに移動してみましょう。cd コマンド は「Change Directory」の略で、cd <移動したいディレクトリのパス> のように指定します。また、.. で親ディレクトリへ、~ や cd のみでホームディレクトリへ移動します。
今回は、例として www フォルダに移動してみましょう。cd www と入力して、Web 公開フォルダに移動してみましょう。移動したら、pwd コマンド で現在のパスの位置も確認してみましょう。
ls コマンド
最後に、ls コマンドを使用して、現在いるフォルダのファイルやフォルダの一覧を表示してみましょう。ls と入力してエンターを押すと現在いる www フォルダ内のファイルとフォルダを一覧で表示できます。表示できた内容をみると、先ほどアップロードされたファイルも確認できますね。
