精华内容
下载资源
问答
  • 主要介绍了使用Docker部署Angular项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了Nginx中部署Angular项目遇到的坑巨坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Docker+Nginx部署Angular

    千次阅读 2018-04-09 15:52:51
    Docker+Nginx部署Angular部署Angular生产环境之前,需要电脑已经安装docker。 添加Dockerfile 在已经完成的Angular项目的项目根目录下添加Dockerfile文件。 Dockerfile文件内容: FROM nginx:1.11-...

    Docker+Nginx部署Angular

    在部署Angular生产环境之前,需要电脑已经安装docker。

    添加Dockerfile

    在已经完成的Angular项目的项目根目录下添加Dockerfile文件。

    image

    Dockerfile文件内容:

    FROM nginx:1.11-1.11-alpine
    COPY index.html /usr/share/nginx/html/index.html
    EXPOSE 80
    CMD ["nginx", "-g", "daemon off;"]

    编译Angular

    ng build --prod

    此时会在项目目录下生成dist文件夹,里面是我们项目打包之后的文件。

    然后将Dockerfile文件复制到dist目录下,并修改。

    FROM nginx:1.11-1.11-alpine
    COPY . /usr/share/nginx/html/index.html
    EXPOSE 80
    CMD ["nginx", "-g", "daemon off;"]
    • 然后进入dist目录下
    cd dist
    • 创建docker镜像
    docker build -t angular5
    • 查看当前所有镜像和运行的容器
    docker images
    
    # 显示结果
    REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
    nginx               latest              c5c4e8fa2cf7        5 days ago          109MB
    angular5            latest              3c493d859707        10 days ago         55.6MB
    nginx               1.11-alpine         bedece1f06cc        12 months ago       54.3MB
    
    docker ps 
    # 显示结果
    CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
    • 运行镜像
      端口不要和本地端口冲突,比如如果8082被使用,请更换
    docker run -d --name demo1 -p 8082:80 angular5
    # 成功结果
    CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
    bddc01ddf0a3        nginx               "nginx -g 'daemon of…"   1 minutes ago      Up 3 seconds       0.0.0.0:8082->80/tcp   demo1
    

    浏览器访问:127.0.0.1:8082即可访问。

    • 停止运行
    docker stop bddc01ddf0a3 # 这个是id可以使用前几位,或者使用NAMES demo1
    • 启动一个容器
    docker ps -a #查看所有容器
    docker start bddc01ddf0a3 #或者名字
    展开全文
  • 说一说如何在AWS上部署angular项目。EC2的服务器是linux 18.04的版本。

    AWS部署angular项目

    因为本学期课程的原因,有机会接触到AWS服务。在AWS上有很多强大的服务,但由于本人太菜只能使用一小部分的功能。
    在这里我就说一说如何在AWS上部署angular项目。EC2的服务器是linux 18.04的版本。

    步骤

    1. 首先到tomcat官网上下载tomcat压缩包,请选择tar.gz模式,再利用winSCP传到公网实例上。apache-tomcat-8.5.54下载地址
      注意下载的是tar.gz格式的压缩包。
    2. 之后连接公网实例,进入相应的目录下采用tar zxvf xxx.tar.gz,解压tomcat文件。
    3. 之后去在环境中配置java环境。输入以下命令等待jdk环境进行下载安装。
    //二选一
    sudo apt install openjdk-11-jre-headless
    sudo apt install openjdk-8-jre-headless
    
    1. 在命令行进入本地angular项目,执行以下命令构建项目。
    ng -build
    

    构建了项目之后,我们会发现项目目录下新增加了dist文件夹。该文件夹就是我们的构建的项目了。

    1. 我们需要对构建的项目之下的文件进行修改。打开dist文件夹下的index.html文件。将head范围下的base标签的href属性修改为“./”。
      index.html文件head部分
    2. 利用WinSCP连接到我们的公网实例,将我们的dist文件夹上传到服务器上的tomcat/webapps目录之下。
    3. 连接公网实例,进入到tomcat/bin目录,输入./startup.sh启动tomcat服务。现在我们就能通过tomcat访问到我们的项目了。
    4. 注意要设置好公网实例安全组的入栈规则,把端口8080,任意来源的规则加入到其中。不然的话会无法访问项目。

    到这里我们的angular项目就部署成功了。当然这样的方法也可以用来部署其它的web项目,比较简单快捷。
    如果有什么问题的话欢迎一起讨论。

    展开全文
  • angular+nginx 打包部署压缩优化两步曲前言angular打包瘦身优化(从根于上解决问题)前期措施后期措施使用压缩分块打包命令针对angular打包内存溢出的使用瘦身小结使用Nginx部署Angular压缩优化(进一步压缩) ...

    前言

    本文通过(angular打包瘦身优化)及(Nginx部署压缩)两个方面解决nginx部署angular访问太慢的问题,阅读时间大概20分钟。

    angular打包瘦身优化(从根于上解决问题)

    据不同的项目情况,此处分两种情况进行处理。

    1.前期措施 是指项目框架设计搭建阶段,并没有存在业务代码开发

    2.后期措施 是指已经完全开发完成!

    前期措施

    如果你使用TypeScript开发 请使用Tslint,它可以很好的约束和规范开发人员的一些编码习惯,遵守统一约定。提高代码可读性,可维护性和功能性错误。这个和打包优化有什么关系? 实际开发中会遇到很多语法性错误,那webpage打包的时候就会内存溢出。导致一些官方内置的压缩策略将会失效!

    根据系统业务模型,抽离出可复用的组件,模板。减少重复性的组件存在

    后期措施

    使用工具查看依赖树,清除多余依赖

    如果你希望你的应用初次加载不影响用户体验,同时又不寄望于用户的网速时,通过分析工具对引用类库进行分析,显得尤为重要。

    安装工具

    第一步 安装依赖

    npm install --save-dev webpack-bundle-analyzer
    

    第二步 配置package.json

    // 添加script:"bundle-report": "webpack-bundle-analyzer dist/stats.json"
    "scripts": {
    ...
      "bundle-report": "webpack-bundle-analyzer dist/stats.json",
    ...
    },
    
    

    第三步 打包 注意输出的统计信息文件名称,与第二步对应

    ng build --prod --stats-json
    

    第四步 启动

    npm run bundle-report
    

    如图所示

    在这里插入图片描述

    使用压缩分块打包命令

    针对angular6以下的版本使用此命令进行打包

    ng build --prod --configuration=prod --vendorChunk=true --aot=true --commonChunk=true --optimization=true --base-href ./
    

    针对angular打包内存溢出的使用

    1.安装 increase-memory-limit 增加node内存限制工具

    npm i increase-memory-limit
    npm i cross-env 
    
    1. 配置package.json
    
    // LIMIT 是指定node 内存大小
    "scripts": {
        "fix-memory-limit": "cross-env LIMIT=8000 increase-memory-limit"
      }
     
    
    1. 执行一次 (只需要执行一次即可) 然后正常编译项目即可 (使用 tslink,规范语法可以很大程度上避免此问题)
    npm run fix-memory-limit
    

    瘦身小结

    常用类库的瘦身小结:

    • moment.js,注意locale文件,可以只保留zh-cn,剔除其它本土化文件;(可瘦身100-200k)

    • echarts,注意只打包只用到的图表;(视情况而定,一般可瘦身200-300k)

    • 只选择一个组件库,比如ng-zorro和ngx-bootstrap,尽量只选其一;

    • webgis应用,如果功能较简单情况,可使用轻量的类库,如leaflet;

    使用Nginx部署Angular压缩优化(进一步压缩)

    打开nginx配置 nginx.conf文件 一般在nginx安装目录 conf/nginx.conf

    将以下配置添加到你的配置即可

    http {
        gzip  on;
    	gzip_min_length 1k;
    	gzip_buffers 4 16k;
    	gzip_http_version 1.0;
    	gzip_comp_level 5;
    	gzip_types text/plain application/javascript application/css  text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    	gzip_vary off;
    	gzip_disable "MSIE [1-6]\.";
    
    ....
    }
    
    
    

    这时候快去试试吧 访问速度 嗖嗖嗖

    点击链接加入群聊 【Cordova/Angular/Ionic/ 中文社区】群文件内有免费全集angular教程

    进入方式点击连接

    https://jq.qq.com/?_wv=1027&k=rk6cVCiN

    在这里插入图片描述

    展开全文
  • 主要介绍了使用 Github Actions 自动部署 Angular 应用到 Github Pages,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 在 nginx 中部署 angular 应用

    万次阅读 2017-10-15 22:19:18
    最近使用Angular做了第一个应用,但是网上的教程大多是教如何开发,部署相对较少,所以这里就简单记录一下如何在nginx中部署Angular应用。 注:Angular应用可以编译成静态页面,然后部署在任何 web 服务器上,这里...

    最近使用Angular做了第一个应用,但是网上的教程大多是教如何开发,部署相对较少,所以这里就简单记录一下如何在nginx中部署Angular应用。

    注:Angular应用可以编译成静态页面,然后部署在任何 web 服务器上,这里仅仅是选择nginx而已,同时编译后的文件其实就仅仅是静态文件而已,与其它 html 文件本质上无异。

    一、编译

    前提: 请确保@angular/cli已经安装

    在项目主目录下输入以下命令:

    ng build
    

    成功则输入类似于下面的信息:

    Date: 2017-10-14T08:19:18.595Z
    Hash: aa580b91f10a49a65d87
    Time: 28823ms
    chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
    chunk {main} main.bundle.js, main.bundle.js.map (main) 55.9 kB {vendor} [initial] [rendered]
    chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 217 kB {inline} [initial] [rendered]
    chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 163 kB {inline} [initial] [rendered]
    chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.74 MB [initial] [rendered]   
    

    并生成了新的目录dist及其下的子文件/目录,此时则成功将应用编译成静态资源。

    二、部署

    原则上,您可以将这些资源拷贝到任何项目中,比如JavaWebNodeJs等项目中,它们同样的可以运行。

    前提: 服务器已经安装nginx,并假设nginx安装目录为/usr/local/nginx

    nginx 的部分相关命令:

    • nginx : 启动服务
    • nginx -s stop : 先查出 nginx 进程 id,然后使用 kill 命令强制杀掉进程
    • nginx -s quit : 等待 nginx 进程处理任务完毕,然后再进行停止
    • nginx -s reload : 重启服务
    • ps aux|grep nginx : 查看 nginx 进程

    1) 准备源文件

    拷贝项目编译后的dist目录下的所有文件到服务器上,比如拷贝至/usr/local/web/home

    2) 配置nginx

    sudo vi /usr/local/nginx/conf/nginx.conf
    

    修改http->server节点下 localhosterror_page 404的值如下:

    location / {
        # root   html;
        # index  index.html index.htm;
        root /usr/local/web/home;
        index index.html index.html;
    }
    
    #error_page  404              /404.html;
    error_page 404  =200              /;
    

    这里同时修改了404错误的跳转路径,是为了防止直接访问路由地址时出现404错误,文件全信息如下(端口被修改):

    #user  nobody;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';
    
        #access_log  logs/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
        #gzip  on;
    
        server {
            listen       8088;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                # root   html;
                # index  index.html index.htm;
                root /usr/local/web/home;
                index index.html index.html;
            }
    
            #error_page  404              /404.html;
            error_page 404  =200               /;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
    
            # proxy the PHP scripts to Apache listening on 127.0.0.1:80
            #
            #location ~ \.php$ {
            #    proxy_pass   http://127.0.0.1;
            #}
    
            # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
            #
            #location ~ \.php$ {
            #    root           html;
            #    fastcgi_pass   127.0.0.1:9000;
            #    fastcgi_index  index.php;
            #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
            #    include        fastcgi_params;
            #}
    
            # deny access to .htaccess files, if Apache's document root
            # concurs with nginx's one
            #
            #location ~ /\.ht {
            #    deny  all;
            #}
        }
    
    
        # another virtual host using mix of IP-, name-, and port-based configuration
        #
        #server {
        #    listen       8000;
        #    listen       somename:8080;
        #    server_name  somename  alias  another.alias;
    
        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}
    
    
        # HTTPS server
        #
        #server {
        #    listen       443 ssl;
        #    server_name  localhost;
    
        #    ssl_certificate      cert.pem;
        #    ssl_certificate_key  cert.key;
    
        #    ssl_session_cache    shared:SSL:1m;
        #    ssl_session_timeout  5m;
    
        #    ssl_ciphers  HIGH:!aNULL:!MD5;
        #    ssl_prefer_server_ciphers  on;
    
        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}
    
    }
    

    重启nginx

    sudo /usr/local/nginx/sbin/nginx -s reload
    

    浏览器访问即可。

    展开全文
  • 使用Docker部署Angular项目

    千次阅读 2019-12-19 09:38:36
    Docker部署Angular项目有两种方法,一种是服务端渲染,这个官方文档已有说明,另一种就是使用node镜像编译后放入web服务器。由于在node环境,所以使用express最为便捷了。 创建server.js const express = require('...
  • Published: August 08, 2017 by jeneser Categories: angular 1 Tags: angular 2 course 2 original 4 你将看到:快速部署angular应用到gi...
  • docker+nginx部署angular项目 环境: angular8.0+node12.14.0 本人项目的代码是在Windows上写的,而部署的环境是腾讯云服务器,所以需要先将项目打包,然后通过xftp上传到云服务器,再用docker拉取nginx并配置,然后...
  • Nginx 中部署 Angular 项目遇到的坑 巨坑 网上搜索Angular 项目编译后部署到 Nginx 中的方法,多数文章都介绍了需要在 Nginx 中的配置文件的 location 中特别指定跳转到首页来避免刷新导致404的问题,那么完整的...
  • angular应用部署Netlify is one of the best places to deploy an application or a website today. There is no need to manage a server, NGINX, certificates, or scaling due to high traffic. While it is ...
  • Nginx部署angular项目

    2021-04-04 15:31:59
    简单点。 下载Nginx。具体可查看我之前写过的nginx...在确认nginx配置成功的情况下。即你输入ip可看到   这个是重点。...angular部署很简单。 angular项目打包 ng build   打包完成会在根目录生...
  • Docker+Nginx部署Angular国际化i18n 在Angular项目中添加default.conf文件 default.conf 为了支持局域网,增加一个域名,即本地的局域网ip地址。 server { listen 80; server_name localhost; server_name 192....
  • 注意:直接yum安装的nginx有问题,不能直接安装,因为centos默认库里面没有...centos7下使用yum安装nginx并部署angular应用 1.进入root模式 安装过程涉及到文件写入,不废话直接进入root: su root Vi...
  • Docker部署Angular+Nginx+uwsgi+Django项目 0、前言 在开发部署时,容易遇到服务器环境不一致,多台服务重复部署操作过于繁杂的情况。这时可以采用Docker来提供一套统一的环境和帮助我们快速部署项目。 本篇文章...
  • Docker部署Angular应用

    2020-11-29 06:03:42
    写在最前面 首先是我的目录结构 你要新建的是Dockerfile和nginx-angular.conf Dockerfile 在 Angular 项目的根目录下面创建一个 Dockerfile 文件,内容如下 #设置一个基本的镜像,FROM 后面是镜像的名字,这个镜像...
  • nginx部署angular+javaweb

    2017-12-01 10:53:25
    如果你需要在服务器根目录下配置前端项目,同时要部署其他的后端项目,这个配置可以帮到你
  • centos7下使用yum安装nginx并部署angular应用 1.进入root模式 安装过程涉及到文件写入,不废话直接进入root: su root 2.安装依赖环境 nginx编译依赖gcc环境,其中的http模块使用pcre来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,665
精华内容 666
关键字:

部署angular