Skip to content

Commit

Permalink
add: working docker file
Browse files Browse the repository at this point in the history
  • Loading branch information
kamil-kielczewski authored and PatrickJS committed Jun 1, 2017
1 parent 7ccce77 commit c3fd2f3
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 4 deletions.
39 changes: 39 additions & 0 deletions .dockerignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.git
.github
.vscode
coverage

# OS generated files #
.DS_Store
ehthumbs.db
Icon?
Thumbs.db

# Node Files #
node_modules
npm-debug.log
npm-debug.log.*

# Typing #
src/typings/tsd
typings
tsd_typings

# Dist #
dist
.awcache
.webpack.json
compiled
dll

# IDE #
.idea
*.swp


# Angular #
*.ngfactory.ts
*.css.shim.ts
*.ngsummary.json
*.shim.ngstyle.ts

49 changes: 45 additions & 4 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,4 +1,45 @@
# Builds a Docker to deliver dist/
# Alternatively, use nginx:alpine for a smaller image
FROM nginx:latest
COPY dist/ /usr/share/nginx/html
# Usage (given build times depend on machine):
#
# Build SMALL image (no cache; ~20MB, time for build=rebuild = ~360s):
# docker build --squash="true" -t angular-starter .
#
# Build FAST (rebuild) image (cache; >280MB, build time ~360s, rebuild time ~80s):
# docker build -t angular-starter .
#
# Clean (remove intermidiet images):
# docker rmi -f $(docker images -f "dangling=true" -q)
#
# Run image (on localhost:8080):
# docker run --name angular-starter -p 8080:80 angular-starter &
#
# Run image as virtual host (read more: https://github.com/jwilder/nginx-proxy):
# docker run -e VIRTUAL_HOST=angular-starter.your-domain.com --name angular-starter angular-starter &

FROM nginx:1.13.0-alpine

# install console and node
RUN apk add --no-cache bash=4.3.46-r5 &&\
apk add --no-cache openssl=1.0.2k-r0 &&\
apk add --no-cache nodejs

# install npm ( in separate dir due to docker cache)
ADD package.json /tmp/npm_inst/package.json
RUN cd /tmp/npm_inst &&\
npm install &&\
mkdir -p /tmp/app &&\
mv /tmp/npm_inst/node_modules /tmp/app/

# build and publish application
ADD . /tmp/app
RUN cd /tmp/app &&\
npm run build:aot &&\
mv ./dist/* /usr/share/nginx/html/

# clean
RUN rm -Rf /tmp/npm_inst &&\
rm -Rf /tmp/app &&\
rm -Rf /root/.npm &&\
apk del nodejs

# this is for virtual host purposes
EXPOSE 80
85 changes: 85 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -367,6 +367,91 @@ import * as _ from 'lodash';

# Deployment

## Docker

To run project you only need host machine with **operationg system** with installed **git** (to clone this repo)
and [docker](https://www.docker.com/) and thats all - any other software is non needed
(other software like node.js etc. will be automatically downloaded and installed inside docker container during build step based on dockerfile).

### Install docker

#### MacOs:

`brew cask install docker`

And run docker by Mac bottom menu> launchpad > docker (on first run docker will ask you about password)

#### Ubuntu:

```
sudo apt-get update
sudo apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys 58118E89F3A912897C070ADBF76221572C52609D
sudo apt-add-repository 'deb https://apt.dockerproject.org/repo ubuntu-xenial main'
sudo apt-get update
apt-cache policy docker-engine
sudo apt-get install -y docker-engine
sudo systemctl status docker # test: shoud be ‘active’
```
And add your user to docker group (to avoid `sudo` before using `docker` command in future):
```
sudo usermod -aG docker $(whoami)
```
and lougout and login again.

### Build image

Because node.js is big memory consumer you need 1-2GB RAM or virtual memory to build docker image
(it was successfully tested on machine with 512MB RAM + 2GB virtual memory - building process take 7min)

Go to main project folder. To build big (~280MB) image which has cached data and is able to **FAST** rebuild
(this is good for testing or staging environment) type:

`docker build -t angular-starter .`

To build **SMALL** (~20MB) image without cache (so each rebuild will take the same amount of time as first build)
(this is good for production environment) type:

`docker build --squash="true" -t angular-starter .`

The **angular-starter** name used in above commands is only example image name.
To remove intermediate images created by docker on build process, type:

`docker rmi -f $(docker images -f "dangling=true" -q)`

### Run image

To run created docker image on [localhost:8080](localhost:8080) type (parameter `-p 8080:80` is host:container port mapping)

`docker run --name angular-starter -p 8080:80 angular-starter &`

And that's all, you can open browser and go to [localhost:8080](localhost:8080).

### Run image on sub-domain

If you wan't run image as virtual-host on sub-domain you must setup [proxy](https://github.com/jwilder/nginx-proxy)
. You should install proxy and set sub-domain in this way:

```
docker pull jwilder/nginx-proxy:alpine
docker run -d -p 80:80 --name nginx-proxy -v /var/run/docker.sock:/tmp/docker.sock:ro jwilder/nginx-proxy:alpine
```

And in your `/etc/hosts` file (linux) add line: `127.0.0.1 angular-starter.your-domain.com` or in yor hosting add
folowwing DNS record (wildchar `*` is handy because when you add new sub-domain in future, you don't need touch/add any DNS record)

```
Type: CNAME
Hostname: *.your-domain.com
Direct to: your-domain.com
TTL(sec): 43200
```

And now you are ready to run image on subdomain by:

```
docker run -e VIRTUAL_HOST=angular-starter.your-domain.com --name angular-starter angular-starter &
```

## Netlify

You can quickly create a free site to get started using this
Expand Down

0 comments on commit c3fd2f3

Please sign in to comment.