2025-08-26
Webインフラ

初心者でも簡単！VPSでHTMLサイトを公開する手順をゼロから解説

Featured image of the post

はじめに

VPSを契約して、ゼロから最小限のHTMLを表示するまでの流れを解説する😊

ゴール

ブラウザでこんなページを表示するのがゴール！

💡
完成イメージ
Image in a image block

結論

✅SSH接続 → NginxをインストールするだけでOK！

前提

準備

【手順1】rootユーザーでSSH接続する

✅VPS上で各種コマンドを実行したいので、まずはSSH接続する！

【手順1-1】秘密鍵を生成する

すでに秘密鍵（〇〇.pem）をダウンロードしていれば作業不要。

なければ新たに秘密鍵（〇〇.pem）を生成する。

⚠️
具体的な秘密鍵の生成手順はVPSによって異なる！

自分が契約しているVPSのドキュメントを見るのがおすすめ。

【手順1-2】秘密鍵を.sshディレクトリに置く

秘密鍵（例：ssh_key.pem）をローカルマシンの.sshディレクトリに置いておく。

Image in a image block

【手順1-3】秘密鍵の権限を変更する

秘密鍵（例：ssh_key.pem）の権限を変更する。

chmod 600 ~/.ssh/ssh_key.pem

【手順1-4】サーバーの22番ポートを接続許可する

✅VPSの管理画面でSSH接続に使用する22番ポートを接続許可しておく。

（XServerの場合）

  1. 管理画面で「パケットフィルター設定」を開き、「パケットフィルター設定を追加する」
    Image in a image block

  2. 「SSH接続で22番ポートを許可する設定」を追加する。
    Image in a image block

💡
これでSSH接続の準備OK！

【手順1-5】サーバーのIPアドレスを確認する

✅VPSの管理画面で「サーバーのIPアドレス」を確認する。

（XServerの場合）

管理画面の「VPS管理」で確認できる。

Image in a image block
Image in a image block

→この場合IPアドレスは220.158.21.55。

→この後のSSH接続で使うのでメモしておく。

【手順1-5】SSH接続する

✅VS Codeのターミナルを使用してSSH接続する。

（Macのターミナルや、WindowsのTeraTermを使ってもOK）

  1. コマンドを実行する。
    ssh -i ~/.ssh/秘密鍵ファイル名 root@VPSのIPアドレス

（例）
ssh -i ~/.ssh/ssh_key.pem root@220.158.21.55

  2. こんな画面になったらSSH接続成功！
    Image in a image block

【手順2】パッケージを更新する

✅VPSは古い状態で提供されることが多いので、まずはパッケージを最新に更新する。

【手順2-1】更新
  1. 更新コマンドを実行。
    apt update && apt upgrade -y

  2. 1〜2分待つと更新が完了する！
    Image in a image block

【手順3（飛ばしてもOK）】一般ユーザーを追加する

今はrootユーザーという何でもできる最強権限で操作しており、誤操作のリスクが高い💦

普段は安全な一般ユーザーで操作したいので、まずは一般ユーザーを作る✅

【手順3-1】一般ユーザーを追加

✅一般ユーザー「deploy（任意の名前）」を追加する。

  1. 一般ユーザーを追加。
    adduser deploy

    パスワードや名前の入力を求めれるので、適当に入力してEnterを押していく。

    Image in a image block

  2. sudo権限を付与。
    usermod -aG sudo deploy

【手順3-2】一般ユーザーにSSH鍵を配置

✅ 新しく作った一般ユーザー（ここでは deploy）でも、パスワードではなく 公開鍵認証 でログインできるようにする。

  1. .ssh ディレクトリを作成。
    sudo mkdir -p /home/deploy/.ssh

  2. ディレクトリに権限を設定。
    sudo chmod 700 /home/deploy/.ssh

  3. rootユーザーの公開鍵を、一般ユーザー用にコピー。
    sudo cp /root/.ssh/authorized_keys /home/deploy/.ssh/authorized_keys

    （公開鍵、秘密鍵はrootユーザーと同じものを使い回す）

  4. 公開鍵の所有者、権限を設定。
    sudo chown deploy:deploy /home/deploy/.ssh/authorized_keys
sudo chmod 600 /home/deploy/.ssh/authorized_keys

【手順3-3】一般ユーザーでSSH接続する

✅ 新しく作った一般ユーザー（ここでは deploy）でSSH接続してみる。

  1. ログアウトする。

    （今までrootユーザーでSSH接続していたので、一度ログアウトする。）

    exit

  2. 一般ユーザー（ここでは deploy）でSSH接続する。
    ssh -i ~/.ssh/秘密鍵ファイル名 一般ユーザー名@VPSのIPアドレス

（例）
ssh -i ~/.ssh/ssh_key.pem deploy@220.158.21.55

    こんな画面になったら一般ユーザーでSSH接続成功！

    Image in a image block

💡
以降はこの一般ユーザー（deploy）を使ってすべての操作をする！

HTMLを公開する

【手順1】Webサーバー（Nginx）を入れる

✅HTMLを表示するにはWebサーバーが必要！

【手順1-1】インストール

✅コマンド一つでWebサーバー（Nginx）をインストールできる。

  1. Webサーバーをインストール。
    sudo apt install -y nginx

    数秒待つとインストールが完了する！

    Image in a image block

【手順1-2】ファイアウォールの設定

✅ブラウザで該当ページを見るため、HTTP(80番ポート)を開ける。

  1. ファイアウォールでHTTP(80番ポート)を開ける。
    # 22番ポートも引き続き必要なので開けておく
sudo ufw allow 22/tcp

# 80番ポートを開ける
sudo ufw allow 'Nginx HTTP'

# 有効化
sudo ufw enable

# 確認
sudo ufw status

    Nginx HTTPがALLOWになっていればOK！

    Image in a image block

    💡
    これで、VPSの中にインストールしているWebサーバーはHTTP(80番ポート)を開放できた！

    しかし、まだVPS自体はHTTP(80番ポート)を開放できていない💦

    →両方とも開放して初めてHTTP(80番ポート)が使えるようになる

  2. サーバーの管理画面で、HTTP(80番ポート)を許可する。

    （契約しているVPSによって手順は異なるが、どのVPSでも管理画面の中に「パケットフィルタリング」や「パケットフィルター」という設定があるはず！）

    （XServerの場合）

    1. 該当のVPSの管理画面を開く。
      Image in a image block

    2. パケットフィルター設定を追加する。
      Image in a image block

    3. Web(80番ポート)の設定を追加する。
      Image in a image block

【手順1-3】http://〇〇にアクセスして表示を確認

✅ここまでの手順でデフォルトの画面が表示されるはずなので、確認してみる！

  1. ブラウザで http://<VPSのIP> もしくは http://ドメイン名 にアクセスし、Nginxの初期ページが表示されればOK🎉

    （VPSのIPはサーバーの管理画面から確認できる）

    Image in a image block

【手順2】任意のHTMLを表示してみる

✅デフォルトのHTMLではなく、任意のHTMLを表示する。

【手順2-1】新しいHTMLを作成

✅適当なHTMLを作ってみる。

  1. HTMLを作成。
    sudo nano /var/www/html/index.html
    <!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>テストページ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>body{font-family:system-ui;max-width:720px;margin:40px auto;padding:0 16px;line-height:1.8}</style>
</head>
<body>
  <h1>やったー！公開できた🎉</h1>
</body>
</html>

    →CTRL+X→Y→Enterを押してファイルを保存して閉じる。

【手順2-2】http://〇〇/index.htmlにアクセスして表示を確認

✅今作ったindex.htmlが表示されるか確認してみる

  1. ブラウザで http://<VPSのIP>/index.html もしくは http://ドメイン名/index.html にアクセスし、今作ったページが表示されればOK🎉

    （VPSのIPはサーバーの管理画面から確認できる）

    Image in a image block

💡
あとは同じ要領で、/var/www/html/〇〇にHTMLを増やしていけば自由にサイトが作れる！

まとめ

✅VPSを契約してから、Nginxをインストールして、HTMLを表示するまでの流れをまとめた。

大まかな流れは、

  1. SSH接続して
  2. Nginxをインストールする

の2ステップだけでHTMLが表示されるようになるので比較的簡単だった☺️

ただし、今回はセキュリティには配慮できていないので、実際に運用する場合はさらに設定が必要になりそう⚠️

参考サイト