shopify app dev 中的文件服务无法正常工作答案

【问题标题】：File serve in shopify app dev not workingshopify app dev 中的文件服务无法正常工作
【发布时间】：2023-02-08 05:58:40
【问题描述】：

我已经使用 node.js 应用程序模板创建了 shopify 应用程序

npm init @shopify/app@latest

文件夹结构在底部

然后运行npm run dev api端点没问题。

我想做的是提供静态文件。事实上，这是一个 express.js 服务器，我在 web 文件夹中创建了一个静态文件夹

app.use(serveStatic('static'));

但是我无法访问静态文件。我试过app.use(serveStatic("${process.cwd()}/static"))。以上内容适用于普通的 express.js 项目。但它不适用于 shopify cli 和 vite 配置。

vite配置是

const config = {
  test: {
    globals: true,
    exclude: ["./frontend/**", "./node_modules/**"],
  },
};

export default config;

【问题讨论】：

【解决方案1】：

我终于明白了。

我注意到：

如果您使用localhost:PORT/path/to/static.file 加载，它会起作用。您可以在您的web/index.js 中打印出 PORT。
当通过 ngrok 请求您的静态文件时，这个简单的中间件不会被触发，但它会被上面的数字 1 触发。
```
app.use((req, res, next) => {
  console.log("Backend hit!");
  next();
});
```
这意味着后端永远不会收到静态文件请求。我的理解是 vite 接收所有请求，然后使用配置将其中一些请求代理到后端。

Shopify 提供的配置未代理静态文件请求，因此您需要修改代理配置。

vite.config
```
...
export default defineConfig({
  ...
  server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\?.*)?$": proxyOptions,
      "^/api(/|(\?.*)?$)": proxyOptions,

      // The next line is what I added
      "^/static/.*$": proxyOptions,
    },
  },
});
```
web/index.js
```
app.use("/static", express.static(`${process.cwd()}/public`));
```
我正在将我的静态文件挂载到“/static”，但您可以随意修改代理行以满足您的需要。

【讨论】：