全体の流れ #
- 開発に必要な環境を整える
- ソースコードを取得し、依存パッケージをインストール
- 開発サーバで動作確認
- 本番ビルドの作成
- Nginx設定を整えてビルド済みファイルを配信
- HTTPS対応(必要に応じて)
- 再起動時の自動起動(必要に応じて)
以下の手順書では、具体的な作業例を挙げます。
STEP1. 開発環境の準備 #
STEP1.1 Node.js と npm のインストール #
Ubuntu であれば、以下のコマンドで Node.js と npm をインストールします。
sudo apt update
sudo apt install -y nodejs npm
インストール後にバージョンを確認します。
node -v
npm -v
STEP1.2 サーバの用意 #
- Ubuntu などの Linux サーバを用意し、SSH でログインできる状態にしておきます。
- （本番運用の前提なので）root または sudo 権限があるユーザーを用意しましょう。
STEP2. ソースコードの取得 #
STEP2.1 ソースコードのダウンロード/クローン #
- GitHub などにある場合は
git clone https://...で取得 - Zip ファイルの場合はアップロードして解凍
- 以下では
/home/projectに配置したと仮定します。
STEP2.2 依存パッケージのインストール #
ソースコードが置かれているディレクトリに移動し、npm install で必要なライブラリをインストールします。
cd /home/project
npm install
成功すれば node_modules ディレクトリが生成されます。
STEP3. 開発サーバで動作確認 #
開発時は npm run dev を使ってローカルで簡易サーバを立ち上げます。以下は一例です。
npm run dev
実行するとターミナルに Local: http://localhost:5173 のようなログが表示されます。
ブラウザでその URL にアクセスするとアプリが動いていることを確認できます。
- リモートサーバでテストしたい場合は
vite.config.tsのserver.hostを0.0.0.0に設定し、外部からアクセス可能にしてください。
STEP4. 本番ビルドの作成 #
開発が落ち着いたら、本番用ビルドを作成します。これはアプリを最適化し、dist ディレクトリに
最終的な静的ファイル(HTML/JS/CSS)を生成する工程です。
cd /home/project
npm run build
- 成功すると、プロジェクトのルートに
distフォルダが生成されます。 - 中には
index.htmlとassetsフォルダなどが含まれています。
STEP5. Nginxでビルド済みファイルを配信 #
Vite のプレビューサーバではなく、Nginx などの Web サーバから静的ファイルを配信するのが一般的です。
STEP5.1 Nginx のインストール #
Ubuntu 上で Nginx をインストールします。
sudo apt update
sudo apt install -y nginx
インストール後、ブラウザで http://<サーバのIPアドレス>/ にアクセスすると
「Welcome to nginx!」というページが表示されます。
STEP5.2 本番用ファイルの配置 #
- 配信フォルダを作成 (例:
/var/www/myapp)sudo mkdir -p /var/www/myapp - ビルド済みファイル(
distの中身)をコピーsudo cp -r /home/project/dist/* /var/www/myapp/ - 配置後、内容を確認
ls -l /var/www/myapp # index.html と assets フォルダがあればOK
STEP5.3 Nginx 設定ファイルの作成 #
Nginx は設定ファイル server { ... } ブロックを
sites-available/ → sites-enabled/ で管理するのが標準的です。
- 新しい設定ファイルを作成
sudo nano /etc/nginx/sites-available/myapp.conf - 下記の内容を記述 (SPA を想定した設定例)
server { listen 80; server_name _; # IPアクセスのみの場合。ドメインなら server_name example.com; root /var/www/myapp; # distファイル配置先 index index.html; # SPA対応設定: ルータのパスが /xxx の場合も index.html にフォールバック location / { try_files $uri $uri/ /index.html; } }server_nameは本番ドメインを使うなら例:server_name example.com;root /var/www/myapp;はビルド済みファイルを配置したディレクトリを指定try_files $uri $uri/ /index.html;は React Router 等を使い、URL直打ちでもindex.htmlにフォールバックするための設定
- 設定ファイルを有効化し、デフォルト設定を無効化
# シンボリックリンクで myapp.conf を sites-enabled に置く sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/ # デフォルトサイトがある場合は無効化する sudo rm /etc/nginx/sites-enabled/default - Nginx 設定ファイルの文法チェック & リロード
sudo nginx -t sudo systemctl reload nginx - ブラウザで
http://<サーバのIP>/にアクセス- 先ほどの「Welcome to nginx!」ではなく、ビルドしたアプリが表示されればOKです。
STEP6. HTTPS (SSL) の導入（必要に応じて） #
本番環境では https:// に対応するのが一般的です。
無料の Let’s Encrypt (Certbot) を使う例:
sudo apt update
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
対話式に進めると自動で Nginx が SSL 設定を組み込み、HTTPS でアクセスできるようになります。
（DNS が yourdomain.com をこのサーバに向けている必要があります）
STEP7. 再起動時の自動起動 #
STEP7.1 静的ファイルのみの場合 #
Vite でビルドした静的ファイルを Nginx が配信している場合は、
Nginx が自動起動していれば特に問題ありません。下記の有効化が済んでいるか確認します。
sudo systemctl enable nginx
これでサーバ再起動時にも自動で Nginx が立ち上がります。
STEP7.2 Node.js + Express / APIサーバがある場合 #
もしバックエンドとして Node.js が必要で、同じサーバで動かす場合は、PM2 や systemd で Node.js プロセスを常駐化するのが一般的です。
# PM2 インストール
sudo npm install -g pm2
# アプリ(Expressなど)を起動
pm2 start "npm run start" --name my-backend
# 自動起動を有効化
pm2 startup systemd
pm2 save
Nginx は /api/ へのリクエストだけを Node.js に proxy_pass し、
フロントエンドは静的ファイルで配信するといった構成になります。
STEP8. トラブルシューティング #
- 「Welcome to nginx!」のまま
- デフォルト設定を無効化していない
server_nameがマッチしていない
- 404 エラーが出る
rootの設定パスが誤っている- SPA で
try_filesを設定していない
- ブラウザでアクセスできない
- ポート80/443 を開放していない（クラウドのセキュリティグループや UFW）
- サーバIPやドメイン名が正しく割り当てられていない
STEP9. まとめ #
- 開発:
npm run devで動作確認 - ビルド:
npm run build→distフォルダ生成 - Nginxで配信:
distの中身を/var/www/myappに配置 →myapp.confを設定 →nginx -t→systemctl reload nginx - HTTPS対応:
certbot --nginx -d yourdomain.comなどで証明書を取得 - 自動起動: 静的ファイルだけなら Nginx、自前APIも必要なら PM2 や systemd で Node.js を常駐管理
