CODEWITHSUNDEEP
angulardockerdockerfile
luksen1991
luksen1991

Reputation: 85

Deploy Angular6 project to docker

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.

Upvotes: 1

Views: 778

Answers (1)

Andriy
Andriy

Reputation: 15442

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:

Upvotes: 2

Related Questions