Method steps for deploying an Angular project using Docker

  • 2021-07-18 09:30:43
  • OfStack

There are two ways for Docker to deploy Angular projects, one is server-side rendering, which has been explained in this official document, and the other is to compile node images and put them into web servers. Because it is in node environment, it is most convenient to use express.

Create server. js


const express = require('express');

const app = express();
const config = {
  root: __dirname + '/dist',
  port: process.env.PORT || 4200
};

// Static resource 
app.use('/', express.static(config.root));

// All routes go to index.html
app.all('*', function (req, res) {
  res.sendfile(config.root + '/index.html');
});
app.listen(config.port, () => {
  console.log("running ... ");
})

Create Dockerfile


FROM node:13.3.0-alpine3.10

ENV PORT=4200 \
  NODE_ENV=production

#  Installation express And angular/cli
RUN npm install express@4.17.1 -g \
  && npm install -g @angular/cli
#  Create app Directory 
RUN mkdir -p /app
#  Copy code to  App  Directory 
COPY . /app
WORKDIR /app

#  Install dependencies , Builder , Here, because I need to reverse proxy to subdirectories, I added base-href Parameter 
RUN npm install && ng build --base-href /manage/ --prod

EXPOSE ${PORT}

ENTRYPOINT ["node", "/app/server.js"]


Related articles: