Angular2 将前端项目部署到服务器使用ip访问

最新推荐文章于 2024-09-10 14:16:54 发布
最新推荐文章于 2024-09-10 14:16:54 发布
阅读量1.4k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： Angular2 将前端项目部署到服务器使用ip访问 Angular2 部署项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41250414/article/details/89358009
本文详细介绍了如何使用Nginx部署Angular2项目至Linux服务器，包括不同环境(build命令)的配置与操作步骤，确保Nginx正常运行及通过主机名访问。

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

Angular2 将项目(前后端)部署到服务器使用ip访问

一、 安装Nginx
Nginx的安装配置

二、前端部署Linux服务器：
使用build命令build项目.
在这里插入图片描述
环境可以自己设置.

命令如下:

[开发环境]ng build --prod --env=dev


[测试环境]ng build --prod --env=test


[生产环境]ng build --prod --env=prod

build 成功后，找到本地项目所在位置，会出现一个dist文件。
在这里插入图片描述

三、部署
在Xshell登录需要部署的服务器。

在这里插入图片描述
**输入用户名和密码。**确定登录。
在这里插入图片描述
在这里插入图片描述
连接成功！
在这里插入图片描述
找到nginx
在这里插入图片描述
进入到html中创建文件,进入此文件
在这里插入图片描述
通过rz命令把build的dist文件全部上传到此项目中.
在这里插入图片描述
这样就部署成功了，需要保证Nginx是打开的。主机名:配置的端口/创建的项目名/xxx.html打开即可.
在这里插入图片描述

如何将前端项目打包并部署到不同服务器环境
weixin_51591826的博客
05-26 5131
如何将前端项目打包并部署到不同服务器环境
React前端项目Windows服务器IIS部署踩坑与出坑记录
u010292691的博客
05-09 2344
React前端项目Windows服务器IIS部署踩坑与出坑记录。第一次部署前后端分离的前端项目，开始没什么头绪，查了网上的一些教程，差不多都按如下步骤进行，于是就按步就班，依葫芦画瓢。后来发现依葫芦画瓢不靠谱，于是逐步排查调试，发现网上的步骤有些是多此一举，也许只适合特定环境，需要具体情况具体分析。
前端项目部署到服务器
m0_67475286的博客
09-10 593
进入/opt/project文件夹下(文件上传位置)项目的新建文件夹——>/opt/project/新建的文件夹名/dist。将disk文件夹拖到/opt/project/hw文件夹下，可以直接右击dist。去文件夹里面找到nginx.conf这个文件在里面改（端口号，文件名，跨域）进入sbin文件夹下执行./nginx -s reload命令重启。vi nginx.conf 编辑nginx.conf文件。名字随便起，添加服务器地址，用户名，密码，记住密码。cd conf 进入conf文件夹下。
前端部署到服务器上
小菜鸟的博客
04-01 4383
记录一下自己从买服务器到部署的历程 一、云服务器 云服务购买 可以在腾讯云和阿里云上面搜索云服务器,然后购买自己需要的云服务器,我买的是1核2G的 ubuntu server 公网宽带选的1M 买好后 自己试一下连接自己的服务器 在cmd里输入 windows上要ssh 没有的话需要自己安装openSSH 我在阿里云上买的服务器,刚开始没有设置实例密码,连接之前得先去实例那里设置密码才能连接 ssh 用户名@公网IP 回车 输入密码 域名购买 在域名选择那里,输入自己想要的域名,是否被注册,没有注.
前端将项目部署到服务器(Nginx)的完整步骤
故里的博客
04-25 5103
前端将项目部署到服务器(Nginx)的完整步骤
打包前后端项目并部署至服务器
qq_44726330的博客
01-12 1万+
打包前后端项目并部署至服务器
docker 上面安装 Nginx 以及设置访问 IP 就可以访问前端工程
Wayfreem的博客
05-26 979
记录下最近使用 docker 安装 nginx 之后，直接通过 IP 访问的时候踩过的坑，其实是比较简单的东西，就是有点儿生疏了，并且按照之前安装 nginx 报错，也一并处理了报错。
docker+nginx部署angular项目
weixin_43269840的博客
03-17 1500
docker+nginx部署angular项目 环境： angular8.0+node12.14.0 本人项目的代码是在Windows上写的,而部署的环境是腾讯云服务器，所以需要先将项目打包，然后通过xftp上传到云服务器，再用docker拉取nginx并配置，然后启动。 打包项目： 1.在命令行进入项目所在位置 2.使用ng build进行打包，在该路径下就会生成一个dist文件夹 备注： 由...
Angular4项目nginx服务器部署
Rnger的博客
04-12 2217
Angular4项目nginx服务器部署1.  Nginx相关操作命令：Ø  ubuntu安装：$ sudo apt-get install nginx 安装完成即可，在/usr/sbin/目录下是nginx命令所在目录，在/etc/nginx/目录下是nginx所有的配置文件，nginx.conf文件用于配置nginx服务器以及负载均衡等信息；Ø  查看nginx进程是否启动：$ ps -ef|...
基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题
小结巴巴的博客
12-04 1094
背景   　　在这越来越发达的网络时代，web应用也是越来越复杂，尤其是前端的开发，也是越来越受重视。 　　所以在我们前端开发完成后，会有一些列的web应用的上线验证，如自测、QA测试、code review 等，以确保 应用能在生产上没有事故。 　　但是事以愿违，很多时候我们都会接受的客户的一些线上问题，这些问题有时候可能你是自己开发的原因本身存 在的问题，这样的问题一般能够在测试环...
angular项目发布在服务器上,如何将 angular 7 项目直接部署到我的网络服务器，以便我不应该在部署后总是迁移我的...
weixin_29474859的博客
08-06 484
你可以用简单的方式做到这一点。创建基本bash/sh脚本或windows executable使用rsync自动执行此操作：部署.sh：#!/bin/bashng build --prodrsync -arvt ./dist remoteuser@remotehost:/var/www/remotedirectory避免每次都输入登录名和密码，将RSA 公钥添加到您的远程机器(受信任的主机)。您可...
angular4实现用IP加端口和用localhost加端口访问页面
weixin_30828379的博客
06-15 225
1.配置node_modules/webpack-dev-server/lib/Server.js 将425行return false; 改为return true; 2.配置package.json为 “start”: “ng serve –host 0.0.0.0”. 转载于:https://www.cnblogs.com/happiness-mumu/p/9187497....
Windows服务器Jenkins部署Angular项目执行npm ng 命令异常
jiangshanwe
05-05 2241
场景描述 构建一个自由风格的软件项目，选择对应的源码管理。每次构建时，Jenkins自动将最新的代码更新到workspace。然后通过增加构建步骤，执行npm install和ng build等命令，完成自动发布工作。 问题描述 增加构建步骤，选择“Execute Windows batch command”，增加npm install命令。构建时出错如下： C:\Jenkins\w...
angular配置本机ip启动项目（mac查看ip）
weixin_41517724的博客
06-17 565
mac查看本机ip 打开终端，输入ifconfig；过滤使用 ifconfig|grep 'inet' 在项目中打开package.json 在启动项的json后追加 --host 你的ip
[转]如何将Angular localhost:4200 改为IP
weixin_33804990的博客
09-17 552
本文转自：https://blog.youkuaiyun.com/ygznx/article/details/78249118 ust specify the IP in --host option like ng serve --host 192.16.1.1 Now you can visit http://192.16.1.1:4200 in your browser and it will wor...
获取客户端真实ip
w592376568的博客
02-25 478
    参考：http://blog.youkuaiyun.com/z69183787/article/details/21187485    String ip = request.getRemoteAddr(); String proxyip = request.getHeader("X-Forwarded-For"); if (StringUtils.isNotEmpty(proxyip)) { ...
Vue/ React/ Angular 前端项目在 Web 服务器上的部署配置
前端开发
02-06 934
Vue/ React/ Angular 前端项目在 Web 服务器上的部署配置
angular项目从部署到启动
热门推荐
阿留申低压的博客
05-02 3万+
angular是前端三大框架之一，适合开发大型需要多人合作的项目，代码规范，社区活跃，不过学习曲线陡峭。这篇介绍环境搭建，完成就可以启动ng项目了。 一、Node.js和npm 在node官网（https://nodejs.org/zh-cn/download/）下载安装包，根据电脑系统安装对应包。 打开安装包，直接点击下一步，完成安装。 检测Node.js...
Angular项目配置外部访问地址
DeMeng33的博客
04-06 9936
Angular项目默认的访问地址是localhost:4200，那么手机上怎么访问呢。 首先查一下自己电脑的IP地址 然后修改angular工程的package.json文件，把start改为 ng serve h –host 192.168.1.98 然后就可以在移动端设备使用192.168.1.98:4200来访问了...
web前端项目部署
最新发布
04-22
部署 Web 前端项目的流程通常涉及几个关键步骤，包括环境准备、代码打包以及将静态资源上传至服务器。以下是详细的说明： #### 1. **环境准备** 在开始之前，需要确保目标服务器已准备好并满足基本需求。如果使用的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值