Seamless deploy React + Nginx + Docker in Amazon ECS

When I’m redeploying container with React + Nginx in Amazon ECS, some period of time(about 5-10 seconds) browser can’t load my static js chunk(changed before redeploy) even after reloading a page.

enter image description here

After that I wrapped my async imports with:


// in routes file
const DashboardPage = lazy(() =>
  componentLoader(
    () =>
      import(
        /* webpackChunkName: "dashboard_page" */ "pages/Dashboard/DashboardPage"
      ),
    attemptsLeft,
)

// ... some code

export const componentLoader = (
  lazyComponent: any,
  attemptsLeft: number,
): Promise<any> => {
  return new Promise((resolve, reject) => {
    lazyComponent()
      .then(resolve)
      .catch((error: any) => {
        setTimeout(() => {
          if (attemptsLeft === 0) {
            reject(error);
            return;
          }
          componentLoader(lazyComponent, attemptsLeft - 1).then(
            resolve,
            reject,
          );
        }, 1500);
      });
  });
};

So, with this wrapper I can do chunk requests without reload page and wait until then chunk will become available to download. On the screen below you can see that on the fourth try browser successfully uploaded the chunk.

enter image description here

The question is why this chunk is not allowed to download the first time? I expected that Amazon have to switch instances with my docker containers at once.

Nginx config:

user  nginx;
worker_processes  1;
error_log  /dev/stdout info;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=some_zone:10m max_size=100m
                   inactive=10m use_temp_path=off;
  proxy_cache_valid 200 3m;

  server {
    listen       9080;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    location /actuator/health {
      default_type application/json;
      return 200 '{"status":"UP"}';
    }
  }
}

Source: Docker Questions

LEAVE A COMMENT