nginx配置angular项目部署在项目子目录 作者：七棵菜 日期：2023-08-16 栏目：计算机分类：90 人气：689 通过域名访问angular项目的配置比较简单，就相当于部署一个静态站点，但是如果是通过域名加子目录的方式来访问一个angular项目，就需要额外配置了。 例如站点的访问路径为：http://localhost/admin ，其中`admin`就是一个子路径，使用nginx web server来配置这样的路径有两种办法： ### 反向代理 > 因为angular是一个比较独立的项目，而且绝大多数需要访问后台接口，因此使用反向代理的方法来配置是推荐的做法。 #### nginx配置如下 - 代理项目（即主项目）配置 ``` # 配置angular项目 location /admin { proxy_pass http://admin.cultural-treasure.localhost/; # 注意地址已反斜杠结尾 } ``` - 被代理项目（即angular项目）配置 ``` location / { try_files $uri $uri/ /index.html; } # 配置接口项目 location /api { rewrite ^/api/(.*)$ /$1 break; proxy_pass http://access.cultural-treasure.localhost/; } ``` #### 项目打包 ``` ng build --base-href=/admin/ --prod --aot ``` 注意参数`base-href`的值为上一步反向代理地址加上结尾的斜杠 #### 程序配置 ``` export const base_api = '/admin/api'; # 接口地址为两个反向代理的组合地址 ``` ### 子目录 - nginx配置 ``` # 配置angular项目 location /admin { try_files $uri $uri/ /admin/index.html; } ``` - `项目打包`同上 - `程序配置`同上 标签： nginx angular 上一篇：如何使用mvn命令导入依赖 下一篇：tomcat 应用服务器的启动和关闭 随便看看 2022-11-30 配置apache, nginx 支持 angular2+ 等单网页项目路由刷新 2023-08-16 nginx配置angular项目部署在项目子目录 2022-11-30 设置 .gitignore 不忽略文件夹的规则 2022-11-30 git查看某文件最近的修改内容 2022-11-30 实现 git 切换分支后代码互不影响 留言
