Webサイトの公開手順｜SFTPでサーバーにアップロード

この記事の目次

Webサイトの公開手順とは
基本（SFTP と FTP の違い）
具体例（アップロード前と後のフォルダ）
Webサイトの公開の実践ステップ
Webサイトの公開手順の注意点
Webサイトの公開手順でよくあるミス
Webサイトの公開手順のチェックリスト
Webサイトの公開手順のFAQ（よくある質問）
筆者の見解（Webサイトの公開手順）
Webサイトの公開手順の関連項目
出典（一次情報）

Webサイトの公開手順とは

自分のパソコンで作った HTML・CSS・画像などのファイルは、そのままでは自分しか見られません。誰でも見られるようにするには、ファイルをサーバー（Web サイトのファイルを置いておくコンピュータ）にアップロードします。

アップロードには、FTP ソフト（ファイル転送ソフト）を使う方法が昔から使われています。今は、通信が暗号化される SFTP を使うのが基本です。MDN も、ホスティング（サーバーを貸すサービス）が SFTP に対応しているか確かめ、本質的に安全でない FTP は使わないよう注意しています。

基本（SFTP と FTP の違い）

方式	通信の暗号化	使い方の目安
SFTP	あり	基本はこれ
FTPS	あり（FTP に暗号化を加えた方式）	サーバーが対応していれば選択肢
FTP	なし	パスワードやファイルの中身が読まれるおそれがあるので避ける

どの方式が使えるかは、サーバーによって違います。契約したサーバーのマニュアルで確かめます。

接続に必要な情報は、サーバーを申し込んだあと、メールや管理画面の「SFTP」「FTP」「接続情報」などと書かれた欄に示されます。パスワードは紙やパスワード管理アプリなど人に見られない所に控え、HTML などの公開するファイルには書き込みません。

項目	例	意味
ホスト（サーバー名）	`sv1234.example-server.jp`（架空の例）	接続先
ユーザー名	`myname`	ログインの名前
パスワード、または鍵	（人に見せない）	ログインの合言葉
ポート番号	マニュアルに書いてある番号（SFTP は多くの場合 22）	接続の入口の番号
公開用フォルダ	`public_html` など	ここに置いたファイルが公開される

具体例（アップロード前と後のフォルダ）

パソコンの my-site フォルダの中身を、サーバーの公開用フォルダの中に置きます。

パソコン                      サーバー
my-site/                      public_html/
├─ index.html      ──→       ├─ index.html
├─ about.html      ──→       ├─ about.html
├─ css/style.css   ──→       ├─ css/style.css
└─ images/photo.png ─→       └─ images/photo.png

この場合、公開 URL は https://ドメイン名/ でトップページ（index.html）、https://ドメイン名/about.html で2ページ目が開きます。my-site フォルダごと置くと、URL が https://ドメイン名/my-site/ になってしまう点に注意します。

Webサイトの公開の実践ステップ

サーバー側の準備を確かめます。 サーバーのマニュアルの「SFTP」の項を読み、管理画面で SFTP（SSH）を有効にする設定が要る会社なら、先に有効にします。
SFTP に対応したファイル転送ソフトを入れます。 この記事では例として、MDN の解説でも使われている無料の FileZilla（https://filezilla-project.org/、Windows・Mac 対応）を、公式サイトの「Download FileZilla Client」ボタンから入れます。インストーラーが別のソフトも一緒に入れるかを聞いてきたら、断ります。ほかの SFTP ソフトでも、入れる値は同じです。
接続情報を入れて接続します。 FileZilla の画面の上に横に並ぶ欄に、上の表の値を入れます。「ホスト」には sftp://sv1234.example-server.jp のように sftp:// を付けてホスト名を入れ（sftp:// を付けると SFTP で接続します）、「ユーザー名」「パスワード」「ポート」を入れて、欄の右端の「クイック接続」を押します。初めての接続では、サーバーの鍵を信頼するかを聞く画面が出るので、ホスト名が自分のサーバーであることを確かめて「OK」を押します。入力欄の下に接続の記録が流れ、右半分にサーバーのフォルダの一覧が出れば接続できています。接続できないときは、打ち間違いと、管理画面で SFTP を有効にする設定が要らないかを確かめます。
公開用フォルダを開きます。 サーバーのマニュアルに書かれたフォルダ（例：public_html）に移動します。
ファイルを送ります。 左（パソコン側）の my-site の中身を、Ctrl キー（Mac は Command キー）を押しながら1つずつクリックしてまとめて選び、右（サーバー側）の公開用フォルダにドラッグします。同じ名前のファイルがあると上書きするかを聞かれるので、「上書き」を選びます。
ブラウザで確かめます。 公開 URL を開き、全ページ・画像・CSS・JavaScript が表示されるかを確認します。直したら、変更したファイルだけをもう一度送ります。
HTTPS になっているか確かめます。 https:// で開いて「この接続ではプライバシーが保護されません」のような警告が出るときは、サーバーの管理画面で「SSL」「HTTPS」「無料SSL」といった名前のメニューを開き、ドメインを選んで有効にします。使えるようになるまでの時間はサーバーによって違い、目安は決められません。ただし、1日たっても開けなければサーバーのサポートに問い合わせます。

Webサイトの公開手順の注意点

パスワードを人に見せない・ファイルに書かない： 接続情報が漏れると、サイトを書き換えられるおそれがあります。IPA（情報処理推進機構）も「安全なウェブサイトの作り方」で、サイト運営の安全対策をまとめています。
上書きの前に控えを取る： サーバー上のファイルを上書きすると、元に戻せないことがあります。パソコン側に、公開している版のコピーを残しておきます。
大文字と小文字： サーバーは区別することが多いので、Photo.png と photo.png を混ぜないようにします。

Webサイトの公開手順でよくあるミス

公開用フォルダの外に置く： URL を開いても表示されません。
フォルダごと置いてしまう： URL に余計なフォルダ名が付きます。
一部のファイルだけ送り忘れる： CSS や画像のフォルダの送り忘れで、見た目が崩れます。
古い表示のまま： ブラウザのキャッシュが原因のことがあります。再読み込みで確かめます。

Webサイトの公開手順のチェックリスト

[ ] SFTP で接続した（ホストが sftp:// で始まる）
[ ] 公開用フォルダの名前をマニュアルで確かめた
[ ] フォルダごとではなく、中身を送った
[ ] 公開 URL で全ページ・画像・CSS を確認した
[ ] パスワードをファイルやメモに平文で残していない

Webサイトの公開手順のFAQ（よくある質問）

Q. FTP と SFTP はどちらを使えばいいですか？

A. SFTP です。FTP は暗号化されないので使いません。ただし、ソフトやサーバーの説明では「FTP」という言葉が SFTP を含めた広い意味で使われることがあるので、接続のときに SFTP になっているかを確かめます。

Q. ソフトを使わない公開方法はありますか？

A. サーバーの管理画面に「ファイルマネージャー」が付いていることがあり、ブラウザからアップロードできます。MDN では、GitHub などを使って公開する方法も紹介されています。

Q. アップロードしたのに 404 になります。

A. 置いたフォルダが公開用フォルダか、ファイル名（特に index.html）と大文字・小文字が正しいかを確かめます。

Q. 何度もアップロードするのが面倒です。

A. 小さなサイトなら、変更したファイルだけを送れば十分です。更新が多くなったら、自動で送る仕組みを検討します。

筆者の見解（Webサイトの公開手順）

公開の作業は、Web 制作の中で最も「取り返しがつかない」操作を含む工程だと考えます。私は、初めての公開では「SFTP で接続する」「公開用フォルダを確かめる」「パソコン側に控えを残す」の3つだけは必ず守ることを勧めます。どれも数分でできるのに、守らなかったときの損失が大きいからです。