Skip to content
VDS · ウェブサイトとウェブサーバー

静的サイト：ファイルからドメインまで

ランディングページや React・Vue のビルドの完全な手順：VPS へのファイルのアップロード、Web サーバーでの配信、ドメインの紐付け、ダウンタイムなしの更新について説明します。

更新日 2026年8月23日

静的サイトは、HTML、CSS、画像、フロントエンドのビルドといった既成ファイルの集合です。PHPもデータベースも不要なため、VDS-1でも快適に動作し、最大500 Mbit/sのかなりのトラフィックを処理できます。

ファイルの配置場所

サイトごとに個別のディレクトリを作成します。

mkdir -p /var/www/example.ru
chown -R www-data:www-data /var/www/example.ru

ローカルマシンからは、通常の scp または rsync でアップロードします。

scp -r ./dist/* root@YOUR_ADDRESS:/var/www/example.ru/
rsync -avz --delete ./dist/ root@YOUR_ADDRESS:/var/www/example.ru/

rsync --delete は、ビルドに存在しなくなったファイルをサーバーから削除します。これがないと、古いJSチャンクが何年も溜まり続けます。

Webサーバー経由での配信

最小限の Nginx 設定:

server {
    listen 80;
    server_name example.ru;
    root /var/www/example.ru;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|svg|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

try_files ... /index.html の行は、React、Vue、Svelteで構築されたシングルページアプリケーションに必要です。これがないと、/about に直接アクセスした際に404が返されます。

次に Let's Encrypt証明書 を設定すると、サイトがHTTPSで開けるようになります。

ドメイン

ドメインパネルで、マシンのパブリックアドレス（/hosting/vds/m/<id> の「Overview」タブ）を指すAレコードと、www 用の同じレコードを作成します。確認:

dig +short example.ru

レコードの反映には最大で数時間かかることがあります。その間、サイトはマシンのアドレスでアクセスできます。

ダウンタイムなしでの更新

稼働中のディレクトリにファイルを上書きアップロードしないでください。訪問者がビルド途中のサイトを目にしてしまう可能性があります。別の場所でビルドし、シンボリックリンクを切り替えます。

rsync -avz ./dist/ /var/www/releases/$(date +%s)/
ln -sfn /var/www/releases/1724400000 /var/www/example.ru-current
systemctl reload nginx

その後、設定の root は /var/www/example.ru-current を指します。

よくある間違い

症状原因
空白ページ、コンソールにJSの404誤った base でファイルがビルドされている — バンドラーの設定を確認してください
一部の訪問者に古いバージョンが表示されるブラウザキャッシュ — ハッシュ化されたファイル名を使用してください
すべてで403ディレクトリがWebサーバーユーザーから読み取り可能になっていない
ホームページのみ動作するシングルページアプリケーション用の try_files がない

フロントエンドはローカルでビルドし、完成した dist をアップロードすることをおすすめします。メモリ2 GBのVDS-1では、大規模プロジェクトのビルドがメモリ不足で失敗することがあります。