千家信息网

使用Docker部署Angular项目的方法步骤

发表于:2024-09-28 作者:千家信息网编辑
千家信息网最后更新 2024年09月28日,Docker 部署 Angular 项目有两种方法,一种是服务端渲染,这个官方文档已有说明,另一种就是使用 node 镜像编译后放入 web 服务器。由于在 node 环境,所以使用 express
千家信息网最后更新 2024年09月28日使用Docker部署Angular项目的方法步骤

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.htmlapp.all('*', function (req, res) {  res.sendfile(config.root + '/index.html');});app.listen(config.port, () => {  console.log("running……");})

创建 Dockerfile

FROM node:13.3.0-alpine3.10ENV PORT=4200 \  NODE_ENV=production# 安装express和angular/cliRUN npm install express@4.17.1 -g \  && npm install -g @angular/cli# 创建app目录RUN mkdir -p /app# 复制代码到 App 目录COPY . /appWORKDIR /app# 安装依赖,构建程序,这里由于我需要反向代理到子目录,所以添加了base-href参数RUN npm install && ng build --base-href /manage/ --prodEXPOSE ${PORT}ENTRYPOINT ["node", "/app/server.js"]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

0