Webpack 和 NGINX 加载 bundle.js 的问题答案

【问题标题】：Problem with Webpack & NGINX loading bundle.jsWebpack 和 NGINX 加载 bundle.js 的问题
【发布时间】：2018-11-09 03:58:22
【问题描述】：

所以我设置了带有反向代理 (NGINX) 的 Digital Ocean droplet。当我最终路由到我的域时，我从 index.html（图标、标题、导入/api 警告）中获取元数据，但在浏览器中我收到了消息

--> "源代码为 "https://myDomain/js/bundle.js" 的脚本加载失败。"

在我的 index.html 的末尾。

这个项目在本地生产中运行良好（npm start/run dev），所以我确定这是我的 Ubuntu 环境或 NGINX 的问题。

** 有关更多信息和节省时间：我使用本教程设置我的液滴： https://code.lengstorf.com/deploy-nodejs-ssl-digitalocean/

** Reactjs 项目适合那些好奇的人。

webpack.config.js：入口和输出

entry: "./src/index.tsx",
output: {
    filename: "js/bundle.js",
    path: __dirname + "/dist"

},

/etc/nginx/sites-enabled/服务器默认

# HTTP — redirect all traffic to HTTPS
server {
    listen 80;
    listen [::]:80 default_server ipv6only=on;
    return 301 https://$host$request_uri;
}

# HTTPS — proxy all requests to the Node app
server {
    # Enable HTTP/2
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name myDOMAIN;

    # Use the Let’s Encrypt certificates
    ssl_certificate /etc/letsencrypt/live/myDOMAIN/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/myDOMAIN/privkey.pem;

    # Include the SSL configuration from cipherli.st
    include snippets/ssl-params.conf;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://localhost:5000/;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }


}

这是我的项目布局

WebAppDir
  ->dist
    ->images
    index.html
    ->js
        bundle.js
  ->src
    ->components
  node_modules
  webpack.config.js
  server.js
  package.json

【问题讨论】：

标签： reactjs nginx webpack digital-ocean

【解决方案1】：

它对我有用：

webpack.config.js

  output: {
      path: path.resolve('dist'),
      publicPath: "http://localhost/",
      filename: 'bundle.js'
  },

devServer: {
      ... ,
      publicPath: "http://localhost/",
  }

/etc/nginx/sites-available/default

   location / {
    proxy_pass http://localhost:8081;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

    root /some_path/my-dir-app;
    autoindex on;
    }

【讨论】：