Nginx部署angular项目

最新推荐文章于 2026-03-28 20:21:41 发布
原创 最新推荐文章于 2026-03-28 20:21:41 发布 · 6.5k 阅读 · 12
标签
#nginx #angular
本文简要介绍了如何使用Nginx部署Angular项目。首先，确保安装并配置好Nginx，然后打包Angular项目，将生成的dist文件放入Nginx的html目录下。接着，编辑Nginx配置文件，指定前端静态资源路径。最后，重启Nginx服务，即可完成Angular项目的部署。

简单点。

下载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元/天 解锁文章
Nginx中部署Angular项目遇到的坑巨坑
01-10
网上搜索Angular 项目编译后部署到 Nginx 中的方法，多数文章都介绍了需要在 Nginx 中的配置文件的 location 中特别指定跳转到首页来避免刷新导致404的问题，那么完整的server 代码是： server { listen 80; server_name 192.168.190.131; #sendfile on; #charset koi8-r; access_log /var/log/nginx/host.access.log main; location / { root /chanchaw/app/angular; index index
Angular项目部署到Nginx上
Moker_winddust的博客
09-21 2544
有关Angular项目在nginx部署
【angular-实践】nginx部署angular项目
qq_41243979的博客
01-04 3794
目录 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的配置文件详解
最新发布
03-28 511
一款高新能、轻量级Web服务软件 系统资源消耗低 对HTTP并发连接的处理能力高 单台可支持30 000～50 000个并发请求。Nginx（发音同"engine x"）是一个高性能的反向代理和 Web服务器软件，最初是由俄罗斯人 Igor Sysoev开发的。Nginx 的第一个版本发布于2004年，其源代码基于双条款 BSD许可证发布，因其系统资源消耗低、运行稳定且具有高性能的并发处理能力等特性，Nginx 在互联网企业中得到广泛应用。
记录Nginx部署Angular项目的坑
weixin_48859602的博客
08-20 2064
我的服务器就只用80端口来完成前端和后端部署（以及多个项目部署），失去了可以区分项目或者前后端入口的端口号，我只能用uri来区分该指向哪个端口或文件，所以使用Nginx是在合适不过了。但是这路上太多坑，以至于我捣鼓了两天。下文出现该色号，代表问题所在目录前言一、后端代理1、如何将请求uri切割，将“标志”去除后转发到我的后端项目二、前端代理1、白屏，能访问到index.html但是无法获取到css/js资源2、正常点击很正常，一刷新就4043、我觉得的正确的部署前端。
SSM整合(Spring+SpringMvc+Mybatis)
qq_41971768的博客
09-09 932
SSM 整合 文件说明： springmvc.xml : 配置SpringMvc框架相关 springcontext.xml ： 配置Spring容器 和整合mybatis
涵盖了 Java、Qt、AI、R 语言以及 Linux 学习的学习类开源项目
代码讲故事
10-07 417
涵盖了 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
Angular4项目nginx服务器部署
Rnger的博客
04-12 2309
Angular4项目nginx服务器部署1.  Nginx相关操作命令：Ø  ubuntu安装：$ sudo apt-get install nginx 安装完成即可，在/usr/sbin/目录下是nginx命令所在目录，在/etc/nginx/目录下是nginx所有的配置文件，nginx.conf文件用于配置nginx服务器以及负载均衡等信息；Ø  查看nginx进程是否启动：$ ps -ef|...
nginx中配置angular项目_centos7下nginx部署angular项目
weixin_35976825的博客
12-24 356
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...
Angular项目打包到nginx部署过程
weixin_43966635的博客
02-20 1288
Angular项目打包到nginx部署过程 一. 打包Angluar ng build,会在项目文件夹下生成dist文件，里面是打包后的文件 二. 部署nginx 在nginx官网中下载nginx 把dist文件夹下的打包文件拷贝到nginx/html下并重命名为myProj 修改conf/nginx.conf文件 location / { root html/myProj; inde...
Angular项目部署
大强博客
08-21 6133
1、最简化的部署方式 最简化的部署方式就是为开发环境构建，并把其输出复制到 Web 服务器上。 使用开发环境进行构建 content_copyng build 把输出目录（默认为 dist/）下的每个文件都复制到到服务器上的某个目录下。 如果要把文件部署到服务器上的某个子路径下，构建时还要添加 --base-href（基地址）标识，并设置合适的 <base ...
Angular 部署
百里刘叔的博客
09-25 1786
Angular部署在 Linux 上的部署在 Nginx 上部署在 Linux 上创建 Nginx 的 Web 根目录编译 Angular上传编译后的文件夹到 Linux配置 Nginx重启 Nginx访问一下看看效果在 Apache 上部署在 Linux 上创建 Apache 的 Web 根目录编译 Angular上传编译后的文件夹到 Linux配置 Apache重启 Apache访问一下 在 Linux 上的部署 在 Nginx 上部署 在 Linux 上创建 Nginx 的 Web 根目录 mkdir
nginx中配置angular项目_如何在Nginx中正确地配置Location？
weixin_30069113的博客
01-06 408
Nginx中location指令的作用是根据用户请求的URI来执行不同的应用，根据用户请求的网站地址URI进行匹配，匹配成功即进行相关的操作。在nginx的 ngxhttpcore_module模块的location标签的匹配原则之前，我要先介绍一下nginx的echo模块，它可以帮助我们检测配置的location标签是否正确，是否达到配置的目的。编译安装echo模块Nginx的echo模块介绍e...
在 nginx 中部署 angular 应用
热门推荐
程序员进阶之路
10-15 1万+
最近使用Angular做了第一个应用，但是网上的教程大多是教如何开发，部署相对较少，所以这里就简单记录一下如何在nginx中部署Angular应用。 注：Angular应用可以编译成静态页面，然后部署在任何 web 服务器上，这里仅仅是选择nginx而已，同时编译后的文件其实就仅仅是静态文件而已，与其它 html 文件本质上无异。 一、编译 前提： 请确保@angular/cli已经安装 在
angular项目部署使用nginx做代理
Web魔法师
07-09 1663
1.nginx 安装： 参考：https://blog.csdn.net/zuoyigehaizei/article/details/93061002 https://blog.csdn.net/by0920/article/details/87937646 2. 在angular项目下执行:ng build命令：命令执行完会生成dist文件夹dist/DeviceAdmin 例如我打包好了我的angular项目：/home/deviceweb/DeviceManageWeb/dist/Dev.
nginx中配置angular项目_Nginx 配置在二级目录下部署的Angular项目
weixin_35801512的博客
01-14 691
我们部署一个项目无非是域名(包含子域名)或子目录两种形式。域名很简单了，直接配置个nginx的server，绑定域名即可。如果是在已有的server中，挂接某个路径部署项目，通常有两种做法一个是代理服务器，另一个是使用alias或root指令修改路径。举个例子：配置一个 www.bestyii.com 的php项目server {listen 80;server_name bestyii.com ...
Angular基础-搭建Angular运行环境
踏雨歌青春，诗酒趁年华
05-02 9678
这篇文章介绍了在Angular项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Angular CLI工具、安装angular-router、创建Angular项目等步骤。这篇文章为读者提供了清晰的指南，帮助他们快速搭建Angular开发环境，为后续的项目开发奠定基础。
Nginx 入门(一) -----nginx的作用与安装
jym的博客
03-11 2061
Nginx： 什么是nginx： Nginx 是高性能的 HTTP 和反向代理的服务器，处理高并发能力是十分强大的，能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数。 nginx作用： 反向代理 负载均衡 动静分离 反向代理:对比正向代理 正向代理:需要在客户端配置代理服务器进行指定网站访问 就好比找人帮你去超市买水，你需要告诉这个人，超市的地址，买多少钱的，什么牌子的… ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值