如何在Google App Engine部署两个Nuxt.js项目分别匹配根路径与/admin路径

1. 调整Nuxt项目基础路径配置 #

主站项目（根域名访问） #

无需额外修改路由基础配置，保持默认根路径即可。

Admin项目（/admin子路径访问） #

修改项目配置文件，指定路由基础前缀：

• Nuxt3：编辑nuxt.config.ts，添加app.baseURL = '/admin'配置
• Nuxt2：编辑nuxt.config.js，添加router.base = '/admin'配置
  修改后项目所有静态资源、内部路由都会自动适配/admin前缀

2. 编写GAE全局调度规则（dispatch.yaml） #

GAE通过调度规则将不同路径的请求转发到对应服务，两个项目需要分别部署为GAE的两个独立服务，主站用默认default服务名，admin项目用admin服务名。
新建dispatch.yaml文件，内容如下：

dispatch:
  # 所有/admin前缀的请求转发到admin服务
  - url: "www.example.com/admin/*"
    service: admin
  # 其余所有请求转发到主站服务
  - url: "www.example.com/*"
    service: default

调度规则按从上到下的顺序匹配，因此要把更精确的/admin路径规则放在通用根路径规则前面

3. 分别编写两个项目的GAE部署配置（app.yaml） #

主站项目app.yaml #

service: default
runtime: nodejs18 # 替换为你项目使用的Node.js版本
instance_class: F1 # 可根据需求调整实例规格

handlers:
  # 匹配Nuxt构建的静态资源
  - url: /_nuxt
    static_dir: .output/public/_nuxt
    secure: always
  # 匹配其他后缀的静态资源
  - url: /(.*\.(gif|png|jpg|ico|txt|svg|css|js))$
    static_files: .output/public/\1
    upload: .output/public/.*\.(gif|png|jpg|ico|txt|svg|css|js)$
    secure: always
  # 剩余请求走SSR逻辑
  - url: /.*
    script: auto
    secure: always

Admin项目app.yaml #

service: admin
runtime: nodejs18 # 同主站保持一致或适配项目需求
instance_class: F1

handlers:
  - url: /admin/_nuxt
    static_dir: .output/public/_nuxt
    secure: always
  - url: /admin/(.*\.(gif|png|jpg|ico|txt|svg|css|js))$
    static_files: .output/public/\1
    upload: .output/public/.*\.(gif|png|jpg|ico|txt|svg|css|js)$
    secure: always
  - url: /admin/.*
    script: auto
    secure: always

如果你使用的是Nuxt2，把上述app.yaml中所有.output/public路径替换为Nuxt2打包输出的dist目录路径即可

4. 执行部署 #

• 分别进入两个项目根目录，执行打包命令：npm run build
• 在主站项目目录执行部署命令：gcloud app deploy
• 在admin项目目录执行部署命令：gcloud app deploy
• 在dispatch.yaml所在目录执行调度规则部署命令：gcloud app deploy dispatch.yaml

注意事项 #

• 两个项目必须部署在同一个GCP项目下，才能共用调度规则
• 提前在GCP控制台「App Engine > 设置 > 自定义域名」中完成www.example.com的绑定和SSL证书配置
• 如果项目使用SSG静态生成模式，只需保留静态资源相关的handler配置即可，无需配置SSR脚本转发规则

内容的提问来源于stack exchange，提问作者sanket pahuja