54303


vue-routerのmode:historyを用いたwebアプリケーションをdockerを使ってデプロイしています。  
その際に、https対応するべく、https-portalを採用し、リリースまでできましたが、F5ボタンを押下した際に、404エラーとなってしまいます。

公式サイトには下記のように記載がありますが、  
下記の記載をしてもうまくいきません。

<https://router.vuejs.org/ja/guide/essentials/history-
mode.html#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A%E4%BE%8B>

[code]

    location / {
      try_files $uri $uri/ /index.html;
    }
    
[/code]

今回の構造は、https-portalをリバースプロキシとして採用し、  
80ポートを受けるコンテナをhttps-portal、  
8080ポートを受けるコンテナをxxxxx.comとして  
二つのコンテナを起動し、80ポートを8080ポートに転送する処理を行っています。

https-portalのコンテナにはindex.htmlは無く、  
xxxxx.comのwebアプリケーションを実行しているコンテナにindex.htmlが存在します。

[code]

    ファイル名：nginx.conf
    
    user  nginx;
    worker_processes  1;
    pid        /var/run/nginx.pid;
    events {
        worker_connections  1024;
    }
    http {
        include       /etc/nginx/mime.types;
        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"';
        access_log off;
    
        access_log  /var/log/nginx/access.log  main;
        sendfile        on;
        keepalive_timeout  65;
        gzip  on;
        server_tokens off;
        server_names_hash_max_size 512;
    
        include /etc/nginx/conf.d/*.conf;
        server {
            listen      80 default_server;
            server_name _;
            return      444;
        }
    }
    
[/code]

[code]

    ファイル名：xxxxx.com.conf
    
    server {
        listen       80;
        server_name  xxxxx.com;
    
        location / {
          return    301 https://$server_name$request_uri;
        }
    
              location /.well-known/acme-challenge/ {
              alias /var/www/default/challenges/;
              try_files $uri =404;
          }
    }
    
[/code]

[code]

    ファイル名：xxxxx.com.ssl.conf
    
    server {
        listen 443 ssl http2;
        server_name xxxxx.com;
        ssl on;
        ssl_certificate /var/lib/https-portal/xxxxx.com/production/chained.crt;
        ssl_certificate_key /var/lib/https-portal/xxxxx.com/production/domain.key;
        ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
        ssl_session_cache shared:SSL:50m;
        ssl_ciphers ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA;
        ssl_prefer_server_ciphers on;
        ssl_dhparam /var/lib/https-portal/dhparam.pem;
        # Send HSTS header if configured
    
        # Prevent Nginx from leaking the first TLS config
        if ($host != $server_name) {
            return 444;
        }
        location / {
    
            proxy_pass http://172.17.0.3:8080;
    
            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_set_header X-Forwarded-Proto $scheme;
    
        }
    }
    
[/code]

try_files $uri $uri/ /index.html;をどこかに採用すればよいか、  
教えて頂けますでしょうか。


CC BY-SA 4.0
2019-04-01T04:52:41.333
53845
2019-04-19T00:39:25.980
2019-04-01T06:05:07.830
30948
30948
question
docker vue.js https
https-portalを利用したvue-routerのmode:historyについて


自己解決できたので、記録として残しておきます。

Spring bootとVue routerを利用したF5対策は、  
Spring boot側のコントローラーで制御してあげると404にならずに済みます。

[code]

    @GetMapping("/*")
    public String indexAll(Principal principal) {
        if (Objects.isNull(principal)) {
            return "redirect:login";
        }
        return "../static/index";
    }
    
[/code]

全て（/*）のgetリクエストに対し、staticフォルダのindex.htmlに返しています。  
※ 未ログインの場合は、ログインページに飛ばします。

ただし、このままだとvue.jsが存在しないurlにも画面遷移できてしまうため、  
存在しないurlはvue routerにて制御してあげ、適切な404ページを表示してあげましょう。


CC BY-SA 4.0
2019-04-19T00:39:25.980
54303
2019-04-19T00:39:25.980
30948
53845
answer