使用带有 webpack 的 npm run build 后如何使用 nginx 提供静态文件

Question

使用 npm run build 生成开发构建后，我收到消息“提示：构建的文件旨在通过 HTTP 服务器提供服务。通过 file:// 打开 index.html 将不起作用。”

使用 nginx 执行此操作的最佳方法是什么？ 目前为了测试它，我使用了一个名为 serve 的 npm 模块。

此外，如果我在 mydomain.com 上访问我的主页并搜索用户，则一切正常，将我重定向到 mydomain.com/users/brad 但如果我随后进行 url 搜索 formmydomain.com/users/布拉德我得到一个未找到的错误，任何帮助表示赞赏！

Answer 1

就我而言，当我必须使用 nginx 提供静态内容时，它通常看起来像：

   location /static {
       alias $myroot/staticfiles;
   }

另外，如果您还没有，请阅读 NginX 服务静态内容指南。

Answer 2

如果您熟悉 Docker 技术，我建议您使用 Docker Nginx 容器并将您的静态内容从 Webpack Buildflow 添加到您的容器（这可以通过构建服务器自动完成）。 查看 Nginx 的以下 Docker 镜像： https : //hub.docker.com/_/nginx/ 。

否则，您必须在托管主页的服务器上安装 nginx。 为此，请查看您的服务器操作系统，并访问网络以获取服务器的详细 nginx 设置。 没有任何配置，nginx 将从/usr/share/nginx/html类似 Linux 的服务器上的静态内容

如果您只有 FTP 访问您的服务器，您可以通过 FTP/SFTP 将您构建的文件传输到特定文件夹，例如 /myHomepage，然后您的静态内容是来自 yourdomain.de/myHompage 的服务器。