Angular 2 App Running on Nginx on Docker: A Simple Example

As far as the code is concerned, I'm assuming you have a project more or less like the one shown at angular2-webpack-starter

Build project for production

$ npm run build:prod

Write a simple Dockerfile

Save the following contents as a file called Dockerfile.

FROM nginx
COPY dist /usr/share/nginx/html
EXPOSE 80

Build the container

$ docker build -t my-angular-app .

You should see an output roughly like the following:

felipe:~/my-project$ docker build -t my-angular-app .
Sending build context to Docker daemon 144.3 MB
Step 1 : FROM nginx
 ---> 0d409d33b27e
Step 2 : COPY dist /usr/share/nginx/html
 ---> Using cache
 ---> 37e1a5902763
Step 3 : EXPOSE 80
 ---> Using cache
 ---> 2d64957c6994
Successfully built 2d64957c6994

Run the created container on your local machine

After running, stop the container by typing CTRL+C

$ docker run -p 80:80 -it my-angular-app

Navigate to localhost:80

Your app should be running.

(Optional): Run your container in the background

You can also run your container in the background. Docker calls this detached mode.

Just replace this:

$ docker run -p 80:80 -it my-angular-app

with this:

$ docker run -p 80:80 -dit my-angular-app
9cc87276ac44fa296d5a173cdd12c85b496145ff460e4869713f0df9882c8975

(Optional): SSH to your container

Once your container is running, you can SSH to it:

The string 9cc refers to the first characters of you container id; yours will be different. See the output your got when you ran docker run using the -d modifier (a few steps above)

$ docker exec -it 9cc /bin/bash
root@9cc87276ac44:/#