オンライン転送への Vue デプロイが有効にならない問題の解決方法

Vue.js は人気のあるフロントエンド フレームワークであり、開発プロセスでは通常、Vue.js フロントエンド アプリケーションをクラウド サーバーにデプロイします。ただし、展開後、転送が有効にならないという問題が発生することがあります。では、Vue のオンライン転送へのデプロイが有効にならないという問題を解決するにはどうすればよいでしょうか?

1. Nginx 構成を確認する

最初のステップは、Nginx 構成が正しいかどうかを確認することです。 Nginx 構成では、場所として転送されるパスを構成し、プロキシ サーバーとポートを指定する必要があります。例:

server {
    listen 80;
    server_name example.com;
    location /api/ {
        proxy_pass http://localhost:3000;
    }
}

上記の設定は、example.com/api/ にあるすべてのリクエストをローカル ポート 3000 に転送することを意味します。

2. Vue コード転送設定を確認する

Nginx 設定に加えて、Vue コード転送設定も確認する必要があります。 vue.config.js ファイルで、転送されるパスを proxy オプションとして構成し、プロキシ サーバーとポートも指定する必要があります。例:

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

上記の構成は、/api の下にあるすべてのリクエストがローカル ポート 3000 に転送され、/api がリクエストから削除されることを意味します。これにより、リクエスト転送の目的が達成されます。

3. ファイアウォール設定を確認する

上記 2 つの方法で問題が解決しない場合は、クラウド サーバーのファイアウォール設定も確認する必要があります。場合によっては、クラウド サーバーのファイアウォール設定により特定のポートへのアクセスが制限され、サーバーの外部から転送サービスにアクセスできなくなることがあります。ファイアウォールの設定を確認するには、クラウド サーバーにログインする必要があります。CentOS を例に、次のコマンドを実行します。

systemctl status firewalld

ファイアウォールが有効になっていない場合、ポート アクセスは制限されません。ファイアウォールが有効な場合、ポート開放の設定が必要です。ポート 3000 を例として、次のコマンドを実行します。

sudo systemctl start firewalld  # 启用防火墙
sudo firewall-cmd --permanent --add-port=3000/tcp  # 开放 3000 端口
sudo firewall-cmd --reload  # 重启防火墙
sudo firewall-cmd --list-all  # 查看已开放端口

上記のコマンドはポート 3000 を開き、外部サーバーが転送サービスにアクセスできるようにします。

まとめ

上記は、Vue のオンライン転送へのデプロイが有効にならない問題を解決する 3 つの方法です。実際の開発プロセスでは、Nginx、Vue コード、クラウド サーバーのファイアウォール設定を同時に確認する必要があります。上記の一連の操作により、Vue.js アプリケーションを正常にデプロイし、リクエスト転送を実装することができます。

以上がオンライン転送への Vue デプロイが有効にならない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。