Frontend Dockerfile with nginx

Author: dnguyenngoc

docker-compose.dev.yaml

@@ -63,6 +63,23 @@ services:
     networks:
       - mlnet
 
+  ml-client:
+    build:
+      context: ./ml-client
+      dockerfile: ./Dockerfile
+    environment:
+      DOMAIN: localhost
+      BE_HOST: ml-api
+      BE_PORT: 8081
+    container_name: ml-client
+    restart: unless-stopped
+    ports:
+      - 80:80
+    command: sh -c "./custom_nginx.sh && nginx -g 'daemon off;'"
+    networks:
+      - mlnet
+  
+
 networks:
   mlnet:
 

ml-client/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.git
+.gitignore

ml-client/Dockerfile

@@ -1 +1,30 @@
-# update soon
+FROM node:14.17-alpine3.13 as builder
+
+WORKDIR /app
+
+ENV PATH /app/node_modules/.bin:$PATH
+
+COPY ./package.json /app/package.json
+COPY ./package-lock.json /app/package-lock.json
+RUN npm i -g
+COPY . .
+RUN yarn build:production
+
+FROM nginx 
+
+WORKDIR /usr/share/nginx/html
+
+RUN rm -v /etc/nginx/nginx.conf
+RUN rm -v /etc/nginx/conf.d/default.conf
+COPY ./nginx.conf /etc/nginx/
+
+RUN rm -rf ./*
+
+COPY ./m_nginx.conf .
+COPY ./local_nginx.conf .
+COPY ./custom_nginx.sh .
+RUN chmod +x custom_nginx.sh
+
+COPY --from=builder /app/build .
+
+EXPOSE 80 443

ml-client/custom_nginx.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+if [ "${DOMAIN}" = "localhost" ]; then
+    echo 'Deploy server on localhost..........'
+    envsubst '$${DOMAIN} $${BE_HOST} $${BE_PORT}' < local_nginx.conf > /etc/nginx/conf.d/app.conf
+else
+    echo 'Deploy server on staging or prodution.........'
+    envsubst '$${DOMAIN} $${BE_HOST} $${BE_PORT}' < m_nginx.conf > /etc/nginx/conf.d/app.conf
+fi
+exec "$@"

ml-client/local_nginx.conf

@@ -0,0 +1,16 @@
+# Đây là file cấu hình cho nigix localhost
+server {
+   listen 80;
+   charset utf-8;
+   server_name ${DOMAIN};
+   location /api/ {
+       proxy_pass http://${BE_HOST}:${BE_PORT}/api/;
+       proxy_set_header Host $host;
+       proxy_set_header X-Real-IP $remote_addr;
+       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+   }
+   location / {
+       root /usr/share/nginx/html;
+	   try_files $uri $uri.html $uri/ /index.html = 404;
+   }
+}

ml-client/m_nginx.conf

@@ -0,0 +1,25 @@
+# load frontend và backend ra port 80
+server {
+   listen 80;
+   charset utf-8;
+   server_name ${DOMAIN};
+}
+server {
+   listen 443 ssl;
+   server_name ${DOMAIN};
+   charset utf-8;
+   ssl_certificate /etc/letsencrypt/live/${DOMAIN}/fullchain.pem;
+   ssl_certificate_key /etc/letsencrypt/live/${DOMAIN}/privkey.pem;
+   
+   location /api/ {
+       proxy_pass http://${BE_HOST}:${BE_PORT}/api/;
+       proxy_set_header Host $host;
+       proxy_set_header X-Real-IP $remote_addr;
+       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+       client_max_body_size 16M;
+   }
+   location / {
+       root /usr/share/nginx/html;
+	    try_files $uri $uri.html $uri/ /index.html =404;
+   }
+}

ml-client/nginx.conf

@@ -0,0 +1,50 @@
+#file này config cho phiên chạy nginx
+
+# ông chủ
+user nginx;
+
+# số lượng nhân viên
+worker_processes  auto;
+
+# lấy lỗi
+error_log  /var/log/nginx/error.log warn;
+
+# file chứa id cho nginx
+pid        /var/run/nginx.pid;
+
+# maximum connect với worker processes
+events {
+   worker_connections  1024;
+}
+
+# nigix cấu hình handle http
+http {
+   # Include the file defining the list of file types that are supported by NGINX
+   include       /etc/nginx/mime.types;
+   # Define the default file type that is returned to the user
+   default_type  text/html;
+
+   # Define the format of log messages.
+   log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                     '$status $body_bytes_sent "$http_referer" '
+                     '"$http_user_agent" "$http_x_forwarded_for"';
+
+   # Define the location of the log of access attempts to NGINX
+   access_log  /var/log/nginx/access.log  main;
+
+   # Define the parameters to optimize the delivery of static content
+   sendfile       on;
+   tcp_nopush     on;
+   tcp_nodelay    on;
+
+   client_max_body_size 20M;
+
+   # Define the timeout value for keep-alive connections with the client
+   keepalive_timeout  65;
+
+   # Define the usage of the gzip compression algorithm to reduce the amount of data to transmit
+   # gzip  on;
+
+   # Include additional parameters for virtual host(s)/server(s)
+   include /etc/nginx/conf.d/*.conf;
+}