Vue.jsはHTML 5 Historyモードでのnginx導入をどのように実現するか
現在、フロントエンドはますますVueを採用して開発されているが、Vueの設計当初は前後の分離操作を容易にするためであり、vueがHistoryモードを採用する場合、静的ファイル方式で配置するだけでリフレッシュ操作をサポートしない場合、404の異常な問題を報告する.公式には詳細な説明があり、具体的には以下を参照してください.https://router.vuejs.org/zh/guide/essentials/history-mode.html.
この解決策については公式にも説明されていますが、あまりにも簡単すぎて、実際の導入で多くの問題が発生する可能性がありますので、実際のプロジェクトでの解決策を発表します.参考にしてください.
具体的にはconfの構成は次のとおりです.
ここでupstreamはドメイン名やIPに直接書くことができ、K 8 S環境下のバックエンドプロジェクトのサービス名もサポートされているため、異なるマシンIPを追加することなく自動的に負荷バランスを実現できます.
この解決策については公式にも説明されていますが、あまりにも簡単すぎて、実際の導入で多くの問題が発生する可能性がありますので、実際のプロジェクトでの解決策を発表します.参考にしてください.
具体的にはconfの構成は次のとおりです.
# worker
worker_processes auto;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
#
proxy_temp_path /tmp/temp_dir;
proxy_cache_path /tmp/cache levels=1:2 keys_zone=cache_one:100m inactive=1d max_size=1g;
# springboot
upstream seeker_server {
server service-XXXX-gateway-fat:7000 weight=3; # K8s API
server 192.168.2.103:7000 backup; # backup 。
keepalive 32;
}
default_type application/octet-stream;
#
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"'
'"$upstream_cache_status"';
sendfile on;
keepalive_timeout 65;
# gzip
gzip on;
server {
listen 80;
# listen 443;
# ssl on;
# ssl_certificate /etc/nginx/ssl/server.crt;
# ssl_certificate_key /etc/nginx/ssl/server.key;
server_name localhost;
charset utf-8;
#
# access_log /var/log/nginx/host.access.log main;
# nginx
location ~* ^.+\.(gif|jpg|jpeg|png|htm|html|css|js|flv|ico|swf|cur|gz|svg|map|mp4|ogg|ogv|webm)$ {
proxy_redirect off;
#
access_log off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache cache_one;
proxy_cache_key $host$uri$is_args$args;
proxy_cache_valid 200 302 1h;
proxy_cache_valid 301 1d;
proxy_cache_valid any 1m;
expires 7d;
add_header Nginx-Cache "$upstream_cache_status";
}
# vuejs
location / {
root /etc/nginx/html;
try_files $uri $uri/ @router;
index index.html index.htm;
}
# @router, ,
# rewrite index.html ,
location @router {
rewrite ^.*$ /index.html last;
}
# springboot
location /xxxx/api/ {
# springboot ip
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://seeker_server/gateway/xxxx/api/; # seeker_server upstream 。
proxy_http_version 1.1;
proxy_set_header Connection "";
}
error_page 404 /404.html;
# redirect server error pages to the static page /500.html
#
error_page 500 502 503 504 /500.html;
location = /50x.html {
root /etc/nginx/html;
}
}
}
ここでupstreamはドメイン名やIPに直接書くことができ、K 8 S環境下のバックエンドプロジェクトのサービス名もサポートされているため、異なるマシンIPを追加することなく自動的に負荷バランスを実現できます.