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

参考

• Nginx部署angular项目（主要参考）
• Angular项目从新建、打包到nginx部署

二 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

参考

• nginx配置angular项目部署在项目子目录
• 怎样将 Angular 项目部署到 Nginx 子目录中
• 将Angular应用部署到nginx子目录

三 其他方法

• 部署 Angular 前端应用到生产环境的基本流程（基于 Docker）（未实践）
• docker+nginx部署angular项目