Nginx部署angular项目

最新推荐文章于 2025-04-02 07:40:23 发布
最新推荐文章于 2025-04-02 07:40:23 发布
阅读量6.4k 收藏 12
点赞数
分类专栏： Nginx 文章标签： nginx angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chending_cd/article/details/100730656
版权
本文简要介绍了如何使用Nginx部署Angular项目。首先，确保安装并配置好Nginx，然后打包Angular项目，将生成的dist文件放入Nginx的html目录下。接着，编辑Nginx配置文件，指定前端静态资源路径。最后，重启Nginx服务，即可完成Angular项目的部署。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

简单点。

下载Nginx。具体可查看我之前写过的nginx安装方法https://blog.csdn.net/chending_cd/article/details/100557233

在确认nginx配置成功的情况下。即你输入ip可看到  

这个是重点。

 

angular部署很简单。

angular项目打包

ng build

 

打包完成会在根目录生成一个dist文件。例如我打包好了我的angular项目。

进去centos系统 在nginx/html 下放人 dist内打包好的文件。

修改nginx的conf配置文件

最低0.47元/天 解锁文章
docker+nginx部署angular项目
weixin_43269840的博客
03-17 1484
docker+nginx部署angular项目 环境： angular8.0+node12.14.0 本人项目的代码是在Windows上写的,而部署的环境是腾讯云服务器，所以需要先将项目打包，然后通过xftp上传到云服务器，再用docker拉取nginx并配置，然后启动。 打包项目： 1.在命令行进入项目所在位置 2.使用ng build进行打包，在该路径下就会生成一个dist文件夹 备注： 由...
Ubuntu 使用nginx部署agular项目
Damien_J_Scott的博客
05-08 584
然后修改配置，修改需要发布的端口，修改你项目打包好的地址，然后我还配置了一个代理,/api开头的都会被代理到5000端口。完成之后就可以\target\classes\static找到 ，直接把整个static上传到需要部署的地方就可以了。我的front-end是用的webpack，就直接执行的npm run build打包。接下来新建项目配置文件，这个your_project就改成你的需要的名字。当然这个打包output路径也是angular.json配置好了的。然后就可以重启nginx了。
nginx部署angular+javaweb
12-01
如果你需要在服务器根目录下配置前端项目，同时要部署其他的后端项目，这个配置可以帮到你
Angular项目部署到Nginx上
Moker_winddust的博客
09-21 2402
有关Angular项目在nginx部署
Nginx基本配置文件详解
最新发布
bjzhang75的博客
04-02 1501
Nginx基本配置文件详解
【angular-实践】nginx部署angular项目
qq_41243979的博客
01-04 3644
目录 nginx根目录部署angular项目 nginx子目录部署angular项目 其他方法-docker（未实践） readme 我的项目名叫qlnc-admin nginx用docker装的，nginx的/usr/share/nginx/html目录挂载在/home/nginx/html 一 nginx根目录部署angular项目 打包 ng build --prod 将生成文件夹dist/qlnc-admin中的qlnc-admin文件夹拷贝到/home/nginx/html根目录下
nginx部署angular8项目
assassin_0302的博客
07-10 869
参考链接：https://www.cnblogs.com/defaultlee/p/9223564.html https://www.cnblogs.com/panxiaoming/p/6024063.html 直接上步骤 1.使用ng build 打包 --base-href 会在html的<head>中 增加<base ...
记录Nginx部署Angular项目的坑
weixin_48859602的博客
08-20 1914
我的服务器就只用80端口来完成前端和后端部署（以及多个项目部署），失去了可以区分项目或者前后端入口的端口号，我只能用uri来区分该指向哪个端口或文件，所以使用Nginx是在合适不过了。但是这路上太多坑，以至于我捣鼓了两天。下文出现该色号，代表问题所在目录前言一、后端代理1、如何将请求uri切割，将“标志”去除后转发到我的后端项目二、前端代理1、白屏，能访问到index.html但是无法获取到css/js资源2、正常点击很正常，一刷新就4043、我觉得的正确的部署前端。
Nginx中部署Angular项目遇到的坑巨坑
01-10
网上搜索Angular 项目编译后部署到 Nginx 中的方法，多数文章都介绍了需要在 Nginx 中的配置文件的 location 中特别指定跳转到首页来避免刷新导致404的问题，那么完整的server 代码是： server { listen 80; ...
nginx 部署angular项目
遇见一个人流泪的博客
08-02 967
location / { root D:\WebstormProjects\angular-demo\src; index index.html index.htm; }
在 nginx 中部署 angular 应用
热门推荐
程序员进阶之路
10-15 1万+
最近使用Angular做了第一个应用，但是网上的教程大多是教如何开发，部署相对较少，所以这里就简单记录一下如何在nginx中部署Angular应用。 注：Angular应用可以编译成静态页面，然后部署在任何 web 服务器上，这里仅仅是选择nginx而已，同时编译后的文件其实就仅仅是静态文件而已，与其它 html 文件本质上无异。 一、编译 前提： 请确保@angular/cli已经安装 在
nginx中配置angular项目_centos7下nginx部署angular项目
weixin_35976825的博客
12-24 303
1.创建前端项目目录进入/var文件夹cd /var在/var目录下创建www文件夹mkdir www进入/var/www目录，创建test文件夹cd www #进入www目录mkdir test2.将前端编译后的文件上传到/var/www/test目录3.配置nginx下test目录及选项进入/etc/nginx/conf.d/目录cd /etc/nginx/conf.d/打开default.c...
涵盖了 Java、Qt、AI、R 语言以及 Linux 学习的学习类开源项目
代码讲故事
10-07 364
涵盖了 Java、Qt、AI、R 语言以及 Linux 学习的学习类开源项目。 1.Springboot-Learning 项目作者：程序猿 DD 项目地址：https://gitee.com/didispace/SpringBoot-Learning Spring Boot基础教程的程序样例，这个项目的目标是打造全网内容最全，比收费教程更好的Spring Boot免费教程。 2.SpringCloud-Learning 项目作者：程序猿 DD 项目地址：https://gitee.com/didispac
nginx中配置angular项目_利用docker中的nginx镜像部署angular项目
weixin_35242442的博客
12-24 337
1、进入angular项目下的src文件加下：在命令行中执行:ng build --prod --aot2、将生成的dist文件，通过Xftp传到服务器中3、修改权限4、进入到dist文件夹下的t-app文件夹下，执行docker run命令5、这样部署完之后，因为没有在angular项目中添加一些配置，导致刷新的时候出现404错误解决方法：在app.module.ts中1、引入import { ...
nginx的相关命令:angular打包+nginx部署项目,文本修改等
qq_42666729的博客
07-30 788
angular前台打包: ng build --prod angular前台代理启动:"start":          "ng serve --proxy-config proxy.config.json" 显示或配置网络设备（网络接口卡）:ifconfig 查看网卡连接信息:ifup ens33 查看ip:ipconfig 关闭防火墙centos6:临时关闭:service iptable...
nginx中配置angular项目_如何在Nginx中正确地配置Location？
weixin_30069113的博客
01-06 361
Nginx中location指令的作用是根据用户请求的URI来执行不同的应用，根据用户请求的网站地址URI进行匹配，匹配成功即进行相关的操作。在nginx的 ngxhttpcore_module模块的location标签的匹配原则之前，我要先介绍一下nginx的echo模块，它可以帮助我们检测配置的location标签是否正确，是否达到配置的目的。编译安装echo模块Nginx的echo模块介绍e...
Nginx 入门(一) -----nginx的作用与安装
jym的博客
03-11 1978
Nginx： 什么是nginx： Nginx 是高性能的 HTTP 和反向代理的服务器，处理高并发能力是十分强大的，能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数。 nginx作用： 反向代理 负载均衡 动静分离 反向代理:对比正向代理 正向代理:需要在客户端配置代理服务器进行指定网站访问 就好比找人帮你去超市买水，你需要告诉这个人，超市的地址，买多少钱的，什么牌子的… ...
Angular项目部署
大强博客
08-21 5912
1、最简化的部署方式 最简化的部署方式就是为开发环境构建，并把其输出复制到 Web 服务器上。 使用开发环境进行构建 content_copyng build 把输出目录（默认为 dist/）下的每个文件都复制到到服务器上的某个目录下。 如果要把文件部署到服务器上的某个子路径下，构建时还要添加 --base-href（基地址）标识，并设置合适的 &lt;base ...
nginx web为路径部署angular项目
11-22
当使用Nginx作为Web服务器来部署Angular项目时，你需要配置Nginx以正确地映射静态文件请求到Angular应用，同时处理SPA（Single Page Application）的路由。以下是基本步骤： 1. 安装并配置Nginx: 首先确保Nginx已经...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值