CODEWITHSUNDEEP
nginxwebpackdocker-compose
Norbert
Norbert

Reputation: 2771

Adding two separate Webpack dev server apps into subfolders using Docker and NGINX

I have app1 and app2, both running with webpack-dev-server on separate ports. The client wants the apps under the same domain in different subfolders.

I set up a docker-compose.yml file:

version: '3'

services:
  proxy:
    image: nginx:alpine
    ports:
      - '80:80'
    volumes:
      - './nginx.conf:/etc/nginx/conf.d/nginx.conf:ro'

Here's the nginx.conf file

upstream app1 {
  server host.docker.internal:5000;
}

upstream app2 {
  server host.docker.internal:5001;
}

server {
    listen              80;
    server_name         myapp;
    proxy_http_version  1.1;
    proxy_redirect      off;
    proxy_set_header    Upgrade $http_upgrade;
    proxy_set_header    Connection "Upgrade";
    proxy_set_header    Host localhost;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Host $server_name;

   location /app/app1 {
      proxy_pass http://app1;
    }

    location /app/app2 {
      proxy_pass http://app2;
    }
}

I tried different webpack settings, but nothing seems to work. Here's the webpack.config.js for app1:

  output: {
    filename: 'main.js',
  },
  devServer: {
    historyApiFallback: true,
    host: '0.0.0.0',
    port: 5000,
  },

When I visit http://myapp/app/app1, the index.html loads fine, but I get a 404 on the main.js script. The file is accessible at http://myapp/app/app1/main.js, but inside index.html, the script points to main.js, instead of app/app1/main.js.

<script type="text/javascript" src="main.js"></script></body>

I tried changing output.publicPath in webpack, but then the script is no longer available. Is there a way to change the path inside the script tag without messing everything else up? Or how would I go about making this work when the app is running inside a subfolder?

Upvotes: 1

Views: 417

Answers (1)

Norbert
Norbert

Reputation: 2771

Found the solution, no thanks to the webpack docs. historyApiFallback.index needs to point to the same location as publicPath. Also, for hot reload to work and avoid console errors, you'll need to add disableHostCheck: true. Here's my final webpack config for one of the apps:

output: {
  filename: 'main.js',
  publicPath: '/app/app1',
},
devServer: {
  disableHostCheck: true,
  historyApiFallback: {
    index: '/app/app1',
  },
  port: 5000,
  publicPath: '/app/app1',
},

Upvotes: 1

Related Questions