nginx を使用して同じドメイン名で複数の Vue プロジェクトをデプロイし、リバース プロキシを使用する方法

//プロジェクト1
モジュール.エクスポート = {
 開発者: {},
 建てる： {
  assetPublicPath: '/project1/' // 先頭と末尾の '/' に注意してください
 }
}

//プロジェクト2
モジュール.エクスポート = {
 開発者: {},
 建てる： {
  assetPublicPath: '/project2/' // 先頭と末尾の '/' に注意してください
 }
}

//プロジェクト1
モジュール.エクスポート = {
 NODE_ENV: '"production"'、
 BASE_API: '"/api/pro1"' // これは後で nginx の設定に対応します}

//プロジェクト2
モジュール.エクスポート = {
 NODE_ENV: '"production"'、
 BASE_API: '"/api/pro2"' // これは後で nginx の設定に対応します}

// 履歴モードを使用しました。ハッシュモードはテストしていませんが、同じ効果があると思います // project1
デフォルトの新しいルーターをエクスポートします({
 base: '/project1/', // サブプロジェクト名を変更することに注意してください。これは build.assetsPublicPath に対応します。
 モード: '履歴'、
 スクロール動作: () => ({ y: 0 }),
 ルート: []
})

//プロジェクト2
デフォルトの新しいルーターをエクスポートします({
 base: '/project2/', // サブプロジェクト名を変更することに注意してください。これは build.assetsPublicPath に対応します。
 モード: '履歴'、
 スクロール動作: () => ({ y: 0 }),
 ルート: []
})

# このバージョンは package.json のバージョンですが、このバージョンを再指定する必要があります$ npm i [email protected] -D

。
├─conf
│ ├─... # その他のファイル│ └─nginx.conf
│
├─html # ここだけ見て、他は今のところ使わない│ ├─project1
│ │ └─静的
│ │ ├─css
│ │ ├─フォント
│ │ └─js
│ │ ├─グ
│ │ └─V
│ ├─プロジェクト2
│ │ └─静的
│ │ ├─css
│ │ ├─フォント
│ │ └─js
│ │ ├─グ
│ │ └─V
│ ├─index.html
│ └─50x.html
└─... # その他のファイル

# ...
# リバースプロキシ http {
  mime.types を含めます。
  デフォルトタイプ アプリケーション/オクテットストリーム;

  #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
  # '$status $body_bytes_sent "$http_referer" '
  # '"$http_user_agent" "$http_x_forwarded_for"';

  ファイル送信オン;
  キープアライブタイムアウト65;

  クライアントの最大ボディサイズは20Mです。
  クライアントボディバッファサイズ 10M;
  ラージクライアントヘッダーバッファ 4 128k;
  
  # これはクラスターアップストリームとして使用できます p1_server {
    サーバー localhost:8081;
  }

  # これはクラスターアップストリーム p2_server として使用できます {
    サーバー localhost:8082;
  }

  サーバー{
    8080を聴く;
    server_name ローカルホスト;
    文字セット utf-8;

    プロキシ接続タイムアウト 180;
    プロキシ送信タイムアウト 180;
    プロキシ読み取りタイムアウト 180;
    proxy_set_header ホスト $host;
    proxy_set_header X-Forwarder-For $remote_addr;

    root html; # ここでフォルダーを指定します # プロジェクトのルート全体。私は面倒だったので同じファイルに直接書きました # たくさんある場合は、複数の conf ファイルを設定し、include を使用して関連付けることができます location / {
      try_files $uri $uri/ /index.html; # ここで、htmlフォルダ内のindex.htmlが指定されていることがわかります
    }
    
    #プロジェクト1
    # 以下は、現在の vue プロジェクトの config/index.js の build.assetsPublicPath 構成です。
    # これは、Vueプロジェクトで設定されたルーターのベースでもあります
    場所 ^~ /project1 {
      try_files $uri $uri/ /project1/index.html; # ここでは、htmlフォルダの下のproject1フォルダのindex.htmlが指定されていることがわかります。
    }
    
    #プロジェクト2
    # プロジェクト2の設定場所はここです ^~ /project2 { # 
      try_files $uri $uri/ /project2/index.html; # ここでは、htmlフォルダの下のproject2フォルダのindex.htmlが指定されていることがわかります。
    }
    
    # これは、project1 が構成のために呼び出す必要のあるインターフェースです。場所 /api/pro1 { # これは、vue プロジェクトの prod.env.js の構成 BASE_API です。 
      proxy_redirect オフ;
      proxy_set_header ホスト $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_pass http://p1_server; # ここでの p1_server は上記の設定に対応します。upstream p1_server {}、ここでクラスタリングを行うことができますが、必要ないので、単純に設定します}
    
     # これは、project1 が構成場所 /api/pro2 のために呼び出す必要のあるインターフェースです { # これは、vue プロジェクトの prod.env.js の構成 BASE_API です
      proxy_redirect オフ;
      proxy_set_header ホスト $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_pass http://p2_server; # ここでの p2_server は上記の設定に対応します。upstream p2_server {}、ここでクラスタリングを行うことができますが、必要ないので、単純に設定します}

    # ...
  }

  # ...
}

...
<p><em>nginx をご利用いただきありがとうございます。</em></p> <!-- 表示場所 -->

<!-- 開始: 追加 -->
<時間>
<a href="/project1" rel="external nofollow" >プロジェクト 1</a> | <a href="/project2" rel="external nofollow" >プロジェクト 2</a>
<!-- 終了: 追加 -->

</body> <!-- 表示目的のため -->