gzip compression on AWS

Question

How can we enable gzip compression on AWS using a docker file for react js application? We want to enable GZIP compression for artifacts flowing from Server to a browser. In IIS we have used such a setting. But we are not aware of how to set this in Docker file in react js.

Answer 1

You need to use some sort of server to enable gzip, like in your earlier case you used IIS, mostly I use Nginx to enable gzip, you can do from Nginx config, but for that, you have to use Nginx base Image to server Reactjs app.

Here is DockerFile for nginx

FROM node:10.15-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN yarn
COPY ./ .

RUN yarn run build_prod

FROM nginx:1.17.6-alpine

RUN apk add --update --no-cache \
bash \
curl

#config nginx and supervisord
COPY ConfigFiles/nginx.conf /etc/nginx/nginx.conf
COPY ConfigFiles/site.conf /etc/nginx/sites-available/default.conf

RUN mkdir -p mkdir -p /etc/nginx/sites-enabled && \
mkdir -p /run/nginx && \
mkdir -p /var/www/frontend && \
ln -s /etc/nginx/sites-available/default.conf /etc/nginx/sites-enabled/default.conf 

WORKDIR /var/www

#COPY dist ./frontend
COPY --from=build-stage /app/dist ./frontend

nginx.conf

user nginx;
worker_processes 1;

error_log /var/log/nginx/error.log warn;
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;
    #tcp_nopush on;
    keepalive_timeout 65;
    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types application/javascript application/rss+xml application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/opentype font/otf font/ttf image/svg+xml image/x-icon text/css text/javascript text/plain text/xml image/gif;
    include /etc/nginx/sites-enabled/*.conf;
    client_max_body_size 10M;
}

site.conf

server {
    listen 80;
    #server_name d;

    root /var/www/frontend;
    index index.html;

    location / {
            try_files $uri /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root /var/www/frontend;
    }

    location ~ /\.ht {
        deny all;
    }
}