VUE nginxの設定項目は、前端と後端を分離しました

前端と後端、VUEが使用されるフレームの前端部を分離するライン上のプログラムは、バックグラウンドがspringbootフレームであると、問題が発生しました。オンラインの背景は、学生によって行われているのTomcatにデプロイされます。

Vueのプロジェクト
VUE-ルータのルーティングジャンプを使用するプロジェクトのVUE-cliの枠組みを構築することが、アドレスが実物にVUE-ルータの仮想パスのうちに作成されていないため、ジャンプアドレスを見つけることができません後ので、あなたがする必要がありconfigureに別のnginxの設定ファイルでのみの部分をルーティングします。

 

nginxの設定ファイル

 server {
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		location / {
             proxy_pass http://localhost:8080/;
			proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_hide_header Server;
            proxy_set_header X-Real-IP      $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_connect_timeout      10;
            proxy_send_timeout         10;
            proxy_read_timeout         10;
            proxy_intercept_errors     on;
            proxy_buffering            off;
        }
		 location /api/ {
            proxy_pass http://XXXX:8081/api/;
			proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_hide_header Server;
            proxy_set_header X-Real-IP      $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_connect_timeout      10;
            proxy_send_timeout         10;
            proxy_read_timeout         10;
            proxy_intercept_errors     on;
            proxy_buffering            off;
        }
		location /a/ {
            proxy_pass http://XXXX:8081/a/;
			proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_hide_header Server;
            proxy_set_header X-Real-IP      $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_connect_timeout      10;
            proxy_send_timeout         10;
            proxy_read_timeout         10;
            proxy_intercept_errors     on;
            proxy_buffering            off;
        }
 
		 
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
		
        # location /js/ {
        #    root           html;
        #    fastcgi_pass    127.0.0.1:7004;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

 

高度：     localhostを：8080があるVUEサービス。だから、へのAPIの傍受と要求をインターセプトした後のhttp：// XXXX：8081 / API / 移動するには、このアドレス。

一部の人々は、VUE自身の内部を言うか、バックエンドインターフェースに直接要求します。実際には、これは1つのステップは二つのステップが同じであるで間に合わせることができます。個人的に、私は抗nginxのプロキシを行う傾向にあります。本当のIPを隠します。VPCは、ネットワーク内で前方に行うことができれば、多くの行うことができます、だけでなく、nginxのにゲートウェイセキュリティだけでなく、このような処理を負荷分散のようにして。中小企業は、プロジェクトを満たすことができます。