Style fixes and CI (#21)

Author: ilya101master

.dockerignore

@@ -0,0 +1,15 @@
+VUE_APP_CDN =https://cdn.test.profcomff.com
+
+VUE_APP_MAIN =https://app.test.profcomff.com
+
+VUE_APP_API_AGGREGATOR =https://aggregator.api.test.profcomff.com
+
+VUE_APP_API_PRINTER =https://printer.api.test.profcomff.com
+
+VUE_APP_API_REPORT =https://report.api.test.profcomff.com
+
+VUE_APP_API_TIMETABLE =https://timetable.api.test.profcomff.com
+
+VUE_APP_API_NAVBAR =https://navbar.api.test.profcomff.com
+
+VUE_APP_API_MARKETING =https://marketing.api.test.profcomff.com

.env.development

@@ -0,0 +1,15 @@
+VUE_APP_CDN =https://cdn.profcomff.com
+
+VUE_APP_MAIN =https://app.profcomff.com
+
+VUE_APP_API_AGGREGATOR =https://aggregator.api.profcomff.com
+
+VUE_APP_API_PRINTER =https://printer.api.profcomff.com
+
+VUE_APP_API_REPORT =https://report.api.profcomff.com
+
+VUE_APP_API_TIMETABLE =https://timetable.api.profcomff.com
+
+VUE_APP_API_NAVBAR =https://navbar.api.profcomff.com
+
+VUE_APP_API_MARKETING =https://marketing.api.profcomff.com

.env.production

@@ -3,13 +3,15 @@ name: Build and publish a Docker image
 on:
   push:
     branches: ['main']
+    tags:
+      - 'v*'
 
 env:
   REGISTRY: ghcr.io
   IMAGE_NAME: ${{ github.repository }}
 
 jobs:
-  build-and-push-image:
+  build-and-push-image-testing:
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -31,18 +33,60 @@ jobs:
         uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=test,enable=true
 
       - name: Build and push Docker image
         uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
         with:
           context: .
           push: true
+          build-args: |
+            BUILD_MODE=development
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
-          
+
+  build-and-push-image-production:
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/v')
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=tag,enable=${{ startsWith(github.ref, 'refs/tags/v') }}
+            type=raw,value=latest,enable=${{ startsWith(github.ref, 'refs/tags/v') }}
+            type=raw,value=test,enable=true
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        with:
+          context: .
+          push: true
+          build-args: |
+            BUILD_MODE=production
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
   deploy-testing:
     name: Deploy Testing
-    needs: build-and-push-image
+    needs: build-and-push-image-testing
     runs-on: [self-hosted, Linux]
     environment:
       name: Testing
@@ -55,11 +99,36 @@ jobs:
     steps:
       - name: Run docker container
         run: |
-          docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:main
+          docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:test
           docker stop ${{ env.CONTAITER_NAME }} || true && docker rm ${{ env.CONTAITER_NAME }} || true
           docker run \
             --detach \
             --restart on-failure:3 \
             --network=web \
             --name ${{ env.CONTAITER_NAME }} \
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:main
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:test
+
+  deploy-production:
+    name: Deploy Production
+    needs: build-and-push-image-production
+    if: startsWith(github.ref, 'refs/tags/v')
+    runs-on: [self-hosted, Linux]
+    environment:
+      name: Production
+      url: https://timetable.ui.profcomff.com/
+    env:
+      CONTAITER_NAME: com_profcomff_ui_timetable
+    permissions:
+      packages: read
+
+    steps:
+      - name: Run docker container
+        run: |
+          docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
+          docker stop ${{ env.CONTAITER_NAME }} || true && docker rm ${{ env.CONTAITER_NAME }} || true
+          docker run \
+            --detach \
+            --restart always \
+            --network=web \
+            --name ${{ env.CONTAITER_NAME }} \
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest

.github/workflows/build_and_publish.yml

@@ -1,12 +1,13 @@
 FROM node:16 AS build
+ARG BUILD_MODE
 WORKDIR /app
 ADD ./package.json ./package-lock.json /app/
 RUN npm install
 ADD . /app
-RUN npm run build
+RUN npm run build -- --mode ${BUILD_MODE}
 
 FROM nginx:1.21
 ADD ./default.conf /etc/nginx/conf.d/default.conf
+ADD ./docker_entrypoint.sh /docker_entrypoint.sh
 COPY --from=build /app/dist /usr/share/nginx/html
-RUN export APPJS_NAME=$(cd /usr/share/nginx/html && ls js/app.*.js) \
-    && sed -i 's|APPJS_NAME|'${APPJS_NAME}'|g' /etc/nginx/conf.d/default.conf
+RUN chmod +x /docker_entrypoint.sh && /docker_entrypoint.sh

Dockerfile

@@ -0,0 +1,5 @@
+run:
+	npm run serve
+
+build-docker-local:
+	docker build --build-arg BUILD_MODE=development --progress=plain -t calendar_ui:local .

Makefile

@@ -9,9 +9,9 @@ server {
         try_files $uri /index.html;
     }
 
-    location /js/app.js {
-        return 302 https://$host/APPJS_NAME;
-    }
+    # location /js/app.js {
+    #     return 302 https://$host/APPJS_NAME;
+    # }
 
     error_page   500 502 503 504  /50x.html;
     location = /50x.html {

default.conf

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+export APPJS_NAME=$(cd /usr/share/nginx/html && ls js/app.*.js)
+if [ ! -z ${APPJS_NAME} ]
+then
+    echo 'app.js is ${APPJS_NAME}'
+    sed -i 's|APPJS_NAME|'${APPJS_NAME}'|g' /etc/nginx/conf.d/default.conf
+    sed -i 's|# ||g' /etc/nginx/conf.d/default.conf
+else
+    echo 'app.js is app.js, no changes'
+fi

docker_entrypoint.sh

@@ -1,8 +1,8 @@
 <template>
-  <div class="init-background">
+  <div class="init-background" :style="{backgroundImage: `url('${bgItem}')`}">
     <div class="container">
       <div class="init">
-        <img src="https://cdn.profcomff.com/app/logo/icon_512x512.png" />
+        <img :src= "logoItem" />
         <h1>Добро пожаловать!</h1>
         <p>
           Наше приложение позволит получить доступ к сервисам для студентов ФФ
@@ -47,8 +47,9 @@ export default {
     },
     loadGroups() {
       var url = new URL(
-        "https://timetable.api.test.profcomff.com/timetable/group/"
-      );
+       `${process.env.VUE_APP_API_TIMETABLE}/timetable/group/`
+      ),  params = {limit: 0, offset: 0}
+      Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
       fetch(url)
         .then((response) => response.json())
         .then((json) => {
@@ -75,6 +76,14 @@ export default {
     this.loadGroups();
     this.$store.commit("changePage", this.pageId);
   },
+  computed:{
+    logoItem(){
+      return `${process.env.VUE_APP_CDN}/app/logo/icon_512x512.png`;
+    },
+    bgItem(){
+        return `${process.env.VUE_APP_CDN}/app/background.png`;
+    }
+  },
   data() {
     return {
       pageId: 0,
@@ -89,9 +98,7 @@ export default {
 .init-background {
   width: 100%;
   height: 100vh;
-  padding-top: 66px;
-  padding-bottom: 66px;
-  background-image: url("https://cdn.profcomff.com/app/background.png");
+  /* background-image: url(v-bind(bgItem)); */
   background-repeat: repeat;
   background-size: cover;
   background-clip: padding-box;
@@ -100,9 +107,16 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   padding: 10%;
+  padding-top: 66px;
+  padding-bottom: 66px;
   gap: 1em;
   width: 100%;
+  height: 100%;
+}
+.container{
+  height: 100%;
 }
 h1 {
   font-weight: bold;
@@ -133,6 +147,6 @@ p {
 img {
   width: 40%;
   height: auto;
-  max-width: 300px;
+  max-width: 200px;
 }
 </style>

src/views/Init.vue

@@ -46,7 +46,7 @@ export default {
       var time_start = new Date(date);
       var time_end = new Date();
       time_end.setDate(time_start.getDate() + 1)
-      var url = new URL(`https://timetable.api.test.profcomff.com/timetable/group/${this.groupId}`),
+      var url = new URL(`${process.env.VUE_APP_API_TIMETABLE}/timetable/group/${this.groupId}`),
         params = {start: time_start.toISOString().slice(0,10), end: time_end.toISOString().slice(0,10)}
       Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
       fetch(url)