使用 nginx 部署 reactjs 会导致未应用 css 和图像。在本地工作

Question

希望有人能指出我正确的方向。

毫无疑问，这对我来说是一种误解，但是 webpack 是否需要作为npm build过程的一部分？

我无法将我的 React 应用程序部署到生产环境中。

我可以毫无问题地在本地运行该应用程序。然后我跑

npm run build

将捆绑的代码推送到我的服务器并配置nginx。捆绑的代码被复制到 nginx docker 容器中。

当我运行应用程序（通过 docker）时，我可以在浏览器中看到纯文本，静态文件加载，但它们无法正确呈现。

以下是图像导入的示例：

<img class="waiting_icon" src="./static/media/waiting.da817564.svg" alt="logo">

没有任何显示，与 css 样式相同。

``

??? LICENSE
??? README.md
??? build
?   ??? asset-manifest.json
?   ??? favicon.ico
?   ??? index.html
?   ??? manifest.json
?   ??? service-worker.js
?   ??? static
?       ??? css
?       ?   ??? main.e072dfe6.css
?       ?   ??? main.e072dfe6.css.map
?       ??? js
?       ?   ??? main.1b1a2e16.js
?       ?   ??? main.1b1a2e16.js.map
?       ??? media
?           ??? logo.43568448.svg
?           ??? waiting.da817564.svg
??? dockerfile
??? now.json
??? package-lock.json
??? package.json
??? public
?   ??? favicon.ico
?   ??? index.html
?   ??? manifest.json
??? renovate.json
??? src
?   ??? assets
?   ?   ??? images
?   ?       ??? logo.svg
?   ?       ??? waiting.svg
?   ??? containers
?   ?   ??? about
?   ?   ?   ??? index.js
?   ?   ??? app
?   ?   ?   ??? index.js
?   ?   ??? home
?   ?       ??? index.js
?   ??? dockerfile
?   ??? index.css
?   ??? index.js
?   ??? modules
?   ?   ??? counter.js
?   ?   ??? index.js
?   ??? store.js
??? webpack.config.js
??? yarn.lock

``

Answer 1

就我而言，它与 mime 类型有关。在您的nginx.conf文件中，您可以尝试在该http部分添加以下行

... http { ... include /etc/nginx/mime.types; server { ... } }