Vfrdtyky

I want to serve an Angular application over HTTPS using ng-serve --host 0.0.0.0. My project uses Angular CLI 1.2.

Angular is not recognising the certificates I provide, and creating its own. The certificates I want to use are .pem files.

Enabling the --ssl flag correctly serves using HTTPS. If I disable it, it goes back to HTTP, so this flag works.

I'm working in a Docker container. I pass the certificates in as a volume in the compose file, and they are where expected in the container when I check with docker exec -i <id> bash.

Everything works as expected if I ignore the invalid certificate error, both client side and server side. The problem I am trying to solve is getting ng-serve to use my certificates.

Here's what I've done:

1. ng-serve --ssl true --ssl-cert <path-to-cert> --ssl-key <path-to-key> and variations e.g. absolute/relative path.




2. Setting the above flags in the package.json file.



3. 
   

   Setting my .angular-cli.json defaults:

   
   
   

   {
   
     ... 
   
     "defaults": {
   
       ...
   
       "serve": {
   
         "sslKey": "<relative-path>",
   
         "sslCert": "<relative-path>"
   
       },
   
       ...
   
     },
   
     ...
   
   }
   
   

   
   

I have tried the answers:

Get angular-cli to ng serve over HTTPS

Run Angular Cli Ng Serve over https 2018

The steps in this article also did not work:
https://medium.com/@rubenvermeulen/running-angular-cli-over-https-with-a-trusted-certificate-4a0d5f92747a

You shouldn't be using ng serve in a production Docker container because it invokes a development HTTP server, not secure at all, just meant to test the app locally. That's why the command ng serve --prod triggers the following warning:

**************************************************************************************** 

This is a simple server for use in testing or debugging Angular applications locally. It hasn't been reviewed for security issues.



DON'T USE IT FOR PRODUCTION!

****************************************************************************************

I'll give you an example of a Dockerfile wrapping an Angular app with a Nginx HTTP server (one of the two most widely used servers):

FROM node:10.13.0-stretch as build-stage

WORKDIR /app

COPY package*.json /app/

RUN npm install

RUN npm install -g --unsafe-perm @angular/cli@latest

COPY ./ /app/

ARG configuration=production

RUN ng build --prod --build-optimizer=true --aot=true --output-hashing=all --extract-css=true --named-chunks=false --vendor-chunk=true



FROM nginx:1.14.1



# Add application files

COPY --from=build-stage /app/dist/name-of-your-app/ /var/www/html

COPY --from=build-stage /app/nginx/nginx.conf /etc/nginx/nginx.conf 

COPY --from=build-stage /app/nginx/site.conf /etc/nginx/conf.d/default.conf 



RUN touch /var/run/nginx.pid && 

    chown -R www-data: /etc/nginx/ && 

    chown -R www-data: /var/run/nginx.pid && 

    chown -R www-data: /var/cache/nginx && 

    chown -R www-data: /var/www/html



USER www-data



#Expose the port

EXPOSE 8080



STOPSIGNAL SIGTERM



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

This creates two containers, the first one installs the CLI and builds the app, the second one copies files from the "build container" to its folder served by an Nginx HTTP server, then the first container gets destroyed.

This assumes you have proper nginx.conf and site.conf in a nginx folder that hold your certificate configuration (and by the way you have to add the certificate and the private key files in the Dockerfile too).
You could also use Apache as an HTTP server.