CODEWITHSUNDEEP
node.jsangulardockernginxdockerfile
Ghost Of Winterfell
Ghost Of Winterfell

Reputation: 186

Run Angular Universal Application on Dockerfille

Hello everyone I am pretty new to Docker. I have been trying to serve an Angular Universal App in a Container for days now but to no avail. Here's the Dockerfile

FROM node:13.3.0 AS compile-image

WORKDIR /opt/ng
COPY package.json ./

ENV PATH="./node_modules/.bin:$PATH"

COPY . ./

RUN npm install @angular/cli && npm install && npm run build

RUN npm run build:ssr

FROM nginx:1.17.1-alpine
COPY --from=compile-image /opt/ng/dist/appname/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

FROM node:13.3.0-alpine AS ssr-server
COPY --from=compile-image /opt/ng/dist /opt/ng/dist/
COPY package.json /opt/ng/package.json
WORKDIR /opt/ng
EXPOSE 4000


CMD ["npm", "run", "serve:ssr"]

Here's my package.json

  "scripts": {
    "ng": "ng",
     "start-dev": "ng serve --proxy-config proxy.conf.js",
    "test": "ng test",
    "lint": "ng lint",
    "lint:fix": "ng lint --fix true",
    "e2e": "ng e2e",
    "dev:ssr": "ng run appname:serve-ssr",
    "build:ssr": "ng build --prod && ng run app:server:production",
    "serve:ssr": "node dist/appname/server/main.js",
    "lint:build:serve": "npm run lint:fix && npm run build:ssr && npm run serve:ssr",
    "prerender": "ng run appname:prerender"
  },

Upvotes: 1

Views: 1073

Answers (1)

Juano7894
Juano7894

Reputation: 830

Hello an option you could do is the following:

1- Create a new angular app with the cli

ng new test-1

2- Then Install Angular Universal

ng add @nguniversal/express-engine

3- Create the Dockerfile in order to generate the container image for test-1

FROM node:14.18.1-alpine AS test-1
WORKDIR /app
COPY ./package.json /app/
RUN npm install
COPY . /app/
EXPOSE 4000
RUN npm run build:ssr
CMD npm run serve:ssr

In there you are basically copying the package.json file into the app directory in the container, then you run "npm install" to install dependencies, then copying everything to the app directory, expose the port 4000 in the container, then run and serve.

for build run

docker build -t test-1 .

4- Then you can create a nginx image with a custom nginx.conf file.

Dockerfile for nginx image

FROM nginx:1.16.1 AS client-browser
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

nginx.conf

upstream angular-test-1 {
  server test-1:4000;
}

server {
  listen 8080;
  location / {
    proxy_pass http://angular-test-1;
  }
}

Well in there you are creating a upstream and with that you can configure the proxy_pass. So every communication that you get on 8080 will ve redirected by ningx to 4000.

for build run:

docker build -t test-1-nginx .

5- So after that you can create the following docker-compose.yml file

networks:
  backend:
    driver: bridge
services:
  test-1:
    image: test-1
    environment:
      - PORT=4000
    networks:
      - backend
  nginx:
    image: test-1-nginx
    ports:
      - '8080:8080'
    networks: 
      - backend
    depends_on:
      - test-1

Hope is usefull to somebody

PD: Well you could directly create the nginx container on the docker-compose.yml avoiding the step to manually create the image, and with the volume option you could send the nginx.conf file.

Upvotes: 1

Related Questions