[DOP-21434] create docker image and docker ci (#43)

Co-authored-by: Zabilsya <[email protected]>

.dockerignore

@@ -0,0 +1,12 @@
+.git/
+.github/
+.dockerignore
+.gitignore
+./docker/Dockerfile
+*docker-compose*
+
+.husky/
+node_modules/
+public/env-config.js
+env-config.js
+dist/

.github/workflows/linters.yml

@@ -0,0 +1,44 @@
+name: Code analysis
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches-ignore:
+      - master
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  linters:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install modules
+        run: yarn install --frozen-lockfile
+
+      - name: Cache modules
+        uses: actions/cache@v4
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+            ${{ runner.os }}-yarn-
+
+      - name: Run Type check
+        run: yarn type-check
+
+      - name: Run ESLint
+        run: yarn lint
+
+      - name: Run Prettier
+        run: yarn prettier --check
+
+      - name: Build project
+        run: yarn build

.github/workflows/release.yml

@@ -0,0 +1,71 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - develop
+    tags:
+      - '[0-9]+.[0-9]+.[0-9]+'
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  release:
+    name: Build & push frontend image to Dockerhub
+    runs-on: ubuntu-latest
+    if: github.repository == 'MobileTeleSystems/syncmaster-ui' # prevent running on forks
+
+    steps:
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set tag
+        id: set_tag
+        run: |
+          if [[ "${{ github.ref_type }}" == "branch" && "${{ github.ref_name }}" == "develop" ]]; then
+            echo "TAG=mtsrus/syncmaster-ui:develop" >> $GITHUB_ENV
+          elif [[ "${{ github.ref_type }}" == "tag" ]]; then
+            echo "TAG=mtsrus/syncmaster-ui:latest,mtsrus/syncmaster-ui:${{ github.ref_name }}" >> $GITHUB_ENV
+          fi
+
+      - name: Build UI image
+        uses: docker/build-push-action@v6
+        with:
+          tags: ${{ env.TAG }}
+          context: .
+          file: ./docker/Dockerfile
+          target: prod
+          pull: true
+          push: true
+          cache-to: type=inline
+          cache-from: mtsrus/syncmaster-ui:develop
+          platforms: |
+            linux/amd64
+            linux/arm64/v8
+          provenance: mode=max
+
+      - name: Update DockerHub Description
+        uses: peter-evans/dockerhub-description@v4
+        if: github.ref_type == 'tag'
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          # this requires token with read+write+delete permissions. read+write is not enough!
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+          repository: mtsrus/syncmaster-ui
+          short-description: ${{ github.event.repository.description }}
+          enable-url-completion: true

.gitignore

@@ -17,4 +17,7 @@ yarn-error.log
 
 
 /**/generated
-/**/build
+/**/build
+
+public/env-config.js
+env-config.js

docker/Dockerfile

@@ -0,0 +1,28 @@
+FROM node:23.1.0 AS build
+
+WORKDIR /app
+
+COPY .yarnrc.yml .
+COPY .yarn ./.yarn
+
+COPY package.json yarn.lock ./
+RUN yarn install --immutable
+
+COPY . .
+RUN yarn build
+
+
+FROM nginx:stable AS prod
+
+WORKDIR /usr/share/nginx/html
+
+COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist .
+
+COPY ./docker/entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+EXPOSE 3000
+
+ENTRYPOINT ["/entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]

docker/entrypoint.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+cat <<EOF > /usr/share/nginx/html/env-config.js
+window.env = {
+  API_URL: "${API_URL}",
+};
+EOF
+
+exec "$@"

docker/nginx.conf

@@ -0,0 +1,16 @@
+server {
+    listen 3000;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+
+}

src/app/config/router/instance.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter, Navigate } from 'react-router-dom';
 import { UserDetailPage, UserListPage } from '@pages/user';
 import { LoginPage } from '@pages/auth';
 import { AuthLayout, ErrorLayout, PrivateLayout } from '@app/layouts';
@@ -40,6 +40,10 @@ export const router = createBrowserRouter([
           </PrivateRoute>
         ),
         children: [
+          {
+            path: '/',
+            element: <Navigate to="/users" replace />,
+          },
           {
             path: '/users',
             element: <UserListPage />,

src/index.html

@@ -5,6 +5,7 @@
     <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>SyncMaster</title>
+    <script src="env-config.js"></script>
 </head>
 <body>
 <div id="root"></div>

src/shared/config/axios/instance.ts

@@ -3,7 +3,7 @@ import axios from 'axios';
 import { requestInterceptor, responseSuccessInterceptor } from './interceptors';
 
 export const axiosInstance = axios.create({
-  baseURL: process.env.API_URL,
+  baseURL: window.env?.API_URL || process.env.API_URL || 'http://localhost:8000/',
   headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json',

src/types/index.d.ts

@@ -1,4 +1,10 @@
 declare module '*.less' {
     const content: Record<string, string>;
     export default content;
+}
+
+interface Window {
+    env?: {
+      API_URL: string;
+    };
 }