使用 Docker 部署 Angular 專案

Donjan發表於2019-12-19
DockerAngular

Docker部署Angular專案有兩種方法，一種是服務端渲染，這個官方文件已有說明，另一種就是使用node映象編譯後放入web伺服器。由於在node環境，所以使用express最為便捷了。

建立server.js

const express = require('express');

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

//靜態資源
app.use('/', express.static(config.root));

//所有路由都轉到index.html
app.all('*', function (req, res) {
    res.sendfile(config.root + '/index.html');
});
app.listen(config.port, () => {
    console.log("running……");
})

建立Dockerfile

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
# 建立app目錄
RUN mkdir -p /app
# 複製程式碼到 App 目錄
COPY . /app
WORKDIR /app

# 安裝依賴,構建程式,這裡由於我需要反向代理到子目錄，所以新增了base-href引數
RUN npm install && ng build --base-href /manage/ --prod

EXPOSE ${PORT}

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

** 部落格：《PHP 微服務練兵》系列教程

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章