第一部分,打包项目,主要参考来自:https://segmentfault.com/a/1190000007921675
我们在使用Angular2项目时,直接使用官网提供的基础配置文件,在NodeJS下面就可以生成一个新的ng2项目,但是这样非常不便利,每次都要新建目录,复制配置文件,使用Node命令安装支持库,最后才是写代码。Angular-cli就是用来简化这一操作的,而且官方配置文件不包含打包命令,对于新手来说,对System打包和webpack打包都不熟悉的情况下,使用Angular-cli能够非常方便的生存一样ng2项目,打包ng2项目,集中在编写项目代码上,省略繁琐的配置过程。
操作环境:windows 10 nodeJs版本: v6.11.1 npm版本:3.10.10 在node命令行中进行
1. 安装Angular Cli : npm install -g angular-cli # -g表示全局安装
2.使用Angular Cli初始化ng2项目,创建名为“my-ng2-app”的项目: ng new my-ng2-app
3.如果要把现有的目录转化成ng2目录,运行如下的命令:
mkdir ng2-test
cd ng2-test
ng init
4.运行项目: ng serve 或者 npm start,
5. 访问项目: http://localhost:4200 默认 是 4200端口
6.如果想 修改端口: ng serve -p 3000 <假设我行修改成3000端口>
7.编译项目: ng build <如果想编译成静态文件,然后发布到linux上运行,需要先进行编译>
第二部分: 部署静态页倒nginx页面 惨要参考来自:http://blog.csdn.net/shaoyangdd/article/details/50321829
操作的前提:linux运行环境
8.安装nginx运行环境 参考至:https://www.cnblogs.com/yingsong/p/5950452.html
系统:centos nginx版本:nginx-1.9.9.tar.gz
8.1 解压 nginx-1.9.9.tar.gz 在local目录 tar -zxvf nginx-1.9.9.tar.gz
8.2 安装必须要的支持软件: yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel // 主要是make gcc这些东西
8.3 安装PCRE,其作用是让 Ngnix 支持 Rewrite 功能。 使用yum源安装:yum -y install pcre*
8.4编译安装
- cd nginx-1.9.9
- ./configure --prefix=/usr/local/nginx --with-http_stub_status_module
这里也可以添加其他模块,例如:rewrit模块(--with-pcre) --prefix指定安装的目录
--with-http_stub_status_module启用状态统计
- 如果是使用wget方式则configure时,需要指定pcre
./configure --prefix=/usr/local/nginx \--with-http_ssl_module --with-http_spdy_module \--with-http_stub_status_module --with-pcre - make && make install
- 检测配置或安装是否成功:/usr/local/nginx/sbin/nginx -t
-
如果出现下列信息,则标识安装或配置成功
the configuration file /usr/local/nginx/conf/nginx.conf syntax is o
the configuration file /usr/local/nginx/conf/nginx.conf was tested successfully
- 启动,停止nginx服务
12
#/usr/local/nginx/sbin/nginx
#/usr/local/nginx/sbin/nginx -s stop
注意: 如果 你当前所在目录 是 项目目录 则执行执行如上的语句 即可启停 nginx 如果进入倒对应的目录 反而启动不成功其次,注意端口:nginx默认监听的端口是 80 所以启动后访问 直接填写IP地址即可访问
- nginx启动好后启动tomcat,此时输入http://主机ip地址即可看到“My web!”
- 在/etc/profile 添加nginx的path全局环境变量,则可以直接使用nginx命令
9.将编译后好的目录 提交至 linux 某个目录下(shellx5,xftp5搭配使用),如: /home/tonglunXXX/dist/
10.进入nginx的安装目录:更改配置文件/usr/local/nginx/conf 下的nginx.conf,如下更改:
listen 80;
server_name localhost;
# root html;
# index index.html index.htm;
root /home/myapp/navi; // 目录
index PersonalNavi.html; // 首页
}
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}