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