All we need is an easy explanation of the problem, so here it is.
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:
- AngularJS and NodeJS app in Docker
- Dockerize your Angular NodeJS application
How to solve :
I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.
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
docker build -t my-angular-app . in the folder of your Dockerfile.
docker run -p 80:80 -d my-angular-app and then you can access your app http://localhost
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;"]
- 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.
Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂