Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

merge Develop to main #220

Closed
wants to merge 22 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 128 additions & 0 deletions .github/workflows/build-docker-image.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
name: build docker image

on:
push:
branches: [ develop ]
pull_request:
branches: [ develop ]

jobs:
build-api-user:
runs-on: ubuntu-latest

steps:
- name: checkout code
uses: actions/checkout@v3

- name: Use Node.js 13
uses: actions/setup-node@v2
with:
node-version: 13

- name: Install dependencies
run: echo "nothing needs to be installed"

- name: Build Docker image
run: |
docker --version
cd ./udagram-api-user
docker build -t udagram-api-user .
docker tag udagram-api-user ${{ secrets.DOCKER_HUB_USERNAME }}/udagram-api-user:latest

- name: Push to Docker Hub
env:
DOCKER_USERNAME: ${{ secrets.DOCKER_HUB_USERNAME }}
DOCKER_PASSWORD: ${{ secrets.DOCKER_HUB_PASSWORD }}
run: |
echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
docker push ${{ secrets.DOCKER_HUB_USERNAME }}/udagram-api-user:latest

build-api-feed:
runs-on: ubuntu-latest

steps:
- name: checkout code
uses: actions/checkout@v3

- name: Use Node.js 13
uses: actions/setup-node@v2
with:
node-version: 13

- name: Install dependencies
run: echo "nothing needs to be installed"

- name: Build Docker image
run: |
docker --version
cd ./udagram-api-feed
docker build -t udagram-api-feed .
docker tag udagram-api-feed ${{ secrets.DOCKER_HUB_USERNAME }}/udagram-api-feed:latest

- name: Push to Docker Hub
env:
DOCKER_USERNAME: ${{ secrets.DOCKER_HUB_USERNAME }}
DOCKER_PASSWORD: ${{ secrets.DOCKER_HUB_PASSWORD }}
run: |
echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
docker push ${{ secrets.DOCKER_HUB_USERNAME }}/udagram-api-feed:latest

build-reverseproxy:
runs-on: ubuntu-latest

steps:
- name: checkout code
uses: actions/checkout@v3

- name: Use Node.js 13
uses: actions/setup-node@v2
with:
node-version: 13

- name: Install dependencies
run: echo "nothing needs to be installed"

- name: Build Docker image
run: |
docker --version
cd ./udagram-reverseproxy
docker build -t udagram-reverseproxy .
docker tag udagram-reverseproxy ${{ secrets.DOCKER_HUB_USERNAME }}/udagram-reverseproxy:latest

- name: Push to Docker Hub
env:
DOCKER_USERNAME: ${{ secrets.DOCKER_HUB_USERNAME }}
DOCKER_PASSWORD: ${{ secrets.DOCKER_HUB_PASSWORD }}
run: |
echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
docker push ${{ secrets.DOCKER_HUB_USERNAME }}/udagram-reverseproxy:latest

build-frontend:
runs-on: ubuntu-latest

steps:
- name: checkout code
uses: actions/checkout@v3

- name: Use Node.js 13
uses: actions/setup-node@v2
with:
node-version: 13

- name: Install dependencies
run: echo "nothing needs to be installed"

- name: Build Docker image
run: |
docker --version
cd ./udagram-frontend
docker build -t udagram-frontend .
docker tag udagram-frontend ${{ secrets.DOCKER_HUB_USERNAME }}/udagram-frontend:latest

- name: Push to Docker Hub
env:
DOCKER_USERNAME: ${{ secrets.DOCKER_HUB_USERNAME }}
DOCKER_PASSWORD: ${{ secrets.DOCKER_HUB_PASSWORD }}
run: |
echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
docker push ${{ secrets.DOCKER_HUB_USERNAME }}/udagram-frontend:latest
46 changes: 0 additions & 46 deletions .github/workflows/manual.yml

This file was deleted.

5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,8 @@ venv/
.elasticbeanstalk/*
!.elasticbeanstalk/*.cfg.yml
!.elasticbeanstalk/*.global.yml
set_env.sh
set_env.sh
*.bat
docker-compose.yaml-bk
set_env.sh
23 changes: 23 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
language: node_js
node_js:
- 13

services:
- docker

# Pre-testing installs
install:
- echo "nothing needs to be installed"

# Scripts to be run such as tests
before_script:
- echo "no tests"

script:
- docker --version # print the version for logging
- docker build -t simple-node .
- docker tag simple-node YOUR_DOCKER_HUB/simple-node:latest

after_success:
- echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
- docker push YOUR_DOCKER_HUB/simple-node
87 changes: 2 additions & 85 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,86 +1,3 @@
# Udagram Image Filtering Application
#Fontend endpoint

Udagram is a simple cloud application developed alongside the Udacity Cloud Developer 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 two parts:
1. Frontend - Angular web application built with Ionic Framework
2. Backend RESTful API - Node-Express application

## Getting Started
> _tip_: it's recommended that you start with getting the backend API running since the frontend web application depends on the API.

### Prerequisite
1. The depends on the Node Package Manager (NPM). You will need to download and install Node from [https://nodejs.com/en/download](https://nodejs.org/en/download/). This will allow you to be able to run `npm` commands.
2. Environment variables will need to be set. These environment variables include database connection details that should not be hard-coded into the application code.

#### Environment Script
A file named `set_env.sh` has been prepared as an optional tool to help you configure these variables on your local development environment.

We do _not_ want your credentials to be stored in git. After pulling this `starter` project, run the following command to tell git to stop tracking the script in git but keep it stored locally. This way, you can use the script for your convenience and reduce risk of exposing your credentials.
`git rm --cached set_env.sh`

Afterwards, we can prevent the file from being included in your solution by adding the file to our `.gitignore` file.

### 1. Database
Create a PostgreSQL database either locally or on AWS RDS. The database is used to store the application's metadata.

* We will need to use password authentication for this project. This means that a username and password is needed to authenticate and access the database.
* The port number will need to be set as `5432`. This is the typical port that is used by PostgreSQL so it is usually set to this port by default.

Once your database is set up, set the config values for environment variables prefixed with `POSTGRES_` in `set_env.sh`.
* If you set up a local database, your `POSTGRES_HOST` is most likely `localhost`
* If you set up an RDS database, your `POSTGRES_HOST` is most likely in the following format: `***.****.us-west-1.rds.amazonaws.com`. You can find this value in the AWS console's RDS dashboard.


### 2. S3
Create an AWS S3 bucket. The S3 bucket is used to store images that are displayed in Udagram.

Set the config values for environment variables prefixed with `AWS_` in `set_env.sh`.

### 3. Backend API
Launch the backend API locally. The API is the application's interface to S3 and the database.

* To download all the package dependencies, run the command from the directory `udagram-api/`:
```bash
npm install .
```
* To run the application locally, run:
```bash
npm run dev
```
* You can visit `http://localhost:8080/api/v0/feed` in your web browser to verify that the application is running. You should see a JSON payload. Feel free to play around with Postman to test the API's.

### 4. Frontend App
Launch the frontend app locally.

* To download all the package dependencies, run the command from the directory `udagram-frontend/`:
```bash
npm install .
```
* Install Ionic Framework's Command Line tools for us to build and run the application:
```bash
npm install -g ionic
```
* Prepare your application by compiling them into static files.
```bash
ionic build
```
* Run the application locally using files created from the `ionic build` command.
```bash
ionic serve
```
* You can visit `http://localhost:8100` in your web browser to verify that the application is running. You should see a web interface.

## Tips
1. Take a look at `udagram-api` -- does it look like we can divide it into two modules to be deployed as separate microservices?
2. The `.dockerignore` file is included for your convenience to not copy `node_modules`. Copying this over into a Docker container might cause issues if your local environment is a different operating system than the Docker image (ex. Windows or MacOS vs. Linux).
3. It's useful to "lint" your code so that changes in the codebase adhere to a coding standard. This helps alleviate issues when developers use different styles of coding. `eslint` has been set up for TypeScript in the codebase for you. To lint your code, run the following:
```bash
npx eslint --ext .js,.ts src/
```
To have your code fixed automatically, run
```bash
npx eslint --ext .js,.ts src/ --fix
```
4. `set_env.sh` is really for your backend application. Frontend applications have a different notion of how to store configurations. Configurations for the application endpoints can be configured inside of the `environments/environment.*ts` files.
5. In `set_env.sh`, environment variables are set with `export $VAR=value`. Setting it this way is not permanent; every time you open a new terminal, you will have to run `set_env.sh` to reconfigure your environment variables. To verify if your environment variable is set, you can check the variable with a command like `echo $POSTGRES_USERNAME`.
http://abd67033dbd054dc693cfd89809b8c04-2088330853.us-east-1.elb.amazonaws.com:8100/
18 changes: 18 additions & 0 deletions docker-compose-build.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
version: "3"
services:
# reverseproxy:
# build:
# context: ./udagram-reverseproxy
# image: reverseproxy
# backend_user:
# build:
# context: ./udagram-api-user
# image: udagram-api-user
backend_feed:
build:
context: ./udagram-api-feed
image: udagram-api-feed
# frontend:
# build:
# context: ./udagram-frontend
# image: udagram-frontend:local
40 changes: 40 additions & 0 deletions docker-compose.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
version: "3"
services:
reverseproxy:
image: reverseproxy
ports:
- 8080:8080
restart: always
depends_on:
- backend-user
- backend-feed
backend-user:
image: udagram-api-user
environment:
POSTGRES_USERNAME: $POSTGRES_USERNAME
POSTGRES_PASSWORD: $POSTGRES_PASSWORD
POSTGRES_DB: $POSTGRES_DB
POSTGRES_HOST: $POSTGRES_HOST
AWS_REGION: $AWS_REGION
AWS_PROFILE: $AWS_PROFILE
AWS_BUCKET: $AWS_BUCKET
JWT_SECRET: $JWT_SECRET
URL: "http://localhost:8100"
backend-feed:
image: udagram-api-feed
volumes:
- $HOME/.aws:/root/.aws
environment:
POSTGRES_USERNAME: $POSTGRES_USERNAME
POSTGRES_PASSWORD: $POSTGRES_PASSWORD
POSTGRES_DB: $POSTGRES_DB
POSTGRES_HOST: $POSTGRES_HOST
AWS_REGION: $AWS_REGION
AWS_PROFILE: $AWS_PROFILE
AWS_BUCKET: $AWS_BUCKET
JWT_SECRET: $JWT_SECRET
URL: "http://localhost:8100"
frontend:
image: udagram-frontend:local
ports:
- "8100:80"
Loading
Loading