Docker 部署 Angular 項(xiàng)目有兩種方法,一種是服務(wù)端渲染,這個(gè)官方文檔已有說明,另一種就是使用 node 鏡像編譯后放入 web 服務(wù)器。由于在 node 環(huán)境,所以使用 express 最為便捷了。
const express = require('express');
const app = express();
const config = {
root: __dirname + '/dist',
port: process.env.PORT || 4200
};
//靜態(tài)資源
app.use('/', express.static(config.root));
//所有路由都轉(zhuǎn)到index.html
app.all('*', function (req, res) {
res.sendfile(config.root + '/index.html');
});
app.listen(config.port, () => {
console.log("running……");
})
FROM node:13.3.0-alpine3.10
ENV PORT=4200 \
NODE_ENV=production
# 安裝express和angular/cli
RUN npm install express@4.17.1 -g \
&& npm install -g @angular/cli
# 創(chuàng)建app目錄
RUN mkdir -p /app
# 復(fù)制代碼到 App 目錄
COPY . /app
WORKDIR /app
# 安裝依賴,構(gòu)建程序,這里由于我需要反向代理到子目錄,所以添加了base-href參數(shù)
RUN npm install && ng build --base-href /manage/ --prod
EXPOSE ${PORT}
ENTRYPOINT ["node", "/app/server.js"]