频道导航

【Angular2项目在linux环境构建与部署】--(2)项目部署

2020-04-28 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了【Angular2项目在linux环境构建与部署】--(2)项目部署，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

上一篇我们已经将Angular2项目的环境搭建完毕，接下来开展部署工作。

首先从svn上拉取前端最新的代码，这里以我们的云平台ITOO为例，ITOO前端的整个文件夹是ITOO-FrontEnd，deploy文件是使用gulp对ITOO-FrontEnd中的html和css，js文件进行了压缩。当然gulp也不仅仅只有压缩的功能，对于gulp的学习以后小编将会在接下来的博客中做详细的分享。

1. 在/var/lib下建立文件夹 project放置自己deploy文件和ITOO-FrontEnd. ps：如果没有使用gulp对前端文件压缩，关于deploy文件操作和gulp的安装这几步可以省去。

@H_404_26@

2. 全局安装gulp:cnpm install gulp -g
3. 定位到前端文件deploy下：下载node库： cnpm install

4. 测试gulp是否安装成功，gulp testImagemin . 这里的testImagemin是前端的gulp配置文件gulpfile.json中建立的gulp.task()中已经定义好的任务名。大家根据配置文件来写命令就好。

5.定位到我们未压缩的前端项目ITOO-FrontEnd下，下载node库。

6.下载angular项目中用到的组件库Primeng: cnpm install primeng@4.2.2

7.部署整个项目：ng build --env=prod --base-href ./

8.会看到在ITOO-FrontEnd文件夹下多了个同名文件，这边是我们部署后的文件，我们需要把部署好的发在与/usr/local/文件下，与Nginx同级文件目录

@H_404_26@

为了做一个区分，这里我们将部署好的项目更名为ITOO，另外因为访问需要将其放置在/usr/local/文件下。

@H_404_26@

9.配置Nginx 文件
@H_404_26@ 打开/usr/local/Nginx/conf/Nginx.conf文件

   gzip on;
   gzip_varyon;
   gzip_min_length 2000000;
   gzip_comp_level 5;
gzip_types text/plaintext/css application/json application/x-javascript text/xml application/xmlapplication/xml+RSS text/javascript application/javascript image/png image/jpeg application/octet-streamfont/woff2;

10.最后在浏览器中访问我们的服务器地址：192.168.22.186

至此Angular2 前端项目部署完成，感谢您的阅读。

原文链接：https://www.f2er.com/angularjs/145380.html