readme

  • 我的项目名叫qlnc-admin
  • nginx用docker装的，nginx的/usr/share/nginx目录挂载在/home/nginx

一 nginx根目录部署angular项目

  • 打包
ng build --prod
  • 将生成文件夹dist/qlnc-admin中的qlnc-admin文件夹拷贝到/home/nginx/html根目录下
  • 配置nginx

带有路由的项目需要加上try_files $uri $uri/ /index.html;,否则配置的子路由等无法使用

location / {
    root  /usr/share/nginx/html/qlnc-admin/;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}
  • 启动nginx
docker run --name nginx -p 80:80 -p 443:443 \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-v /home/nginx/cert:/etc/nginx/cert \
-d nginx
  • 访问
www.xxx.com/login

参考

  • A

二 nginx子目录部署angular项目

2.1 项目放在nginx根目录

这里的子目录应该指的是访问www.xxx.com/qlnc/login中的qlnc，而不是指将项目拷贝到nginx/html/qlnc文件夹下（如果要放到多层文件夹下，看后文）

  • 打包
ng build --base-href=/qlnc/ --prod

--base-href=/qlnc/指定访问的二级目录，也可直接修改打包目录下的index.html里的base href，

  • 将生成的dist下的qlnc-admin拷贝到nginx/html目录下
  • 配置nginx
  location /qlnc {
      alias  /usr/share/nginx/html/qlnc-admin;
      index  index.html index.htm;
      try_files $uri $uri/ /qlnc/index.html;
  }

注意 root 和 alias 指令的区别：
root指令会将配置的路径 location 加到 root 的路径参数后面，即/usr/share/nginx/html/qlnc-admin/qlnc，而alias指令则不会

  • 启动nginx（同上）
  • 访问
https://www.xxx.com/qlnc

2.2 项目放到nginx多层文件夹下

  • 将打包的项目qlnc-admin拷贝到/home/nginx/html/qlnc0/下，qlnc0是多建的一层目录
  • 修改nginx.conf
location /qlnc {
  alias  /usr/share/nginx/html/qlnc0/qlnc-admin;
  index  index.html index.htm;
  try_files $uri $uri/ /qlnc/index.html;
}
  • 启动nginx（同上）
  • 访问
https://www.xxx.com/qlnc

参考

三 其他方法

  • （未实践）