vue3 ssr 的 nginx 定位规则

Question

问题

我有一个在 docker 容器中运行的 Vue 3 SSR 应用程序。我有第二个包含 NGINX 的 docker 容器。我需要在我的 NGINX 容器中有正确的位置规则，才能将正确的值传递给我的 Vue3 应用程序容器。

我进入 NGINX 的应用程序 URL 是

1. /my/prefix/
2. /my/prefix/page1/123?name=one
3. /my/prefix/page2/789?id=123&name=one
4. /my/prefix/css/styles.css 和 /my/prefix/js/app.js

我需要将这些 URL 传递到我的 Vue 应用容器，如下所示

1. /
2. /page1/123?name=one
3. /page2/789?id=123&name=one
4. /my/prefix/css/styles.css 和 /my/prefix/js/app.js

我想不出正确的组合来让它发挥作用。

我的尝试

以下解析 (1)：/my/prefix/ 变为 /。然而，这本身并不能解决 (2) (3) 和 (4)，因此我的应用程序中的第 2 和第 3 页显示 404，并且我没有加载样式和 js。

location = /my/prefix/ {
    set $upstream http://newserver:8080/;
    proxy_pass $upstream;
}

我尝试添加以下内容，我有 (4) 个工作，样式/js 存在，因为传递的 URL 是 /my/prefix/css/styles.css 和 /my/prefix/js/app.js。 但是（2/3）由于样式/js 工作的确切原因，我的应用程序中的路由失败，它传递 URLS /my/prefix/page1/123?name=one 和 /my/prefix/page2/789?id=123&name=one 我需要它是 @ 987654338@和/page2/789?id=123&name=one

location /my/prefix/ {
    set $upstream http://newserver:8080;
    proxy_pass $upstream;
}

我尝试了以下解决方法 (2/3)。这确实只匹配 (2/3) 路径，但是传递给 Vue 容器的路径在 page1|page2 之后被删除，即 /page1/?name=one 和 /page2/?id=123&name=one 这是错误的。

location ~ ^/my/prefix/(page1|page2) {
    set $upstream http://newserver:8080;
    proxy_pass $upstream/$1$is_args$args;
}

我花了几天时间试图找到正确的组合，但我完全不知道下一步该尝试什么。

有人有什么建议吗。

Answer 1

经过 2 天的尝试，我终于有了一个可行的解决方案

# URL (1)
# match the root page URL exactly (the = does an exact match the stops searching for rules) 
# - MUST have a trailing / on the location to match our app which appears to always have it
# - MUST have a trailing / on the upstream, so it removes the matched path before passing on
# the path requested and then stops searching for any more matches.
location = /my/prefix/ {
    set $upstream http://newserver:8080/;
    proxy_pass $upstream;
}

# URL (2) (3) 
# match the page1|page2 pages
# remove the path and pass on the paths and parameter values
# $1 references what is in the first ()
# $2 references what is in the second ()
location ~ ^/my/prefix/(page1|page2)(.*) {
    set $upstream http://newserver:8080;
    proxy_pass $upstream/$1$2$is_args$args;
}

# URL (4) 
# match any path starting with /my/prefix/, 
# pass on the url exactly as is (/my/prefix/path/path etc)
# this should match the css/js folders
location /my/prefix/ {
    set $upstream http://newserver:8080;
    proxy_pass $upstream;
}