How to create a Docker container of an AngularJS app?

angularjs nginx docker containers dockerfile

25,722

Solution 1

First of all, follow this best practice guide to build your angular app structure. The index.html should be placed in the root folder. I am not sure if the following steps will work, if it's not there.

To use a nginx, you can follow this small tutorial: Dockerized Angular app with nginx

1.Create a Dockerfile in the root folder of your app (next to your index.html)

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

2.Run docker build -t my-angular-app . in the folder of your Dockerfile.

3.docker run -p 80:80 -d my-angular-app and then you can access your app http://localhost

Solution 2

building on @adebasi answer I want to highlight this Dockerfile to be used with current Angular CLI application.

It uses Dockers' multi-stage build feature introduced in 17.05. In Step 1 the Node container is only used to create a build. The final image will use Nginx and statically deliver the built files.

### STAGE 1: Build ###    
# We label our stage as 'builder'
FROM node:8-alpine as builder

COPY package.json package-lock.json ./

RUN npm set progress=false && npm config set depth 0 && npm cache clean --force

## Storing node modules on a separate layer will prevent 
## unnecessary npm installs at each build
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Build the angular app in production mode and store the artifacts in dist folder
RUN $(npm bin)/ng build --prod --build-optimizer


### STAGE 2: Setup ###

FROM nginx:1.13.3-alpine

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From 'builder' stage copy over the artifacts in dist folder 
## to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html

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

Solution 3

Generally,

Docker is used to dockerize applications. Now an application merely does not consists of JavaScript only (as AngularJS is a JS framework) unless you choose a back end framework like Node, ASP.NET Core, Python etc. So if you have only straightforward HTML application, use a reversed-proxy or a web server container as mentioned by Robbie. For a simple case (Nginx example):

Download the Nginx Docker image from the Hub.
Use Volumes or create your own image to hold your configurations
Expose a port from the container to the host.

25,722

Author by

Admin

Updated on December 09, 2020

Comments

Admin over 3 years
I have an AngularJS app that has this structure:
```
app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html
```
How do I go about creating my own image out of this and running it on a container? I've tried running it with no success with a Dockerfile and I'm relatively new to Docker so apologies if this is simple. I just want to run it on a http server (using nginx perhaps?)

I've tried these for help, to no success:
Tal Avissar over 7 years

what is the -t for?
adebasi over 7 years

the parameter -t my-angular-app creates a tag for the created image. So you can reference my-angular-app in the docker run command. For more details have a look at the docker docs: docker build docs
gred almost 7 years

The COPY command is incorrect, unless you want to serve from /dist. The tutorial that you link to has it correct: COPY dist /usr/share/nginx/html
gred almost 7 years

Also, you might have trouble serving from port 80, depending on your OS, since it's reserved.
geoidesic about 6 years

Why is EXPOSE 80 necessary in this child Dockerfile? It is not required in the base Dockerfile from nginx which runs on port 80 without needing EXPOSE 80, so it seems strange that it is required in the child.
adebasi about 6 years

EXPOSE 80 is not necessary. Exposing ports in Dockerfiles is just a hint that the container listens on that port at runtime.
lrkwz about 6 years

I guest this is for Angular2
Hedge about 6 years

@lrkwz Yes, it is for Angular2
fulvio almost 6 years

@Hedge Yeah, so the question was for AngularJS but thank you for this too.