Merge branch 'deployment/cicd' into 'master'

Add full deployment Pipeline to master

See merge request scrum-taskboard/frontend!4

.gitlab-ci.yml

@@ -0,0 +1,25 @@
+image: docker:dind
+
+services:
+  - name: docker:dind
+    entrypoint: ["env", "-u", "DOCKER_HOST"]
+    command: ["dockerd-entrypoint.sh"]
+variables:
+  DOCKER_HOST: tcp://docker:2375/
+  DOCKER_DRIVER: overlay2
+  DOCKER_TLS_CERTDIR: ""
+
+before_script:
+  - echo $CI_REGISTRY_PASSWORD | docker login -u $CI_REGISTRY_USER --password-stdin $CI_REGISTRY
+
+
+build:
+  stage: build
+  script:
+    - docker build . -t frontend:$CI_COMMIT_SHORT_SHA
+    - docker tag frontend:$CI_COMMIT_SHORT_SHA $CI_REGISTRY/taskboard/frontend:$CI_COMMIT_SHORT_SHA
+    - docker push $CI_REGISTRY/taskboard/frontend:$CI_COMMIT_SHORT_SHA
+    - docker tag frontend:$CI_COMMIT_SHORT_SHA $CI_REGISTRY/taskboard/frontend:latest
+    - docker push $CI_REGISTRY/taskboard/frontend:latest
+  tags:
+    - frontend

Dockerfile

@@ -14,5 +14,7 @@ RUN npm run build
 
 # Stage 2: Package up with the webserver
 FROM nginx:alpine AS final
+ENV API_URL "http://localhost:5001"
 COPY --from=build /build/dist/frontend /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/nginx.conf
 CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/assets/env.js && exec nginx -g 'daemon off;'"]

README.md

@@ -31,15 +31,14 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
 > Prerequisite: Docker and/or Docker Compose have to be installed on your system </br>
 > The Docker installation instructions for most operation systems can be found here: [https://docs.docker.com/get-docker/](https://docs.docker.com/get-docker/) </br>
 > The Docker Compose installation instructions for most operation systems can be found here: [https://docs.docker.com/compose/install/](https://docs.docker.com/compose/install/)
+> To use the prebuild images log into the private registry: docker login -u testuser -p LpH2v1mShPpC8Xeimkd2AISA03zaC+vq scrumdev.azurecr.io
 
 ### Quick Deployment with Docker Compose
 1. Clone the git repo
 2. Open the cloned repo's folder in a shell of your choice (as long as it supports Docker)
-3. Tell Docker Compose to build - if it hasn't already been built - and run the app with `docker-compose up`
+3. Tell Docker Compose to run the app alongside a database with `docker-compose up`
 
 Other useful commands:
-* Just build: `docker-compose build`
-* Build before running: `docker-compose up --build`
 * Run attached (in the background): `docker-compose up -d`
 * Stop: `docker-compose down`
 * Restart: `docker-compose restart`
@@ -47,9 +46,9 @@ Other useful commands:
 ### Build the Container yourself (and run it)
 1. Clone the git repo
 2. Open the cloned repo's folder in a shell of your choice (as long as it supports Docker)
-3. Tell Docker to build the app under the name "frontend" with `docker build -t taskboard_frontend .`
-4. Tell Docker to run the app on port 8080 with `docker run -p 8080:80 taskboard_frontend`
+3. Tell Docker to build the app under the name "taskboard/frontend" with `docker build -t taskboard/frontend .`
+4. Tell Docker to run the app on port 8080 with `docker run -p 8080:80 taskboard/frontend`
 
 Other useful commands:
-* Run detached: `docker run -d -p 8080:80 taskboard_frontend`
-* Run under specified name: `docker run -p 8080:80 --name frontend taskboard_frontend`
+* Run detached: `docker run -d -p 8080:80 taskboard/frontend`
+* Run under specified name: `docker run -p 8080:80 --name frontend taskboard/frontend`

docker-compose.yml

@@ -2,10 +2,11 @@ version: "3"
 
 services:
   app:
-    build:
-      context: .
+    image: scrumdev.azurecr.io/taskboard/frontend:latest
     restart: unless-stopped
     networks:
       - default
     ports:
-      - "8080:80"
+      - "8080:80"
+    environment:
+      API_URL: http://localhost:5001

nginx.conf

@@ -0,0 +1,15 @@
+worker_processes 1;
+
+events { worker_connections 1024; }
+
+http {
+    server {
+        listen 80;
+        root  /usr/share/nginx/html;
+        include /etc/nginx/mime.types;
+
+        location / {
+            try_files $uri /index.html;
+        }
+    }
+}