Проблема с загрузкой Webpack & NGINX bundle.js

Question

Итак, я настроил дроплет Digital Ocean с обратным прокси (NGINX). Когда я, наконец, направлюсь к своему домену, я получаю метаданные из своего 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 / default на сервере

# 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

Answer 1

у меня работает:

webpack.config.js

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

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

/ и т.д. / Nginx / сайты-доступные / по умолчанию

   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;
    }