docker+nginx部署angular项目

环境： angular8.0+node12.14.0

本人项目的代码是在Windows上写的,而部署的环境是腾讯云服务器，所以需要先将项目打包，然后通过xftp上传到云服务器，再用docker拉取nginx并配置，然后启动。

打包项目：

1.在命令行进入项目所在位置

2.使用ng build --prod进行打包，在该路径下就会生成一个dist文件夹

备注：
    (1)一定要使用ng build --prod进行打包，可能会报错，根据命令行提示的错误去进行修改即可，如果仅使用ng build打包，编译出的文件会很大。对该项目进行两种打包测试时发现使用–prod得到的dist仅有2.7M，初次访问仅需2~3秒。而不加–prod得到的约为42M，这将导致后续访问项目时耗时非常长，每次都在1分钟以上，即使后面的nginx配置了gzip也不会起什么作用，所以一定要使用ng build --prod去打包项目。
    (2) 由于本人之前已经在腾讯云上部署过一次angular，当时没有指定项目的启动端口(默认为4200)，所以这次部署的项目为了不会因端口冲突而无法启动，需要修改package.json中的项目启动端口后再进行打包

3.将dist文件夹上传到腾讯云服务器

4.对dist里面的文件进行赋权

在该路径下输入指令即可

 chmod 777 *

配置nginx并运行容器

1.在dist的上一级目录中新建nginx文件夹进行挂载(可以在任意目录下，只要不会跟主机的nginx冲突就行)

mkdir nginx
mkdir nginx/conf.d
mkdir nginx/conf
mkdir nginx/log

2.在nginx/conf.d中新建配置文件default.conf并将下面的内容粘贴进去

 server {listen       4300; # nginx监听端口server_name 106.52.211.246; #若有域名则将localhost替换为域名#charset koi8-r;#access_log  /var/log/nginx/host.access.log  main;location /api/ {proxy_pass http://106.52.211.246:8848/;}location / {#proxy_pass http://127.0.0.1:8848/$1;#proxy_method POST;#proxy_set_header X-Real-IP $remote_addr;#proxy_set_header REMOTE-HOST $remote_addr;#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;root   /usr/share/nginx/html; #test项目路径index index.html index.html; #默认起始页try_files $uri $uri/ /index.html; #spa前端项目路由配置}#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;#}
}

备注：

​ (1) 端口要与你打包项目时配置的端口一致

​ (2) 如果你的项目涉及与后台服务器的交互，那么就需要配置转发，否则请求不到后台服务器，而且 你的angular项目还要进行跨域配置，你的后台服务器也需要配置跨域。此外下面的第二张图的红框中必须填云服务器的ip地址，不能写127.0.0.1


3.在nginx/conf下新建nginx.conf并将下面内容粘贴进去

worker_processes  1;error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;events {worker_connections  1024;
}http {include       /etc/nginx/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  /var/log/nginx/access.log  main;sendfile        on;#tcp_nopush     on;keepalive_timeout  65;gzip  on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 3;gzip_types text/plain text/css application/xml application/javascript application/x-javascript text/javascript;include /etc/nginx/conf.d/*.conf;
}

备注：

​ 项目可能初次访问会比较慢，所以可以进行gzip的配置，只是单纯的把gzip on的注释去掉时不起作用的

4.执行docker run命令进行启动容器

docker run -p 4300:4300 --name angularxkb --privileged=true -v /home/ubuntu/xkbdemo01/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf -v /home/ubuntu/xkbdemo01/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/ubuntu/xkbdemo01/angularxkb/dist/xkbdemo:/usr/share/nginx/html -d nginx

备注：

​ (1) 因为打包的项目监听是4300端口，所以nginx容器内部的监听端口就是4300，而不是默认的80

​ 所以-p 4300:4300的容器端口（第二个4300）为4300

(2) 使用-v进行数据卷的挂载，在宿主机上对配置文件进行修改时也会改变容器内的配置文件，这是非常方便 的，因为容器中没有vi/vim等编辑命令可以使用，但是需要注意，修改配置后要对容器进行重启配置才能 生效

docker exec -it [容器名] nginx -s reload

这是非常方便 的，因为容器中没有vi/vim等编辑命令可以使用，但是需要注意，修改配置后要对容器进行重启配置才能 生效

docker exec -it [容器名] nginx -s reload

自此angular项目就配置好了，在浏览器输入云服务器ip地址和端口4300就可以进行访问了