add Docker support; run the two apps using Docker Compose

Author: changhuixu

.gitignore

@@ -217,7 +217,6 @@ ClientBin/
 *.dbmdl
 *.dbproj.schemaview
 *.jfm
-*.pfx
 *.publishsettings
 orleans.codegen.cs
 

README.md

@@ -1,3 +1,32 @@
 # JWT Auth Demo
 
 This repository demos an ASP.NET Core web API application using JWT auth, and an integration testing project for a set of actions including login, logout, refresh token, impersonation, authentication, and authorization.
+
+## Solution Structure
+
+This repository includes two applications: an Angular SPA in the `angular` folder, and an ASP.NET Core web API app in the `webapi` folder. The SPA makes HTTP requests to the server side (the `webapi` app) using an API BaseURL `https://localhost:5001`. The API BaseURL is set in the `environment.ts` file and the `environment.prod.ts` file, which can be modified based on your situation.
+
+- `angular`
+  The SPA is served using NGINX on Docker. The application demonstrates JWT authorization in the front-end.
+- `webapi`
+  The ASP.NET Core web API app is served by Kestrel on Docker. This app has implemented HTTPS support.
+
+## Usage
+
+The demo is configured to run by Docker Compose. The services are listed in the `docker-compose.yml` file. You can launch the demo by the following command.
+
+```bash
+docker-compose up --build --remove-orphans
+```
+
+You can also move the folders around to consolidate the solution to be one ASP.NET Core web app using SPA service.
+
+## Screenshots
+
+- **Front-end** ([http://localhost:8080](http://localhost:8080))
+
+  ![angular app](./localhost_8080.png)
+
+- **Back-end** ([https://localhost:5001](https://localhost:5001))
+
+  ![web api](./localhost_5001.png)

angular/Dockerfile

@@ -0,0 +1,21 @@
+FROM node:alpine as builder
+
+WORKDIR /app
+COPY package.json package-lock.json ./
+ENV CI=1
+RUN npm ci
+
+COPY . .
+RUN npm run build -- --prod --output-path=/dist
+
+# Deploy our Angular app to NGINX
+FROM nginx:alpine
+
+## Replace the default nginx index page with our Angular app
+RUN rm -rf /usr/share/nginx/html/*
+COPY --from=builder /dist /usr/share/nginx/html
+
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
+COPY ./nginx/gzip.conf /etc/nginx/gzip.conf
+
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

angular/nginx/gzip.conf

@@ -0,0 +1,23 @@
+gzip            on;
+gzip_vary       on;
+gzip_http_version  1.0;
+gzip_comp_level 5;
+gzip_types
+                application/atom+xml
+                application/javascript
+                application/json
+                application/rss+xml
+                application/vnd.ms-fontobject
+                application/x-font-ttf
+                application/x-web-app-manifest+json
+                application/xhtml+xml
+                application/xml
+                font/opentype
+                image/svg+xml
+                image/x-icon
+                text/css
+                text/plain
+                text/x-component;
+gzip_proxied    no-cache no-store private expired auth;
+gzip_min_length 256;
+gunzip          on;

angular/nginx/nginx.conf

@@ -0,0 +1,30 @@
+user nginx;
+
+worker_processes    auto;
+
+events { worker_connections 1024; }
+
+http {
+    include             /etc/nginx/mime.types;
+    include             /etc/nginx/gzip.conf;
+    limit_req_zone      $binary_remote_addr zone=one:10m rate=5r/s;
+    server_tokens       off;
+
+    sendfile            on;
+    keepalive_timeout   29; # Adjust to the lowest possible value that makes sense for your use case.
+    client_body_timeout 10; client_header_timeout 10; send_timeout 10;
+
+    server {
+        listen                      80;
+        server_name                 $hostname;
+        root                        /usr/share/nginx/html;
+        
+        add_header X-Frame-Options DENY;
+        add_header X-Content-Type-Options nosniff;
+        add_header X-Frame-Options "SAMEORIGIN";
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

angular/src/app/management/management.component.html

@@ -1 +1,4 @@
-<p>management works!</p>
+<div class="container p-3">
+  <p>TODO: impersonation related components</p>
+  <p>management works!</p>
+</div>

docker-compose.yml

@@ -0,0 +1,24 @@
+version: '3.8'
+
+services:
+  angular:
+    build: ./angular
+    ports:
+      - '8080:80'
+    depends_on:
+      - api
+    restart: always
+
+  api:
+    build: ./webapi
+    ports:
+      - '5001'
+    environment:
+      - ASPNETCORE_ENVIRONMENT=Development
+      - ASPNETCORE_URLS=https://+:5001;http://+:5000
+      - ASPNETCORE_HTTPS_PORT=5001
+      - ASPNETCORE_Kestrel__Certificates__Default__Password=mypassword123
+      - ASPNETCORE_Kestrel__Certificates__Default__Path=/https/aspnetapp.pfx
+    volumes:
+      - ./webapi/https/aspnetapp.pfx:/https/aspnetapp.pfx:ro
+    restart: always

localhost_5001.png

@@ -1,4 +1,6 @@
-FROM mcr.microsoft.com/dotnet/core/sdk:3.1-alpine AS build
+ARG VERSION=3.1-alpine
+
+FROM mcr.microsoft.com/dotnet/core/sdk:$VERSION AS build
 WORKDIR /app
 
 COPY ./*.sln .
@@ -15,8 +17,7 @@ WORKDIR /app/JwtAuthDemo
 RUN dotnet publish -c Release -o /out --no-restore
 
 
-FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-alpine AS runtime
+FROM mcr.microsoft.com/dotnet/core/aspnet:$VERSION AS runtime
 WORKDIR /app
 COPY --from=build /out ./
-ENV ASPNETCORE_URLS http://*:5000
 ENTRYPOINT ["dotnet", "JwtAuthDemo.dll"]