Jenkins+nginx实现angular前端代码的部署配置完成后，点击Test Configuration进行测试，

Jenkins打包angular项目

首先在Jenkins中安装NodeJS插件（系统管理 - 插件管理）：

安装NodeJS

依次选择：系统管理 - 全局工具配置 - NodeJS安装（选择需要的版本）：
配置项目构建环境 - 选择node环境

配置构建脚本 - 执行shell

npm install
npm run build
tar -czf web.tar.gz dist  //对文件进行压缩
rm -rf dist  // 删除压缩前的文件

安装配置Publish Over SSH

这里采用的是将打包后的文件通过SSH发送到服务器，首先安装Publish Over SSH插件：

安装完成后，配置服务器的IP、用户名和密码，依次点击系统管理 - 系统配置 - Publish Over SSH：

配置完成后，点击Test Configuration进行测试，显示Success则配置成功。
配置任务的构建后操作

首先在服务器创建相应的目录，此处用的是/usr/share/nginx/html
```
cd /usr/share/nginx/html
tar vxf web.tar.gz   // 解压文件
rm -rf web.tar.gz   // 删除压缩文件
```
配置完成后，执行任务，构建任务成功后查看服务器的对应目录：

到这里，Jenkins的工作就算完成了，接下来通过nginx部署angular项目。
通过docker安装nginx：
```
docker pull nginx
```
启动nginx容器，此处我使用的是8081端口(注意要放行该端口)：
```
docker run --name reina-nginx -d -p 8081:80 nginx
```
此时打开xxx.xxx.xxx.xxx(IP):8081显示默认内容，表示现在已经运行成功：
将docker容器中的配置文件拷贝到宿主服务器：
```
docker ps -a // 查看nginx容器的id
```
通过以下命令进入docker容器内部, (exit命令退出)：
```
sudo docker exec -it [container_id] /bin/bash  
```
nginx的配置文件在/etc/nginx目录；html资源文件在/usr/share/nginx/html目录；log文件在/var/log/nginx目录。

通过以下命令，将容器中的配置文件拷贝到之前创建的/usr/share/nginx目录下：
```
// docker cp 容器名:要拷贝的文件在容器里面的路径   要拷贝到宿主机的相应路径
docker cp reina-nginx:/etc/nginx/conf.d /usr/share/nginx
docker cp reina-nginx:/etc/nginx/nginx.conf /usr/share/nginx
```
拷贝完成后的目录结构：

其中，conf.d和nginx.conf是从容器中拷贝出来的配置文件，html中Jenkins打包完成后发送到服务器的资源文件。

按照需要修改配置文件中的内容：

conf.d/default.conf

(此处我只修改了location - root，指向了由jenkins发送过来的资源文件，注意是index文件所在的那一层)

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /usr/share/nginx/logs/host.access.log  main;

    location / {
        root   /usr/share/nginx/html/dist/unit-test;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/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;
    #}
}

暂时先不修改nginx.conf文件

通过以下命令运行nginx容器：
```
docker run --name reina-nginx -d -p 10081:80 \ 
-v /usr/share/nginx/html:/usr/share/nginx/html \ 
-v /usr/share/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx
```
用服务器上的html文件夹和修改过的default.conf替换容器中对应的文件或文件夹
```
docker ps -a
```
nginx已经正常运行在10081端口：

此时访问对应的IP:10081，验证部署成功：
补充：此篇仅以最简单的方式将前端项目在服务器正常启动，nginx具体还需配置log，访问权限等再慢慢学习吧～