feat: web app build

Author: Throyer

.docker/.env.example

@@ -1,9 +1,14 @@
 # docker
 COMPOSE_PROJECT_NAME=spring-boot-example
 TIMEZONE=America/Sao_Paulo
+
+# api
 API_PORT=8080
 API_DEBUG_PORT=8000
+
+# web
 APP_PORT=3000
+APP_API_BASE_URL=http://localhost:8080/api
 
 # database
 DB_HOST=database

.docker/docker-compose.dev.yml

@@ -103,6 +103,9 @@ services:
     networks:
       - spring-boot-example-network
     tty: true
+    environment:
+      APP_PORT: ${APP_PORT}
+      VITE_API_BASE_URL: ${APP_API_BASE_URL}
     entrypoint: [
       "dockerize",
       "-wait",

.docker/docker-compose.prod.yml

@@ -73,18 +73,20 @@ services:
       "api.jar"
     ]
 
-  # web:
-  #   image: throyer/springboot/example-web:latest
-  #   build: 
-  #     context: ../web
-  #     dockerfile: ../web/docker/Dockerfile.prod
-  #   restart: unless-stopped
-  #   container_name: ${COMPOSE_PROJECT_NAME}-web
-  #   ports:
-  #     - "8082:80"
-  #   networks:
-  #     - spring-boot-example-network
-  #   tty: true
+  web:
+    image: throyer/springboot/example-web:latest
+    build: 
+      context: ../web
+      dockerfile: ../web/docker/Dockerfile.prod
+      args:
+        - APP_API_BASE_URL=${APP_API_BASE_URL}
+    restart: unless-stopped
+    container_name: ${COMPOSE_PROJECT_NAME}-web
+    ports:
+      - "8082:80"
+    networks:
+      - spring-boot-example-network
+    tty: true
 
 networks:
   spring-boot-example-network:

web/docker/Dockerfile.prod

@@ -0,0 +1,19 @@
+FROM node:16.14.2 as BUILDER
+
+WORKDIR /app
+
+COPY . .
+
+ARG APP_API_BASE_URL
+
+ENV VITE_API_BASE_URL $APP_API_BASE_URL
+
+RUN npm set cache ./.npm
+RUN --mount=type=cache,target=/usr/src/app/.npm npm install 
+
+RUN npm run build
+
+FROM nginx:1.23.1-alpine
+
+COPY --from=BUILDER /app/dist /var/www/web-app
+COPY ./docker/nginx.conf /etc/nginx/nginx.conf

web/docker/nginx.conf

@@ -0,0 +1,24 @@
+worker_processes 1;
+
+events {
+  worker_connections 1024;
+}
+
+http {
+  include mime.types;
+  sendfile on;
+
+  server {
+    listen 80;
+    listen [::]:80;
+
+    resolver 127.0.0.11;
+    autoindex off;
+
+    server_name _;
+    server_tokens off;
+
+    root /var/www/web-app;
+    gzip_static on;
+  }
+}

web/package-lock.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@types/luxon": "^3.0.1",
+    "@types/node": "^16.0.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",

web/package.json

@@ -3,7 +3,7 @@ import axios from "axios";
 import { useSession } from '../providers/session';
 
 const ENV = {
-  BASE_URL: "http://localhost:8080/api"
+  BASE_URL: import.meta.env.VITE_API_BASE_URL
 }
 
 export const api = axios.create({

web/src/http/api.ts

@@ -12,7 +12,6 @@ import { useAuthentication } from "../../hooks/use-authentication/use-authentica
 import { useUser } from "../../providers/user";
 
 export const Login = () => {
-
   const { login } = useAuthentication();
   const { user } = useUser();
 

web/src/pages/login/index.tsx

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}