Skip to content

Commit

Permalink
feat(webapp): added helm chart for angular webapp deployment
Browse files Browse the repository at this point in the history
anginx helm chart allow nginx webserver with angular content deployable into unprivileged containers
  • Loading branch information
xmlking committed Apr 9, 2019
1 parent 0658a69 commit a87dd79
Show file tree
Hide file tree
Showing 47 changed files with 382 additions and 414 deletions.
3 changes: 2 additions & 1 deletion .deploy/api/Dockerfile
Expand Up @@ -68,7 +68,8 @@ ARG NAME=ngxapi
ARG VENDOR=sumo

# Metadata
LABEL org.label-schema.build-date=$BUILD_DATE \
LABEL maintainer="Sumanth <xmlking@gmail.com>" \
org.label-schema.build-date=$BUILD_DATE \
org.label-schema.name=$NAME \
org.label-schema.description="NGX Api" \
org.label-schema.url="https://example.com" \
Expand Down
5 changes: 3 additions & 2 deletions .deploy/api/README.md
Expand Up @@ -5,8 +5,9 @@ Build and Deploy NgxApi
### Build

```bash
# build, optinally use `--no-cache`
VERSION=2.0.0-SNAPSHOT
# build, optionally use `--no-cache`
export VERSION=2.0.0-SNAPSHOT
export DOCKER_BUILDKIT=1
docker build \
--build-arg VERSION=$VERSION \
--build-arg BUILD_DATE=$(date -u +'%Y-%m-%dT%H:%M:%SZ') \
Expand Down
2 changes: 1 addition & 1 deletion .deploy/api/helm/README.md
Expand Up @@ -83,7 +83,7 @@ kubectl apply --recursive -f generated/nodeapp/* --namespace default

ngxapi can be accessed:

* Within your cluster, at the following DNS name at port 80:
* Within your cluster, at the following DNS name at port 3000:

```
ngxapi-nodeapp.default.svc.cluster.local
Expand Down
4 changes: 3 additions & 1 deletion .deploy/api/helm/values-dev.yaml
Expand Up @@ -45,7 +45,9 @@ env:
- name: TYPEORM_LOGGING
value: 'false'
- name: OIDC_ISSUER_URL
value: 'https://keycloak-ngx1.1d35.starter-us-east-1.openshiftapps.com/auth/realms/ngx'
value: 'https://keycloak.traefik.k8s/auth/realms/ngx'
- name: OIDC_JWKS_URL
value: 'http://keycloak-headless:8080/auth/realms/ngx/protocol/openid-connect/certs'
- name: OIDC_CLIENT_ID
value: ngxapi
- name: EMAIL_HOST
Expand Down
4 changes: 3 additions & 1 deletion .deploy/api/helm/values-prod.yaml
Expand Up @@ -58,7 +58,9 @@ env:
- name: TYPEORM_LOGGING
value: 'false'
- name: OIDC_ISSUER_URL
value: 'https://keycloak-ngx1.1d35.starter-us-east-1.openshiftapps.com/auth/realms/ngx'
value: 'https://keycloak.traefik.k8s/auth/realms/ngx'
- name: OIDC_JWKS_URL
value: 'http://keycloak-headless:8080/auth/realms/ngx/protocol/openid-connect/certs'
- name: OIDC_CLIENT_ID
value: ngxapi
- name: EMAIL_HOST
Expand Down
3 changes: 2 additions & 1 deletion .deploy/api/manual/01-ngxapi-configmap.yaml
Expand Up @@ -12,7 +12,8 @@ data:
TYPEORM_DATABASE: postgres
TYPEORM_USERNAME: postgres
TYPEORM_LOGGING: 'false'
OIDC_ISSUER_URL: 'https://keycloak-ngx1.1d35.starter-us-east-1.openshiftapps.com/auth/realms/ngx'
OIDC_ISSUER_URL: 'https://keycloak.traefik.k8s/auth/realms/ngx'
OIDC_JWKS_URL: 'http://keycloak-headless:8080/auth/realms/ngx/protocol/openid-connect/certs'
OIDC_CLIENT_ID: ngxapi
EMAIL_HOST: mail.google.com
EMAIL_PORT: '25'
Expand Down
18 changes: 9 additions & 9 deletions .deploy/keycloak/LDAP.md
Expand Up @@ -48,12 +48,12 @@ Post-Install KeyCloak Setup and LDAP Configuration
Membership User LDAP Attribute: sAMAccountName
LDAP Filter: (&(objectCategory=Group)(cn=IMP_GROUP_*))
Member-Of LDAP Attribute: memberOf
Client ID: ngxapp (optional)
Client ID: ngxweb (optional)
```

5. Add new `telephone number` for `ngxapp` client Mappers (optional)
5. Add new `telephone number` for `ngxweb` client Mappers (optional)

> Clients > ngxapp > Mappers > telephone number
> Clients > ngxweb > Mappers > telephone number
```
Name: telephone number
Expand All @@ -63,9 +63,9 @@ Post-Install KeyCloak Setup and LDAP Configuration
Claim JSON Type: String
```

6. Add `NGX_ADMIN To Admin` for `ngxapp` client Mappers (optional)
6. Add `NGX_ADMIN To Admin` for `ngxweb` client Mappers (optional)

> Clients > ngxapp > Mappers > my_group to admin
> Clients > ngxweb > Mappers > my_group to admin
```
Name: NGX_ADMIN to admin
Expand All @@ -74,10 +74,10 @@ Post-Install KeyCloak Setup and LDAP Configuration
New Role Name: ROLE_ADMIN
```

7. Add `groups` for `ngxapp` client Mappers (optional)
7. Add `groups` for `ngxweb` client Mappers (optional)
> k8s is configured to reed groups from ID_TOKEN/ACCESS_TOKEN, so create groups claim
> Clients > ngxapp > Mappers > groups
> Clients > ngxweb > Mappers > groups
```
Name: groups
Expand All @@ -102,9 +102,9 @@ Post-Install KeyCloak Setup and LDAP Configuration

9. Turn off `Full Scope Allowed` (this step is not needed - buggy)

> Under Clients > ngxapp > Scope
> Under Clients > ngxweb > Scope
Turn off `Full Scope Allowed` for `ngxapp` client and select few Realm Roles
Turn off `Full Scope Allowed` for `ngxweb` client and select few Realm Roles


### FAQ
Expand Down
4 changes: 2 additions & 2 deletions .deploy/keycloak/README.md
Expand Up @@ -65,7 +65,7 @@ PROXY_ADDRESS_FORWARDING="true"
> Open Keycloak WebConsole
1. Create a Keycloak realm called `ngx` via `Master > Add realm` menu, and switch to `ngx` realm
2. Create a public client called `ngxapp` and `ngxapi` under realm `ngx`
2. Create a public client called `ngxweb` and `ngxapi` under realm `ngx`
3. Create a role `ROLE_USER` , `ROLE_ADMIN` under realm `ngx`
4. Add a user `sumo`, `sumo1` , `sumo2` , `sumo3` under realm `ngx` and add the user to user role `ROLE_USER`
5. Add a user `ngxadmin` under realm `ngx` and add the user to user role `ROLE_ADMIN`
Expand All @@ -75,7 +75,7 @@ PROXY_ADDRESS_FORWARDING="true"
Refer https://stackoverflow.com/questions/53550321/keycloak-gatekeeper-aud-claim-and-client-id-do-not-match

1. add `ngxapi_audience` **Client Scopes** at Realm `ngx` with Audience mapper name: `ngxapi_audience_mapper` and adding `ngxapi` Client under `Included Client Audience`.
2. for `ngxapp` client, add `ngxapi_audience` at **Client Scopes** tab
2. for `ngxweb` client, add `ngxapi_audience` at **Client Scopes** tab
3. for `ngxapi` client, add `ngxapi_audience` at **Client Scopes** tab (for Swagger API Docs)

---
Expand Down
2 changes: 1 addition & 1 deletion .deploy/keycloak/TESTING.md
Expand Up @@ -4,7 +4,7 @@ KeyCloak Testing
Pre-configured KeyCloak OpenID Connect server for testing.

* **Realm**: ngx
* **Client ID**: ngxapp, ngxapi
* **Client ID**: ngxweb, ngxapi
* **Accounts**:
* *ROLE_ADMIN*
1. ngxadmin : ngxadmin
Expand Down
6 changes: 3 additions & 3 deletions .deploy/keycloak/realm-import/realm-export.json
Expand Up @@ -289,7 +289,7 @@
"ngxapi": [],
"security-admin-console": [],
"admin-cli": [],
"ngxapp": [],
"ngxweb": [],
"broker": [
{
"id": "45bf247f-b7ea-4a17-b196-2f90ac8eccb6",
Expand Down Expand Up @@ -637,7 +637,7 @@
},
{
"id": "805899f7-f443-45c8-b404-beb0f50a890a",
"clientId": "ngxapp",
"clientId": "ngxweb",
"rootUrl": "http://localhost:4200",
"adminUrl": "http://localhost:4200",
"surrogateAuthRequired": false,
Expand Down Expand Up @@ -1816,4 +1816,4 @@
},
"keycloakVersion": "4.8.3.Final",
"userManagedAccessAllowed": false
}
}
2 changes: 1 addition & 1 deletion .deploy/keycloak/realm-manual-import.json
Expand Up @@ -103,7 +103,7 @@
"defaultRoles": ["ROLE_USER"],
"clients": [
{
"clientId": "ngxapp",
"clientId": "ngxweb",
"enabled": true,
"implicitFlowEnabled": true,
"directAccessGrantsEnabled": true,
Expand Down
59 changes: 39 additions & 20 deletions .deploy/webapp/Dockerfile
@@ -1,35 +1,54 @@
### STAGE 1: Build ###

FROM node:11 as builder
#FROM node:10-alpine as builder

######################################################################
FROM node:11-alpine as dev-dependencies
######################################################################
WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci

######################################################################
FROM node:11-alpine as builder
#FROM node:11 as builder
######################################################################
WORKDIR /app
COPY --from=dev-dependencies /app /app
COPY . .

## Build the angular app in production mode and store the artifacts in dist folder
RUN $(npm bin)/ng build --project=webapp -c=production

### STAGE 2: Setup ###

FROM fholzer/nginx-brotli:v1.15.8
LABEL maintainer="Sumanth <xmlking@gmail.com>"

## Copy our nginx config
# COPY .deploy/webapp/nginx.prod.conf /etc/nginx/conf.d/nginx.conf

ARG NODE_OPTIONS="--max-old-space-size=1024"
ENV NODE_OPTIONS $NODE_OPTIONS
ENV NODE_ENV production
RUN $(npm bin)/ng build webapp --prod

######################################################################
FROM nginxinc/nginx-unprivileged:1.15.10-alpine
######################################################################
## Remove default nginx website
USER root
RUN set -x \
&& rm -rf /usr/share/nginx/html/*
USER 1001

## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /app/dist/apps/webapp /usr/share/nginx/html

EXPOSE 8080
# Metadata params
ARG VERSION=0.0.1
ARG BUILD_DATE
ARG VCS_URL=ngx-starter-kit
ARG VCS_REF=1
ARG NAME=ngxweb
ARG VENDOR=sumo

# Metadata
LABEL maintainer="Sumanth <xmlking@gmail.com>" \
org.label-schema.build-date=$BUILD_DATE \
org.label-schema.name=$NAME \
org.label-schema.description="NGX Web" \
org.label-schema.url="https://example.com" \
org.label-schema.vcs-url=https://github.com/xmlking/$VCS_URL \
org.label-schema.vcs-ref=$VCS_REF \
org.label-schema.vendor=$VENDOR \
org.label-schema.version=$VERSION \
org.label-schema.docker.schema-version="1.0" \
org.label-schema.docker.cmd="docker run -it -p 8080:8080 xmlking/ngxweb"

CMD ["nginx", "-g", "daemon off;"]

89 changes: 30 additions & 59 deletions .deploy/webapp/README.md
@@ -1,93 +1,64 @@
# NxgApp
# NxgWeb

Build and Deploy NgxApp webapp.

> use [nginxconfig](https://nginxconfig.io/) to generate `nginx.conf`
Build and Deploy NgxWeb webapp.

### Build

```bash
# build
VERSION=2.0.0-SNAPSHOT
# build, optionally use `--no-cache`
export VERSION=2.0.0-SNAPSHOT
export DOCKER_BUILDKIT=1
docker build \
--no-cache \
--build-arg VERSION=$VERSION \
--build-arg BUILD_DATE=$(date -u +'%Y-%m-%dT%H:%M:%SZ') \
-t xmlking/ngxapp -f .deploy/webapp/Dockerfile .
-t xmlking/ngxweb -f .deploy/webapp/Dockerfile .

# if you need more memory for build
export NODE_OPTIONS=--max-old-space-size=4096
export VERSION=2.0.0-SNAPSHOT
export DOCKER_BUILDKIT=1
docker build \
--build-arg VERSION=$VERSION \
--build-arg NODE_OPTIONS=$NODE_OPTIONS \
--build-arg BUILD_DATE=$(date -u +'%Y-%m-%dT%H:%M:%SZ') \
-t xmlking/ngxweb -f .deploy/webapp/Dockerfile .

# tag
docker tag xmlking/ngxapp xmlking/ngxapp:$VERSION
docker tag xmlking/ngxweb xmlking/ngxweb:$VERSION

# push
docker push xmlking/ngxapp:$VERSION
docker push xmlking/ngxapp:latest
docker push xmlking/ngxweb:$VERSION
docker push xmlking/ngxweb:latest

# check
docker inspect xmlking/ngxapp:$VERSION
docker inspect xmlking/ngxweb:$VERSION
docker image prune -f
```

### Run

Run docker locally for testing.

```bash
docker run -it -p 4200:8080 -v .deploy/webapp/nginx.conf:/etc/nginx/conf.d/nginx.conf xmlking/ngxapp
# start ngxweb pod in interative mode. Use 'Ctrl+C' to terminate pod and delete temp service.
kubectl run -it --rm ngxweb --port 8080 --hostport=8080 --expose=true --image=xmlking/ngxweb:$VERSION --restart=Never
kubectl port-forward ngxweb 8080:8080
kubectl exec -it ngxweb -- /bin/sh
```

### Test

### Deploy

#### Deploying to Kubernetes
> The app will be available at http://localhost:8080
```bash
# TODO
open http://localhost:8080
```

#### Deploying OpenShift

```bash
# login with your ID
oc login <my OpenShift URL>
# oc login https://console.starter-us-east-1.openshift.com
oc project ngx-starter-kit
cd .deploy/webapp

# create app (first time deployment)
oc new-app -f webapp.tmpl.yml -p APPNAME=webapp -n ngx-starter-kit

# follow next steps if you want completely delete and deploy.
# delete only deploymentConfig
oc delete all -l app=webapp -n cockpit

# delete fully
oc delete all,configmap,secret -l app=webapp -n ngx-starter-kit

# redeploy
from OpenShift Console UI,
Applications > Deployments > webapp > Deploy
```



### Access NgxApp

The app will be available at http://localhost:4200

You can tweak the nginx config `nginx.conf` for your specific needs.

### SSH

```bash
# SSH to the running container (CONTAINER ID from `docker ps` command)
docker exec -it <CONTAINER ID> sh
# if you started via docker-compose
docker-compose exec web sh
```
### Deploy

Follow instructions from [helm](./helm) or [OpenShift](./openshift)

### Reference

- If you get 137 error
- https://samwize.com/2016/05/19/docker-error-returned-a-non-zero-code-137/
- https://docs.docker.com/docker-for-mac/#advanced
- use [nginxconfig](https://nginxconfig.io/) to generate `nginx.conf`

0 comments on commit a87dd79

Please sign in to comment.