07. ファイルアップロードとデプロイ

この章では、制作したファイルをサーバーへ置いて公開する基本を学びます。

Webサイトは、ローカルPCにあるだけでは他の人から見られません。公開するには、サーバーやホスティングの公開場所へファイルを置く必要があります。

公開ディレクトリ

公開ディレクトリは、インターネット上から見えるファイルを置く場所です。

レンタルサーバーでは、public_html のような名前のディレクトリが使われることがあります。

公開ディレクトリの例
public_html/
  index.html
  about/
    index.html
  assets/
    css/
      style.css
  images/
    main.jpg

公開ディレクトリの外にファイルを置いても、Webサイトとして表示されないことがあります。

index.html

index.html は、そのディレクトリの入口になるファイルです。

たとえば、トップページでは次のように配置します。

トップページ
public_html/
  index.html

下層ページでは、ディレクトリ内の index.html が表示されることがあります。

下層ページ
public_html/
  about/
    index.html

この場合、URLは /about/ になります。

FTPとSFTP

FTPやSFTPは、ローカルPCからサーバーへファイルを送るための方法です。

FTPよりもSFTPの方が安全に通信できます。

案件では、サーバー会社から次のような情報を受け取ることがあります。

  • ホスト名
  • ユーザー名
  • パスワード
  • ポート番号
  • 接続方式
  • 公開ディレクトリ

これらは重要な接続情報なので、取り扱いに注意します。

ファイルマネージャー

レンタルサーバーには、管理画面からファイルをアップロードできるファイルマネージャーが用意されていることがあります。

小さな修正や単発のアップロードには便利です。

ただし、大量のファイルを扱う場合や、更新履歴を管理したい場合は、FTP、SFTP、Git連携などの方が向いていることがあります。

静的サイトのアップロード

静的HTMLサイトでは、HTML、CSS、JavaScript、画像などを公開ディレクトリへアップロードします。

確認したいポイントは次の通りです。

  • index.html が正しい場所にあるか
  • CSSやJavaScriptもアップロードしたか
  • 画像ファイルを忘れていないか
  • 下層ページのディレクトリ構成が正しいか
  • ファイル名の大文字小文字が一致しているか

アップロード後は、トップページだけでなく下層ページも確認します。

Astroなどのビルド後ファイル

Astroなどの静的サイトジェネレーターでは、開発中のファイルをそのまま公開しません。

通常はビルドを実行し、生成された公開用ファイルをサーバーへ置きます。

Astroの公開用ファイル例
dist/
  index.html
  _astro/
    main.css

src や node_modules をそのままアップロードするのではなく、ビルド後のディレクトリを公開します。

デプロイとは

デプロイは、作ったサイトやアプリを本番環境へ反映する作業です。

昔ながらのFTPアップロードもデプロイの一種です。

Gitとホスティングサービスを連携し、特定のブランチに反映したら自動で公開される仕組みもあります。

デプロイ方法はサービスによって違いますが、目的は「制作したものを本番で見られる状態にすること」です。

アップロード漏れ

公開後のトラブルで多いのが、アップロード漏れです。

よくある例:

  • HTMLだけアップロードしてCSSを忘れる
  • 画像フォルダをアップロードしていない
  • JavaScriptファイルが古い
  • PDFだけリンク先にない
  • ビルド後ファイルを更新していない

アップロード後は、DevToolsのNetworkタブで404が出ていないか確認します。

パーミッションの入口

パーミッションは、ファイルやディレクトリの権限設定です。

静的サイトでは細かく触らないことも多いですが、サーバーによっては権限が原因で表示できないことがあります。

WordPressやフォーム処理では、書き込み権限が関係することもあります。

詳細なサーバー管理までは扱いませんが、403エラーが出る場合は権限やサーバー設定も疑います。

公開後の確認

アップロードやデプロイ後は、次の点を確認します。

  • トップページが表示されるか
  • 下層ページが表示されるか
  • CSSが効いているか
  • JavaScriptが動いているか
  • 画像やPDFが表示されるか
  • 404が出ていないか
  • HTTPSで表示されるか
  • スマホでも崩れていないか

トップページだけ見て完了にしないようにします。

この章のまとめ

  • 公開ディレクトリは、Web上から見えるファイルを置く場所
  • レンタルサーバーでは public_html が公開場所になることがある
  • FTPやSFTPは、サーバーへファイルを送るための方法
  • Astroなどでは、開発用ファイルではなくビルド後ファイルを公開する
  • アップロード漏れは、CSS、画像、JavaScript、PDFなどで起きやすい
  • 公開後はトップページだけでなく下層ページやNetworkタブも確認する