Skip to content

Commit

Permalink
Finish Monolith-to-Microservices-at-Scale - Submission time!
Browse files Browse the repository at this point in the history
  • Loading branch information
kendyjm committed Jul 24, 2020
2 parents 346b24f + dfb6396 commit 9ecf97c
Show file tree
Hide file tree
Showing 173 changed files with 24,396 additions and 3 deletions.
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,7 @@ Thumbs.db
UserInterfaceState.xcuserstate
node_modules
venv/
.vscode
.vscode
*.tfstate*
*kubeconfig
*.tar.gz
29 changes: 29 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
language: minimal

services: docker

env:
- DOCKER_COMPOSE_VERSION=1.25.5

before_install:
- echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
- sudo rm /usr/local/bin/docker-compose
- curl -L https://github.com/docker/compose/releases/download/${DOCKER_COMPOSE_VERSION}/docker-compose-`uname -s`-`uname -m` > docker-compose
- chmod +x docker-compose
- sudo mv docker-compose /usr/local/bin
- docker -v
- docker-compose version --short
- curl --silent --location "https://github.com/weaveworks/eksctl/releases/download/latest_release/eksctl_$(uname -s)_amd64.tar.gz" | tar xz -C /tmp
- sudo mv /tmp/eksctl /usr/local/bin
- eksctl version
- curl -LO https://storage.googleapis.com/kubernetes-release/release/$(curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt)/bin/linux/amd64/kubectl
- chmod +x ./kubectl
- sudo mv ./kubectl /usr/local/bin/kubectl
- kubectl version --short --client

install:
- docker-compose -f project3-microservices-udagram/udacity-c3-deployment/docker/docker-compose-build.yaml build --parallel
- docker-compose -f project3-microservices-udagram/udacity-c3-deployment/docker/docker-compose-build.yaml push



8 changes: 6 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
[PROJECT 1 : Deploy Static Website on AWS](project1-deploy-static-website-on-aws)
_Keywords : aws, s3, cloudfront_

[PROJECT 2 : Udagram, Your Own Instagram on AWS](project2-image-filter)
[PROJECT 2 : Udagram V1 with image filtering, Your Own Instagram on AWS](project2-image-filter)
Develop a cloud-based application for uploading and filtering images!
_Keywords : aws, elasticbeanstalk, eb-cli, nodejs, express, jimp, morgan, http-status, valid-url_
_Keywords : AWS, elasticbeanstalk, eb-cli, nodejs, express, sentry, jimp, morgan, http-status_

[PROJECT 3 : Udagram V2 - microservices at scale! Your Own Instagram on AWS](project3-microservices-udagram)
Develop a cloud-based application for uploading and filtering images!
_Keywords : AWS, Elastic Kubernetes Service (Amazon EKS), containerization with Docker, CI/CD with Travis, container orchestration/CD with Kubernetes_
172 changes: 172 additions & 0 deletions project3-microservices-udagram/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
# Udagram Image Filtering Microservice

master: [![Build Status](https://travis-ci.com/kendyjm/udacity-cloud-developer-nd9990.svg?branch=master)](https://travis-ci.com/kendyjm/udacity-cloud-developer-nd9990) - development: [![Build Status](https://travis-ci.com/kendyjm/udacity-cloud-developer-nd9990.svg?branch=development)](https://travis-ci.com/kendyjm/udacity-cloud-developer-nd9990)

Udagram allows users to register and log into a web client, post photos to the feed, and process photos using an image filtering microservice.

The project is split into four parts:

1. [The Frontend](udacity-c2-frontend), an Ionic client web application which consumes the RestAPI feed and user.
2. [The RestAPI Feed Backend](udacity-c3-restapi-feed), a Node-Express feed microservice.
3. [The RestAPI User Backend](udacity-c3-restapi-user), a Node-Express user microservice.
4. [The reverse proxy server](udacity-c3-nginx-reverseproxy), a NGINX proxy server.

## Architecture

![architecture](./screenshots/architecture-v2.png)

## Getting started

### Prerequisites

You need to install:

- [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-linux.html)
- [Docker](https://docs.docker.com/get-docker/)
- [Docker Compose](https://docs.docker.com/compose/install/)
- [Eksctl](https://docs.aws.amazon.com/eks/latest/userguide/getting-started-eksctl.html)
- [Kubectl](https://docs.aws.amazon.com/eks/latest/userguide/install-kubectl.html)

### Installation

Test that your installation is successful with the following commands:

```bash
aws --version
docker --version
docker-compose version --short
eksctl version
kubectl version --short --client
```

![setupversions](screenshots/setupversions.png)

### Setup Environment Variables

Open your bash profile to store your application variables at OS level to use them within and across applications:

```bash
open ~/.profile
```

Copy and Paste the bash scripts bellow with your values:

```bash
export DB_USERNAME=your postgress username;
export DB_PASSWORD=your postgress password;
export DB_NAME=your postgress database;
export DB_HOST=your postgress host;
export AWS_REGION=your aws region;
export AWS_PROFILE=your aws profile;
export AWS_MEDIA_BUCKET=your aws bucket name;
export JWT_SECRET=your jwt secret;
export ACCESS_CONTROL_ALLOW_ORIGIN=url of the frontend;
```

Source your .profile to execute your bash scripts automatically whenever a new interactive shell is started:

```bash
source ~/.profile
```

### Running locally with Docker

#### 1) Pull or build images

To run the docker images, 2 options:

- 1a) Get Docker images from Docker Hub
- 1b) Build the Docker images

##### 1a) Get Docker images from Docker Hub

The project's images are available at Docker Hub :

- [kendyjm/udacity-restapi-feed](https://hub.docker.com/repository/docker/kendyjm/udacity-restapi-feed)
- [kendyjm/udacity-restapi-user](https://hub.docker.com/repository/docker/kendyjm/udacity-restapi-user)
- [kendyjm/udacity-frontend](https://hub.docker.com/repository/docker/kendyjm/udacity-frontend)
- [kendyjm/udacity-nginx-reverseproxy](https://hub.docker.com/repository/docker/kendyjm/udacity-nginx-reverseproxy)

![dockerhub](screenshots/dockerhub.png)

Just push these images executing this script:

```bash
docker pull kendyjm/udacity-restapi-feed:latest
docker pull kendyjm/udacity-restapi-user:latest
docker pull kendyjm/udacity-nginx-reverseproxy:latest
docker pull kendyjm/udacity-frontend:latest
```

##### 1b) Build the Docker images

Build the docker images by following the documentation in [udacity-c3-deployment/docker](udacity-c3-deployment/docker)

#### 2) List your docker images

Check images available : `docker images`

![dockerimages](screenshots/dockerimages.png)

#### 3) Run

Run your docker containers: `docker-compose up`

![dockercomposeup](screenshots/dockercomposeup.png)

#### 4) Access Udagram

Browse the frontend application : <http://localhost:8100/>

![udagramlocalhost](screenshots/udagramlocalhost.png)

To exit run `control + C`

### Run with a Kubernetes Cluster on Amazon EKS

Create your cluster with `eksctl` by following documentation in [udacity-c3-deployment/eks](udacity-c3-deployment/eks)

Your cluster is created and visible in the [AWS Console/EKS](https://eu-west-3.console.aws.amazon.com/eks/home#/clusters):
![eksclusterconsole](screenshots/eksclusterconsole.png)

#### Setup Kubernetes Environment

Setup the ubernetes environment by following the documentation in [udacity-c3-deployment/k8s](udacity-c3-deployment/k8s)

#### Check status of all resources (services, delpoyments, pods, hpa)

```bash
kubectl get all
```

![kubernetesresourcesstatus](screenshots/kubernetesresourcesstatus.png)

#### Check pods logs

```bash
kubectl logs <podId>
```

![kubernetespodslogs](screenshots/kubernetespodslogs.png)

#### Connect the Services with Port Forwarding

Use Port Forwarding to the Frontend and Reverse Proxy services:
The port forwarding must be done in Separate terminals, to run both services at the same time.

```bash
kubectl port-forward service/frontend 8100:8100
kubectl port-forward service/reverseproxy 8080:8080
```

Browse the frontend application : <http://localhost:8100/>

### CI/CD with Travis

- Sign up for [Travis](https://travis-ci.com) and connect your Github application repository to TravisCL.
- Have a look to the [config file](../.travis.yml) that will be read by Travis, at the root of the repository. It needs some environment variables.
- Add your environment variables to the project repository in [Travis](https://travis-ci.com) by selecting the setting option.
- Commit and Push your changes trigger a Travis build.
- Check the build status page to see if your build passes or fails according to the return status of the build command by visiting [TravisCL](https://travis-ci.com) and selecting your repository.

![traviscibuildpassed](screenshots/traviscibuildpassed.png)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
npm-debug.log
35 changes: 35 additions & 0 deletions project3-microservices-udagram/udacity-c2-frontend/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# Specifies intentionally untracked files to ignore when using Git
# http://git-scm.com/docs/gitignore

*~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/
npm-debug.log*

.idea/
.ionic/
.sourcemaps/
.sass-cache/
.tmp/
.versions/
coverage/
www/
node_modules/
tmp/
temp/
platforms/
plugins/
plugins/android.json
plugins/ios.json
$RECYCLE.BIN/

.DS_Store
Thumbs.db
UserInterfaceState.xcuserstate
node_modules
17 changes: 17 additions & 0 deletions project3-microservices-udagram/udacity-c2-frontend/Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
## Build
FROM beevelop/ionic AS ionic
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./
RUN npm ci
# Bundle app source
COPY . .
RUN ionic build

## Run
FROM nginx:alpine
#COPY www /usr/share/nginx/html
COPY --from=ionic /usr/src/app/www /usr/share/nginx/html
79 changes: 79 additions & 0 deletions project3-microservices-udagram/udacity-c2-frontend/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
# Udagram Simple Frontend

Udagram is a simple cloud application developed along side the Udacity Cloud Engineering Nanodegree. It allows users to register and log into a web client, post photos to the feed, and process photos using an image filtering microservice.

The project is split into three parts:

1. [The Simple Frontend](.)
A basic Ionic client web application which consumes the RestAPI Backend.
2. [The RestAPI Backend](../udacity-c2-restapi), a Node-Express server which can be deployed to a cloud service.
3. [The Image Filtering Microservice](../../../project2-image-filter), the final project for the course. It is a Node-Express application which runs a simple script to process images.

***

## Getting Setup

> _tip_: this frontend is designed to work with [The RestAPI Backend](https://github.com/grutt/udacity-c2-restapi). It is recommended you stand up the backend first, test using Postman, and then the frontend should integrate.
### Installing Node and NPM

This project depends on Nodejs and Node Package Manager (NPM). Before continuing, you must download and install Node (NPM is included) from [https://nodejs.com/en/download](https://nodejs.org/en/download/).

### Installing Ionic Cli

The Ionic Command Line Interface is required to serve and build the frontend. Instructions for installing the CLI can be found in the [Ionic Framework Docs](https://ionicframework.com/docs/installation/cli).

### Installing project dependencies

This project uses NPM to manage software dependencies. NPM Relies on the package.json file located in the root of this repository. After cloning, open your terminal and run:

```bash
npm install
```

>_tip_: **npm i** is shorthand for **npm install**
### Configure The Backend Endpoint

Ionic uses enviornment files located in `./src/enviornments/enviornment.*.ts` to load configuration variables at runtime. By default `environment.ts` is used for development and `enviornment.prod.ts` is used for produciton. The `apiHost` variable should be set to your server url either locally or in the cloud.

***

### Running the Development Server

Ionic CLI provides an easy to use development server to run and autoreload the frontend. This allows you to make quick changes and see them in real time in your browser. To run the development server, open terminal and run:

```bash
ionic serve
```

### Building the Static Frontend Files

Ionic CLI can build the frontend into static HTML/CSS/JavaScript files. These files can be uploaded to a host to be consumed by users on the web. Build artifacts are located in `./www`. To build from source, open terminal and run:

```bash
ionic build
```

***

## @TODO

2. Tasks
i. Setup
a. Clone, set up protected branches (dev, staging, master)
b. NPM, Ionic CLI
c. run tests (npm test), identify broken function, fix the function
d. write tests for form validation and re-run tests

## Build & run docker image

### Build your image

`docker build -t kendyjm/udacity-frontend .`
Replace {dockerid} with your docker user's id.
The -t flag lets you tag your image so it's easier to find later using the docker images command.

### Run your image

`docker run --rm --publish 8100:80 --name frontend kendyjm/udacity-frontend`
Loading

0 comments on commit 9ecf97c

Please sign in to comment.