Deploy Angular6 project to docker

Question

I want to deploy my angular6 project to docker but I have a problem. I created Dockerfile:

# stage 1
    FROM node:latest as node
    WORKDIR /app
    COPY . .
    RUN npm install
    RUN npm run build --prod
    RUN npm install -g @angular/cli

    # stage 2
    FROM nginx:alpine
    COPY --from=node /app/dist/ClientAp /usr/share/nginx/html

And when I did it I wrote :

docker build -t cltapp .

And run:

docker run --rm -d -p 4200:4200 cltapp

I don't have error but when I try open my application localhost:4200/ I have blank page. I thought, that it was a problem with angular cli but I added this line RUN npm install -g @angular/cli to my dockerfile but it didn't help me. If you can please help me. Thank's for your answer.

I'm not a docker specialist, but that runs the nginx container, right? I don't think nginx runs on port 4200 by default. And installing angular cli globally, after you've already used the local install to build the app, does seem completely useless to me. — JB Nizet
– JB Nizet, Commented Sep 15, 2018 at 17:42

Andriy · Accepted Answer · 2018-09-15 18:51:51Z

2

Usually, after running ng build --prod, index.html will be placed directly under dist forlder (dist/index.html). I assume that this is you case, and not dist/ClientAp/index.html. You can check it by running ng build --prod in your project and inspecting created dist folder.

--prod flag should be placed within your package.json => scripts section:

"scripts": {
  ...
  "build": "ng build --prod",
  ...
}

if it is not there and you want to add it after npm run build, it should be added after --, like:

npm run build -- --prod

so, try this:

Dockerfile

# stage 1
FROM node:alpine as node

# Create app directory
WORKDIR /usr/src/app

# Bundle app source (make sure you have package.json copied)
COPY . .

# install dependencies, @angular cli will be installed here as well
RUN npm install

# build your project into dist folder
RUN npm run build

# stage 2
FROM nginx:alpine

WORKDIR /usr/share/nginx/html
COPY --from=node /usr/src/app/dist/ .

Nginx will run at port 80. If you want to use port 4200, run this:

docker run --rm -d -p 4200:80 cltapp

Now, you should see you angular app at localhost:4200

My code is in a dry run mode (I did not test it), so please test it and modify if needed.

Sources:

edited Sep 15, 2018 at 18:51

answered Sep 15, 2018 at 18:46

Andriy

15.6k4 gold badges49 silver badges53 bronze badges

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

5 Comments

luksen1991 Over a year ago

I got :

Welcome to nginx!  If you see this page, the nginx web server is successfully installed and working. Further configuration is required.  For online documentation and support please refer to nginx.org. Commercial support is available at nginx.com.  Thank you for using nginx.

. Where I should do that?

luksen1991 Over a year ago

Where I should do that?

Andriy Over a year ago

probably your index.html was not copied. Did you check where it is located exactly after running npm run build --prod? is it dist/index.html?

luksen1991 Over a year ago

In dist/ClientAp/index.html

luksen1991 Over a year ago

I change: COPY --from=node /usr/src/app/dist/ . for this zCOPY --from=node /usr/src/app/dist/ClientAp .` works fine thank you very much :)

Collectives™ on Stack Overflow

Deploy Angular6 project to docker

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related