Before you go, check out these stories!

0
Hackernoon logoangular-cli and docker/kubernetes by@guilhermbh

angular-cli and docker/kubernetes

Author profile picture

@guilhermbhGuilherme Tabelini

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 assets
location ~ ^/(assets|bower_components|scripts|styles|views) {
expires 31d;
add_header Cache-Control public;
}

#Caches Bundles created by angular cli
location ~* \.(?: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 image
FROM nginx:alpine
#create the server and location configuration
COPY default.conf /etc/nginx/conf.d/default.conf
#copies the build app to the default location
COPY 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: v1
kind: Service
metadata:
name:
webapp
labels:
run:
webapp
spec:
type:
NodePort
ports:
- port: 80
targetPort: 80
protocol: TCP
name: http
- port: 443
protocol: TCP
name: https
selector:
run:
webapp
---
apiVersion: extensions/v1beta1
kind: Deployment
metadata:
name:
webapp
spec:
replicas:
1
template:
metadata:
labels:
run:
webapp
spec:
containers:
- name: webapp
image: [username]/[image]:[version]
ports:
- containerPort: 80
- containerPort: 443
imagePullSecrets:
- 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!

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!