1. ソフトウェア環境

• Node.js（バージョン >= 18、node -vコマンドで確認可能）
• Nginx / OpenResty / Tengine

2. URLの変更

パッケージング環境に応じて、以下のファイルを変更します：

• .env.test - テスト環境
• .env.pre - プレリリース環境
• .env.prod - 本番環境

ファイル内のVITE_APP_API_URLとVITE_APP_TITLEのみを変更します：

VITE_APP_API_URL = 'https://api.example.com/baiZe-admin-api'
VITE_APP_TITLE = 'BaiZe管理システム'

3. フロントエンドアクセスパスの変更

vite.config.jsファイルを開き、base変数を変更します：

例えば、BaiZeプレビュー環境アドレスがhttps://preview.baize.vipの場合、ルートパスは/となり、変更は不要です：

export default {
  base: process.env.NODE_ENV === 'production' ? '/' : '/',
  root: process.cwd(),
  resolve: {
    alias: [

プレビュー環境アドレスがhttps://preview.baize.vip/baiZe-admin/の場合、ルートパスは/baiZe-adminとなり、以下のように変更します：

export default {
  base: process.env.NODE_ENV === 'production' ? '/baiZe-admin/' : '/',
  root: process.cwd(),
  resolve: {
    alias: [

4. ビルドコマンドの実行

本番環境の場合、以下のビルドコマンドを実行します：

npm run build:prod

ビルド成功後、/distディレクトリが生成されます。

テスト環境にパッケージングする場合はnpm run build:test、プレリリース環境の場合はnpm run build:preを実行します。

5. Nginxの設定

ステップ4で生成した/distディレクトリをサーバーにコピーし、以下のようにNginxを設定します：

5.1 キャッシュ付き設定

location / {
    alias /home/baize-admin/dist/;
    try_files $uri $uri/ /index.html last;
    index index.html;

    # index.htmlホームページはキャッシュしない
    expires -1;

    # 静的リソースファイル（index.html以外）を30日間キャッシュ
    if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|css|js)$) {
        expires 30d;
    }
}

5.2 キャッシュなし設定

location / {
    alias /home/baize-admin/dist/;
    try_files $uri $uri/ /index.html last;
    index index.html;
    expires -1;
}