Angular4项目nginx服务器部署

Angular4项目nginx服务器部署

1.  Nginx相关操作命令：

Ø  ubuntu安装：

$ sudo apt-get install nginx 

安装完成即可，在/usr/sbin/目录下是nginx命令所在目录，在/etc/nginx/目录下是nginx所有的配置文件，nginx.conf文件用于配置nginx服务器以及负载均衡等信息；

Ø  查看nginx进程是否启动：

$ ps -ef|grep nginx

Ø  启动nginx：

$ nginx

Ø  停止nginx服务命令：

$ nginx -s stop
or
$ nginx -s quit

Ø  命令帮助：

$ nginx -h

Ø  验证配置文件：

nginx -t

Ø  重新启动nginx：

nginx -s reopen

Ø  重新加载配合着文件：

nginx -s reload

2.  打包angular项目

首先确保angular环境配置，

Ø  安装nodejs和npm：

新版的nodejs已经集成了npm，所以npm也一并安装好了，检查安装是否成功

node -v
npm -v

Ø  安装typescript和typings:

npm install -g typescript typings

因为@angular/cli是用typescript写的，所以要先装这两个，检查是否安装成功

tsc -v

Ø  安装@angular/cli：

npm install -g @angular/cli@latest

检查是否安装成功

ng version

注意：如果之前安装失败，最好在安装angular-cli之前卸载干净，如下：

npm uninstall -g @angular/cli
npm cache clean

将开发完成的angular项目生成dist打包文件

Ø  新建项目：

ng new newProj

Ø  安装或更新依赖包：在package.json的目录下

npm install
or
npm update

Ø  项目启动：在package.json的目录下，

npm start
or
npm run start
or
ng server

这两个默认端口都是4200，也可以修改默认端口：ng serve -p 3000

ng serve -p 3000

Ø  项目启动无报错，最后打包：

npm run build:prod

无任何报错打包成功，在项目目录下生成dist文件，并将生成的dist文件发布到服务器上或本地，dist文件用来配置到nginx.conf的server模块的root中。

注意：如果项目启动没有问题，但是dist文件打包出错，可能是angular的依赖包版本有问题，有的依赖包高版本有bug，可以尝试清空项目中的node_modules，然后用npm install重新安装，提醒随时做好备份。

接下来配置nginx.conf文件

Ø  打开安装目录下的etc/nginx/nginx.conf文件，在http节点下添加server节点，最重要的是server{}这部分就代表每一个web站点。如下是漏洞录入系统前端的nginx配置（详细说明见后）：

1.   server {  

2.      listen      5656;  

3.      server_name lo