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:

Improve this question
1
  • 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 Commented Nov 20, 2016 at 22:57

4 Answers 4

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

what is the -t for?
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
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
Also, you might have trouble serving from port 80, depending on your OS, since it's reserved.
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.
|
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;"]
Improve this answer

3 Comments

I guest this is for Angular2
@lrkwz Yes, it is for Angular2
@Hedge Yeah, so the question was for AngularJS but thank you for this too.
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.
Improve this answer

Comments

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
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.