Merge branch 'feat/deployment' into 'main'

Feat/deployment

See merge request !91

.env.development

+VITE_APP_API_URL=http://localhost:8080
\ No newline at end of file

.env.production

+VITE_APP_API_URL=http://backend:8080
\ No newline at end of file

.gitlab-ci.yml

 image: node:alpine # Much smaller than other variants, faster and more resource effective
 
+variables:
+  DOCKER_TLS_CERTDIR: ""
+
 cache:
   key: "${CI_COMMIT_REF_SLUG}" # Branch-specific cache keys to have separate caches across branches.
   paths:
@@ -11,24 +14,16 @@ stages:
   - build
   - test
   - lint
+  - docker_build_and_push
+  - deploy_docker
 
 install_dependencies:
   stage: install
   script:
     - npm ci
-  cache:
-    key: ${CI_COMMIT_REF_SLUG}
-    paths:
-        - node_modules/
-    policy: push
 
 build_project:
   stage: build
-  cache:
-    key: "${CI_COMMIT_REF_SLUG}"
-    paths:
-      - node_modules/
-    policy: pull
   script:
     - npm ci
     - npm run build
@@ -40,7 +35,7 @@ vitest_unit-tests:
   cache:
     key: ${CI_COMMIT_REF_SLUG}
     paths:
-        - node_modules/
+      - node_modules/
     policy: pull
   script:
     - npm ci
@@ -53,18 +48,37 @@ eslint_run-lint:
   cache:
     key: ${CI_COMMIT_REF_SLUG}
     paths:
-        - node_modules/
+      - node_modules/
     policy: pull
   script:
     - npm ci
     - npm run lint
   dependencies:
     - install_dependencies
-  allow_failure: true  
-
-
-
-    
+  allow_failure: true
 
+docker_build_and_push:
+  stage: docker_build_and_push
+  image: docker:latest
+  services:
+    - docker:dind
+  tags:
+    - dind
+  script:
+    - docker login -u $DOCKER_USER -p $DOCKER_PAT registry.gitlab.com
+    - docker build -t registry.gitlab.com/$DOCKER_USER/sparesti-registry:frontend .
+    - docker push registry.gitlab.com/$DOCKER_USER/sparesti-registry:frontend
+  when: manual
 
-    
+deploy_docker:
+  stage: deploy_docker
+  image: ubuntu:latest
+  dependencies:
+    - docker_build_and_push
+  before_script:
+    - apt-get -yq update
+    - apt-get -yqq install ssh
+    - apt-get install sshpass
+  script:
+    - sshpass -p sParest1en ssh -v -o StrictHostKeyChecking=no root@128.199.53.153 "docker rm -f frontend || true; docker pull registry.gitlab.com/$DOCKER_USER/sparesti-registry:frontend && docker run -d -p 81:80 --name frontend registry.gitlab.com/$DOCKER_USER/sparesti-registry:frontend"
+  when: manual
\ No newline at end of file

Dockerfile

+# Step 1: Build your Vue application
+FROM node:16.10.0-alpine3.13 as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Step 2: Setup the server with Nginx
+FROM nginx:stable-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY web/nginx.conf /etc/nginx/nginx.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file

src/App.vue

 <script setup lang="ts">
 import { RouterView } from 'vue-router'
 import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
+let apiUrl = import.meta.env.VITE_APP_API_URL;
+console.log("apiUrl: ", apiUrl);
 </script>
 
 <template>

src/api/core/OpenAPI.ts

@@ -20,7 +20,7 @@ export type OpenAPIConfig = {
 };
 
 export const OpenAPI: OpenAPIConfig = {
-    BASE: 'http://localhost:8080',
+    BASE: import.meta.env.VITE_APP_API_URL,
     VERSION: '3.0',
     WITH_CREDENTIALS: false,
     CREDENTIALS: 'include',

vite.config.ts

@@ -6,6 +6,9 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    port: 80,
+  },
   plugins: [
     vue(),
     vueJsx(),

web/nginx-selfsigned.crt

+-----BEGIN CERTIFICATE-----
+MIIDYzCCAkugAwIBAgIUXKYKAuQxFdfKFhGqgi6mW6JWbxcwDQYJKoZIhvcNAQEL
+BQAwQTELMAkGA1UEBhMCTk8xDzANBgNVBAgMBk5vcndheTEhMB8GA1UECgwYSW50
+ZXJuZXQgV2lkZ2l0cyBQdHkgTHRkMB4XDTI0MDUwMjIwMzA0OFoXDTI1MDUwMjIw
+MzA0OFowQTELMAkGA1UEBhMCTk8xDzANBgNVBAgMBk5vcndheTEhMB8GA1UECgwY
+SW50ZXJuZXQgV2lkZ2l0cyBQdHkgTHRkMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8A
+MIIBCgKCAQEA4IV2JIAiI9konh3CuNYgmnv9KDhYcjj+L/6YrFauiZjZs/2haW8c
+pPLJP7NK/gzsuTqvewmh/3m8oIPxnwIJAPNq7Rf/UMeHHNRKt8KE/v+1hz6dAguy
+Ua6XC8UjVLqjg8vsftecvYmn/Ypj35aN2omFNr7NpFCfpI/zhk8SKS24GleG4DQ7
+89GxjkJtbIHfuoCrs+0YxRPWCvDGM9a79UYXW0evvufh2xN6jM9BLsBvgc+vm231
+usO2KLI1g/o34iAW6IseLu9qaPhLo2YfyC4fXCpsCRaZLumHKMoo0zFP/DejRIXu
+25sKJNSX3dyO2thbkKvaNJh29DO9WOtv9QIDAQABo1MwUTAdBgNVHQ4EFgQUKbhw
+GAXog/z7Hkp3KOmSWxr8jm4wHwYDVR0jBBgwFoAUKbhwGAXog/z7Hkp3KOmSWxr8
+jm4wDwYDVR0TAQH/BAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEAxWd0Sdju0DEc
+64W6TZq+4S7Rv/ZshcOPF4jWHgcLR2b9HP4cYPVMvuV5zNQi5wFp3A6oFR1JX6pd
+gQ/J+t1EuFyfrn5ojoOm5f1oNeiMPmpfsSRSzwRTabUs9LHeyQzoBXipmhYdqEoH
+SNv9aIQQ8e0in4uHFnvl1e8vrMb8Kl8ShcYmuYJ2FTIWERv482mrRB3pVMf+OFg0
+BtaQWgyU6CL1oysNH7X5t60uhjDc+D+gdSiaggzeP9tatMsJTeTam4GQbRkXuqLP
+FcjSHq4amTzrXrxX+6hWsvT5i/qSUwlVkt608j5KKUrU8oHjjqMOu58tx1lQTqIs
+dxpgMfpu7A==
+-----END CERTIFICATE-----

web/nginx-selfsigned.key

+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDghXYkgCIj2Sie
+HcK41iCae/0oOFhyOP4v/pisVq6JmNmz/aFpbxyk8sk/s0r+DOy5Oq97CaH/ebyg
+g/GfAgkA82rtF/9Qx4cc1Eq3woT+/7WHPp0CC7JRrpcLxSNUuqODy+x+15y9iaf9
+imPflo3aiYU2vs2kUJ+kj/OGTxIpLbgaV4bgNDvz0bGOQm1sgd+6gKuz7RjFE9YK
+8MYz1rv1RhdbR6++5+HbE3qMz0EuwG+Bz6+bbfW6w7YosjWD+jfiIBboix4u72po
++EujZh/ILh9cKmwJFpku6YcoyijTMU/8N6NEhe7bmwok1Jfd3I7a2FuQq9o0mHb0
+M71Y62/1AgMBAAECggEASqCh2dULQ/4g7Zl3yUdHNAIlbfJ4l5LRDnPiHFp9jjfT
+mOujdK+dhkg602UNdq8mGhVjEZLsmUXGCFaC//bFtl6yeldBIoEHrHH12emamkW1
+eVw7BNyNa3AMPbnLmhSlWB/2nlydeTShtXkD5GQfB3YxZLZ8FPNFdQXyDIEIyM2N
+m6yKx9LLBXf3bcppr4L/ELY+j6XsxYNcL7U6D772qSxJ06riAEMd4A+oYUeP/7Y9
+233soqxaioUUQAH/C6wedHSzgZEx+6+9wFG3M395kRB9PcTNI0w1+hGyqgwz28lJ
+CzronzBlAsSb33zJ0IgTXFGZM1qj4nsJT7RoM5AuSwKBgQD07PTVOsvBIojuDuwG
+lUxD2tvnrSqEXy8YLyJnsTF8jHRFjYJl7AFkrnIFeE31A1ffQTybY+4eewiCEUuC
+7gcnlRvkm6sPd1SUXJjDAGP9qKW2rlWolBhmoozvBztxQGhmkMoGazV/sp1ScUAF
+gKgLRlvV1FOeK/Zo9c19VMPrbwKBgQDqrFK5NcrhlfdRSc8W3Pu/NyC6iDPqw6lK
+rqTnqBrQ4VHJh+iJXAD7dZq8Yty/mbpHwdfnNJdEFHh+8eFFPjZ+x9i7a22Xn6nQ
+lrxkXJUS52MOslrp8ZVuT1NXuicwVlMrnNiQSmvX6+oaEJD3WGrfyx88FJ2solyv
+WhkKWdt42wKBgBYKxTXzZqbo/r295gvpn8VzitrcwLjNACYDB+uhDL0SvtwLkjKt
+/Koc8PIBE7L7LAtRiazKX4GqvOdHuy37UfWD+9ClGc34hUoc0zqpbFZFuTQpmFfl
+jBSgiGJymizlCQBCA4x0VYo6fuIOgx57p6PsHxOtWiEf/7sOdAHVgRRNAoGBAI/s
+CXvfOsLpF1m6O5CZDKgz5hWgLL8BKpVL0ITmezO5zFAd0wZS76NIeBKrSxkS7cTO
+ZFw+y7qMF247Z93wjrloVUp0Uy0XVa1AlN+0TBTg5caAqfMqH2wcqE94MkqZ1r47
+njG4ArXU0KkVmeKoTjtcNpbBSgYzOUatqgfIHirbAoGAC2tUjjLJfM1S7TDU/XmO
+SnEaGegsI48DpyNM/5W8QPWsVkGPq8pV4K4/Ogz2GfbEuHBaV9hjtf9LpHjQN9dp
+NuTWZd31mQL/fbauXnLO5qmCCGgxnZ8HQ6VX7ns2IavpzwCPxa7lWhQsay/VpYMQ
+UstmKmv675SAHtiyFp/AUJ8=
+-----END PRIVATE KEY-----

web/nginx.conf

+worker_processes  auto;
+
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+
+    server {
+        listen 80;
+        server_name localhost;
+
+        location / {
+            root /usr/share/nginx/html;
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}
\ No newline at end of file