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"]