udacity / cd0354-monolith-to-microservices-project

Project code for cd0354 Monolith to Microservices at Scale course taught by Justin Lee

Udagram Image Filtering Application

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. 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/:

  npm install .

• To run the application locally, run:

  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/:

  npm install .

• Install Ionic Framework's Command Line tools for us to build and run the application:

  npm install -g ionic

• Prepare your application by compiling them into static files.

  ionic build

• Run the application locally using files created from the ionic build command.

  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:

   npx eslint --ext .js,.ts src/

   To have your code fixed automatically, run

   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.

cd0354-monolith-to-microservices-project's Issues

How to run project in local?

• hello udacity, in 2023 which version of node and npm installed to run this project?
• I use window how to by lib fsevent which just support macOS?

Using a smaller base image for the frontend service

Hello,
The frontend service uses beevelop/ionic as its base image. The issue is, that this base image size is 3.39 GB, it comes with unnecessary dependencies such as Cordova and Android.

We can use a relatively much smaller base image, consisting of only node, for example, you can use node:14.15.5-alpine3.13 which has the size of roughly only 40 MB, and then install the ionic CLI dependency.

An example alternative Dockerfile would be

## Build
FROM node:14.15.5-alpine3.13 as build
# 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
COPY package*.json ./
RUN npm ci
RUN npm install -g @ionic/cli
# Bundle app source
COPY . .
RUN ionic build
## Run 
FROM nginx:alpine
#COPY www /usr/share/nginx/html
COPY --from=build /usr/src/app/www /usr/share/nginx/html

Packages won't install in "udagram-frontend"

Following the instructions to install the packages to run ionic build and I faced a few challenges.
I'm on Ubuntu 22.04.
Node 17.9.0
npm 8.18.0

First, I ran npm install . and I got this error

So I proceeded to delete fsevents from node_modules and package.json and then run npm install . again. This time the packages were installed with a lot of warnings of deprecated packages

Since I had already installed ionic globally I went ahead to run ionic build and had these errors thrown in my face

What I tried

I updated the packages with ncu -u.

When I ran npm install it crashed and I had to run npm install --legacy-peer-deps for it to finally install the updated packages

When the packages were updated I went ahead to run ionic build and now I got this

I went ahead to do a google search and I found on StackOverflow that I had to take out es5BrowserSupport from angular.js which I did and then I reran ionic build

I'm stuck here. I don't know what else to do. Is there something I'm missing? Any suggestions or contributions will be greatly appreciated

InvalidARN: ARN accountID does not match regex "[0-9]{12}"

Issue
When running udagram-api backend. An error return: InvalidARN: ARN accountID does not match regex "[0-9]{12}"

The AWS Bucket name should be without the arn

The AWS Bucket name should be without the arn:aws:s3::: preceding the bucket name in set_env.sh file. This acted as a blocker for me and other learners during our projects. I really wanted the upcoming learners not to go through the same route. I have created a PR for this but for some reasons, I could not link the PR to this issue