angular-cli and docker/kubernetes

If you are just trying to create a container for you angular2 app here are some steps to help:

Create your angular2 app with angular-cli if you don`t have one and build it(with aot)

ng build --prod --aot

It will create the dist directory

Create the default.conf nginx file:

It will have the caching and capture all locations to your index(as expected in a single page app)

server {listen 80;

charset utf-8;

sendfile on;

root /usr/share/nginx/html;

Gzip Settings

gzip on;gzip_http_version 1.1;gzip_disable "MSIE [1-6]\.";gzip_min_length 1100;gzip_vary on;gzip_proxied expired no-cache no-store private auth;gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;gzip_comp_level 9;

#Caches static assetslocation ~ ^/(assets|bower_components|scripts|styles|views) {expires 31d;add_header Cache-Control public;}

#Caches Bundles created by angular clilocation ~* \.(?:bundle.js|bundle.css)$ {expires 1M;access_log off;add_header Cache-Control "public";}

Main file index.html sending not found locations to the main

location / {expires -1;add_header Pragma "no-cache";add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";

try\_files **$**uri **$**uri/ /index.html = 404;  

}}

Create a Dockerfile to build you image:

#alpine imageFROM nginx:alpine#create the server and location configurationCOPY default.conf **/etc/nginx/conf.d/**default.conf#copies the build app to the default locationCOPY dist **/usr/share/nginx/**html

If you try to run docker build this will take a long time… because docker sends a lot of files to build de container, so you have to create a .dockerignore that only send the required files

*!dist!default.conf

That’s a lot better! Now if you want to use kubernetes just create an yaml with the required properties:

apiVersion: v1kind: Servicemetadata:name: webapplabels:run: webappspec:type: NodePortports: - port: 80targetPort: 80protocol: TCPname: http

• 
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  port: 443protocol: TCPname: httpsselector:run: webapp---apiVersion: extensions/v1beta1kind: Deploymentmetadata:name: webappspec:replicas: 1template:metadata:labels:run: webappspec:containers: - name: webappimage: [username]/[image]:[version]ports: - containerPort: 80- containerPort: 443imagePullSecrets: - name: myregistrykey

Hope it helps..

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising &sponsorship opportunities.

To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!