使用express直接在Google App Engine中提供静态文件

Question

我有一个标准的 Google App Engine 环境，并且正在尝试为我的

create-react-app

前端提供一些静态文件，但如果不将

client/build/

文件复制到

server/

文件夹中，我就无法做到这一点。

我的文件结构如下所示：

.
├── app.yaml
├── package-lock.json
├── package.json
├── tsconfig.json
├── client
│   ├── build/
│   ├── package-lock.json
│   ├── package.json
│   ├── public/
│   ├── src/
│   └── tsconfig.json
└── server
    ├── dist/
    ├── package-lock.json
    ├── package.json
    ├── src/
    └── tsconfig.json

我一直在做的是将所有源文件上传到 Google Cloud（不包括本地构建的），让它在云中构建所有内容，然后在构建过程结束时将客户端文件复制到服务器：

"build": "npm run build:client && npm run build:server && rsync -av --delete client/build/ server/build/"

但似乎没有必要在客户端构建文件，然后将它们复制到服务器。

我想我应该使用

app.yaml

中的处理程序直接从

client/

提供静态文件，基于 here 的示例，同时也允许我的服务器处理 API 请求。当我尝试这个时，我将以下内容添加到

app.yaml

：

handlers:
  - url: /static
    static_dir: client/build/static

  - url: /(.*\.(json|ico|js))$
    static_files: client/build/\1
    upload: client/build/.*\.(json|ico|js)$

  - url: /.*
    script: auto

并稍微改变了我在

app.ts

的路线：

// Routes
app.use('/auth', authRouter);
app.use('/api', apiRouter);
...

// Serve the React app
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../../client/build', 'index.html')); // before it was just '../build' instead
});

但这意味着我在尝试访问前端时会遇到

404

错误。

正确的方法是将构建的文件从

client/

复制到

server/

吗？如果是这样，是否有原因？在本地进行还是作为云中构建步骤的一部分更好？否则，我需要对处理程序或路由进行哪些更改才能使其正常工作？

Answer 1

旧版本的文档说

此目录中的所有文件都作为静态文件随您的应用上传。 App Engine 与应用程序的文件分开存储和提供静态文件。

新版本的文档说

给定目录中的所有文件都作为静态文件上传

从上面的两个陈述中，我相信 Google 会在部署过程中查找

client/build/static

中的文件并将它们视为静态文件（它可能会将它们存储在与应用程序文件分开的其他位置）。但是在部署之前/期间您没有这样的文件夹。仅在运行您所说的在生产中运行的构建命令（生产后）后才会创建该文件夹。

既然您说在本地运行构建会创建

static

 文件夹，您可以尝试在本地运行构建，然后部署服务器和客户端的构建版本。这也意味着您必须删除 

build

 中的 

package.json

 脚本或按照

此处的步骤操作。