Docker Laravel Vuejs Nginx发布加载资产

Question

我无法使Nginx配置正常工作。

我有一个Laravel应用程序，但是/ admin uri被Nginx重定向到了vuejs应用程序。

VueJS应用程序的index.html文件可以很好地加载，但资产不能正常运行，因此该应用程序无法正常工作。

Laravel应用程序和VueJS应用程序位于通过docker-compose启动的两个单独的Docker容器上。

我尝试在“ location / admin {}”部分中尝试使用“ try_files”的各种组合，但到目前为止没有成功。这些调整导致所有内容都出现404错误或500个服务器错误。

这是我的Nginx conf：

server {
    listen 80;
    listen [::]:80;

    client_max_body_size 200M;
    disable_symlinks off;
    server_tokens off;
    index index.php;
    root /var/www/public;

    location /admin {
        root /var/www/public/dist;      
        proxy_pass http://admin:8001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }

    location / {
        try_files $uri /index.php$is_args$args;
    }

    location ~ \.php {
        try_files $uri =404;
        fastcgi_pass http://app:9000;

        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        fastcgi_param DOCUMENT_ROOT $realpath_root;
        fastcgi_param REALPATHTEST $realpath_root;
        internal;
    }
}

以下屏幕截图显示index.html加载正常，但js＆css资产未加载

Chrome中的HTML输出：

页面显示200个结果，资产显示404个错误：

任何帮助将不胜感激。

Answer 1

最后我只需要这样：

a

所以我最终的nginx配置是：

1

我真的希望这可以节省一些时间！

Answer 2

如果您正在使用vue-cli设置vue项目，请将here设置为.values()

否则，您必须为vue.js生成的资产加上/admin前缀，或者针对每个/admin和/css请求在vue项目下制作nginx try文件。