13

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:

Community
  • 1
  • 1
stop
  • 133
  • 1
  • 1
  • 4
  • 2
    Generally the docker container is purely the web services. You mount a volume when you run the container which links your code into the web root in the container. For this reason, docker and AngularJS are mutually exclusive and you can use any generic Apache or nginx docker container to run your application – scrowler Nov 20 '16 at 22:57

4 Answers4

18

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

adebasi
  • 3,535
  • 2
  • 19
  • 33
  • what is the -t for? – Tal Avissar Nov 21 '16 at 07:20
  • 2
    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](https://docs.docker.com/engine/reference/commandline/build/) – adebasi Nov 21 '16 at 07:39
  • 1
    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 Jun 29 '17 at 21:16
  • 1
    Also, you might have trouble serving from port 80, depending on your OS, since it's reserved. – gred Jun 29 '17 at 21:18
  • 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. – geoidesic Apr 12 '18 at 14:35
  • `EXPOSE 80` is not necessary. Exposing ports in Dockerfiles is just a hint that the container listens on that port at runtime. – adebasi Apr 12 '18 at 16:35
8

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;"]
ΩmegaMan
  • 29,542
  • 12
  • 100
  • 122
Hedge
  • 16,142
  • 42
  • 141
  • 246
1

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.
Janshair Khan
  • 2,577
  • 4
  • 20
  • 44
0

Get your app-name from the package-lock.json file of you angular project

# Stage 1
FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build  --prod
# Stage 2
FROM nginx:alpine
COPY --from=node /app/dist/{app-name} /usr/share/nginx/html
KARTIKEY MISHRA
  • 1
  • 3