系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > server > anz > 详细页面

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

时间:2019-12-21来源:系统城作者:电脑系统城

Docker 部署 Angular 项目有两种方法,一种是服务端渲染,这个官方文档已有说明,另一种就是使用 node 镜像编译后放入 web 服务器。由于在 node 环境,所以使用 express 最为便捷了。

创建 server.js


 
  1. const express = require('express');
  2.  
  3. const app = express();
  4. const config = {
  5. root: __dirname + '/dist',
  6. port: process.env.PORT || 4200
  7. };
  8.  
  9. //静态资源
  10. app.use('/', express.static(config.root));
  11.  
  12. //所有路由都转到index.html
  13. app.all('*', function (req, res) {
  14. res.sendfile(config.root + '/index.html');
  15. });
  16. app.listen(config.port, () => {
  17. console.log("running……");
  18. })
  19.  

创建 Dockerfile


 
  1. FROM node:13.3.0-alpine3.10
  2.  
  3. ENV PORT=4200 \
  4. NODE_ENV=production
  5.  
  6. # 安装express和angular/cli
  7. RUN npm install express@4.17.1 -g \
  8. && npm install -g @angular/cli
  9. # 创建app目录
  10. RUN mkdir -p /app
  11. # 复制代码到 App 目录
  12. COPY . /app
  13. WORKDIR /app
  14.  
  15. # 安装依赖,构建程序,这里由于我需要反向代理到子目录,所以添加了base-href参数
  16. RUN npm install && ng build --base-href /manage/ --prod
  17.  
  18. EXPOSE ${PORT}
  19.  
  20. ENTRYPOINT ["node", "/app/server.js"]
  21.  

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

分享到:

相关信息

  • Nginx主机域名配置实现

    一、配置多个端口访问不同文件 二、配置不同域名访问不同文件 三、配置不同域名访问同个文件...

    2023-03-17

  • Nginx配置-日志格式配置方式

    上线了一个小的预约程序,配置通过Nginx进行访问入口,默认的日志是没有请求时间的,因此需要配置一下,将每一次的请求的访问响应时间记录出来,备查与优化使用....

    2023-03-17

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载