Angular项目部署到阿里云服务器

最新推荐文章于 2024-11-14 16:24:30 发布
原创 最新推荐文章于 2024-11-14 16:24:30 发布 · 2k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#阿里云 #Angular #部署 #apachr #上传

本文介绍了如何将一个Angular项目部署到阿里云服务器，包括打包编译项目、解决页面显示空白的问题、通过WinSCP上传文件到服务器以及检验部署是否成功。在部署过程中，特别提到了将index.html中引用的href改为相对路径。

1.前提

  1. 服务器上已经安装了web环境 可以参考文章：阿里云安装web环境
  2. 一个可以正常运行的angular项目
  3. 本文使用的是apache服务器做参考

2.打包编译Angular项目

cd Angular项目路径
ng build

在这里插入图片描述
打包完成后，可以在Angular项目的根目录下发现一个dist文件夹
在这里插入图片描述

3.解决打包后，页面显示空白问题

  1. 打开dist文件夹下的index.html文件
    在这里插入图片描述
    2.将index.html 里面的改为href="./" ,改为相对路径
    在这里插入图片描述

4.上传项目到服务器

1.打开WinSCP进入/alidata/www/phpwind

最低0.47元/天 解锁文章
详解前端项目在阿里云服务器上的部署过程
Liut2016的博客
08-31 4100
项目上线需要部署到阿里云服务器上，由于刚刚申请的阿里云服务器没有项目环境，因此需要进行环境配置和项目部署。在这个过程中也踩到了几个坑，因此记下来供大家参考。 创建用户 参考链接：Ubuntu16.04系统中创建新用户 切换为root用户以获取创建用户的权限 $ sudo su 添加新用户（在本文中用户名为hellocrease） $ adduser hellocrease 根据系统提示...
apiapp：在阿里云上部署express项目练习
02-18
学习计划二：1购买树莓派电脑2安装配置计算机环境3学习Linux操作系统相关知识（命令以及简单原理）4学习Python基础知识以及框架5利用Python写一个Web应用并部署到云服务器6了解Python的其他应用可能性 学习计划三：1...
将Angular+Spring Boot的项目发布到阿里云ESC服务器（windows）上
小钻风的博客
05-15 587
首先我是一个小白，很菜的，我也是根据网上很多很多的教程学习，这算是我的一个总结，我只能勉勉强强把项目发布在公网上。 比如安装配置一些环境我省略了 1、你购买了一个阿里云ESC服务器，这就不用我详细讲了，我买的是windows系统的阿里云服务器； 2、进入阿里云控制台，重置密码Administrator 3、快捷键win+R，输入mstsc，会弹出验证，账户名为 4、 5、 6、 7、 8、 前端有...
【教程】将自己的APP部署到阿里云
热门推荐
伏久_zht_的专栏
05-27 2万+
如何将APP部署在阿里云服务器上 【转自】 http://www.91aliyun.com/aliyun_server/aliyun_server_jy/how_app_deployed_on_cloud_aliyun/如果将APP部署在阿里云服务器，可能会有一些操作需要我们来完成，下面的介绍里的说明大家可以参考下。如何将APP部署在阿里云服务器上 随着移动通信设备终端的逐步流行，移动互联网在
Angular 项目部署到服务器（CentOS 7.2）
jjf19891208的专栏
07-04 1076
最近刚开始接触Angular，按照Angular文档中的快速上手的教程完成了一个项目（my-app），本地运行毫无压力，就想着把项目部署到自己的服务器上，按照网上的教程，我这新手一时半会也没能搞定，看到有人说跟本地一个流程，也是先装环境，但是在远程服务器上安装环境遇到了问题，就是安装完Angular CLI后ng命令不好使，甚至还有些人的做法是把本地的环境文件，项目文件上传到远程服务器上，传完一个简单的项目花了好久时间，就放弃上传环境了（感觉不靠谱），看官方的文档，将 build 好的 dist 目录下的文
Angular 分别用tomcat 和 nginx部署在阿里云服务器，并且解决构建包太大的问题。
weixin_38391672的博客
05-25 1247
最近部署angular简单写一写过程。 1、首先将Angular项目在本地打包 切换到目录下 使用ngbuild或者ngbuild --prod --aot 后者命令打包会更小，但是校验比较严格，变量的修饰符是private也会报错，并且我的项目使用了tinymce插件打包就报错我不得不将他整成独立的js文件使用。 打包之后会生成dist文件夹 2、tomcat部...
Web端文件上传至阿里云OSS（基于Angular 5项目）
weixin_34174322的博客
12-05 861
一、准备工作 1. 开通阿里云OSS服务，从控制台上获取AccessKeyId和AccessKeySecret。 2. 创建Bucket，并登录OSS控制台 3. 配置Bucket 将allowed origins（来源）设置成 * 将allowed methods（允许methods）设置成 PUT, GET, POST, DELETE, HEAD 将allowed headers（允许hea...
高仿阿里云管理控制台模板
07-24
阿里云管理控制台模板是基于Web技术实现的一种模拟阿里云官方管理界面的设计方案，它旨在为用户提供与阿里云相似的用户体验，便于用户管理和操作虚拟资源。这个模板通常包含登录页面、资源列表、监控图表、配置选项...
杜少雄个人博客代码成功部署至阿里云
2. 项目部署：描述中提到项目已成功部署至阿里云轻量级服务器，这意味着杜少雄不仅编写了博客代码，还进行了项目的部署工作。部署通常涉及将应用代码、数据库、服务器配置等从本地或测试环境迁移到生产环境，以便...
angular+Mongodb+阿里云windows服务器部署方案
Tgmmmmmmmm的博客
07-11 395
angular+mongodb的网页实验部署方案，仅作作业检查用（比如wy），实际此方案完全不可行
如何将已构建的angular 网页项目部署到github pages供他人访问
huoge666的博客
06-04 1258
1、将已构建完成的angular项目放到自己所创建github仓库中1.1例如我已构建的项目名叫testRouter如下1.2  在我的  Hi  仓库中，可以看到我已经把我得 testRouter 已放在上面,2、需要修改testRouter文件中的index.html文件的 <base href="/"> 这一行,修改完后，点击最左下角的commit保存起来3、接着设置master...
记录Nginx部署Angular项目的坑
weixin_48859602的博客
08-20 1973
我的服务器就只用80端口来完成前端和后端部署（以及多个项目部署），失去了可以区分项目或者前后端入口的端口号，我只能用uri来区分该指向哪个端口或文件，所以使用Nginx是在合适不过了。但是这路上太多坑，以至于我捣鼓了两天。下文出现该色号，代表问题所在目录前言一、后端代理1、如何将请求uri切割，将“标志”去除后转发到我的后端项目二、前端代理1、白屏，能访问到index.html但是无法获取到css/js资源2、正常点击很正常，一刷新就4043、我觉得的正确的部署前端。
Vue/ React/ Angular 前端项目在 Web 服务器上的部署配置
前端开发
02-06 970
Vue/ React/ Angular 前端项目在 Web 服务器上的部署配置
Angular+SpringBoot前后端分离项目上传云服务器
微笑涛声
12-11 2865
一、前端（客户端）上传服务器 1、安装nginx，开启服务，查看状态 安装：yum install nginx 开启服务：service nginx start 重启服务：service nginx restart 2、打包Angular项目–控制台输入 打包命令：ng build --prod 3、上传项目文件到nginx的html下 找到dist文件，用xftp工具上传即可 4、浏览器访问公网IP，看到项目运行说明客户端上传成功 二、后端（服务端）上传服务器 1、添加打包JAR所需的maven依赖
angular 项目部署到linux服务器
weixin_35749796的博客
02-08 356
上有什么要求？ 这取决于你使用的Linux发行版。一般来说，部署Angular项目需要Node.js和npm，所以你需要在服务器上安装这两个软件。此外，你还需要一个HTTP服务器，比如Apache或NGINX，用于处理静态文件。 ...
2分钟在阿里云ECS控制台部署个人应用（图文示例）
最新发布
AliCloudROS的博客
11-14 1754
这个功能可以帮助我打通github/gitee代码仓库和阿里云ECS，并且省去了构建部署中的很多繁琐的安装配置，方便个人开发者快速实现CI/CD，可以把更多精力放在应用本身的实现上。关于本文，如果您在实践过程中遇到问题欢迎留言，up看到都会回的。另外，～ 有阿里云ECS的朋友快去试试吧！为ECS实例开通公网gitee示例代码github示例代码ECS管理控制台。
angular项目发布在服务器上,如何将 angular 7 项目直接部署到我的网络服务器，以便我不应该在部署后总是迁移我的...
weixin_29474859的博客
08-06 500
你可以用简单的方式做到这一点。创建基本bash/sh脚本或windows executable使用rsync自动执行此操作：部署.sh：#!/bin/bashng build --prodrsync -arvt ./dist remoteuser@remotehost:/var/www/remotedirectory避免每次都输入登录名和密码，将RSA 公钥添加到您的远程机器(受信任的主机)。您可...
Angular项目部署到Nginx上
Moker_winddust的博客
09-21 2484
有关Angular项目在nginx部署
通过Tomcat将angular项目部署到服务器
qq_41248529的博客
08-16 5216
之前讲过一篇直接通过在服务器在安装angular运行环境，在通过ng serve 命令来运行项目，达到将项目部署到服务器的目的。本文是通过ng build将项目进行编译，再将编译后的文件放到tomcat的webapps目录下，来达到部署tomcat的目的。具体操作看下： ng build对项目进行编译 编译成功后，会在项目跟目录下生成一个dist文件，结构如下： 然后再将这个dist文件放到...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值