前端项目如何部署到云服务器

简介: 前端项目如何部署到云服务器

前提

假设已经购买了云服务器,其内网IP地址是172.11.11.11(假设),目前我们需要将我们的已经开发好的前端项目部署上去。

一、云服务器部分

远程连接工具有很多,这里我直接使用iIerm进行连接。操作如下:

step1、连接云服务

ssh root@172.11.11.11   // 连接云服务,此时会让你输入密码,正确输入后就会成功连接
复制代码

另外,如果要退出云服务器,可以执行:

exit
复制代码

step2、备份旧的前端项目

ls
cd html/               // 假设我们的前端项目(名称假设为frontEndProject)放在html文件夹下,进入此文件
cp -rf frontEndProject frontEndProject20220927    // 先将现有项目备份
复制代码

step3、删除旧的前端项目

cd frontEndProject
rm -rf *
复制代码

另外,退出云服务器命令:

exit
复制代码

二、前端项目部分

step1、打包

终端进入前端项目文件夹,执行打包命令:

yarn build
复制代码

执行之后就会在前端项目根目录下出现dist文件夹。

step2、终端部署

cd dist/      //进入打包后的文件夹
scp -r * root@172.11.11.11:/html/frontEndProject
复制代码

输入密码


相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
5天前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(完结)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!(完结)
14 0
|
1天前
|
关系型数据库 MySQL Java
腾讯云服务器的使用、服务器中使用Docker安装常见的软件、如何将一个项目发布到服务器
这篇文章介绍了在腾讯云服务器上使用Docker安装常见软件的过程,包括安装MySQL、Redis和Tomcat,并提供了解决连接问题的方法。同时,还涉及了服务器中安装JDK 1.8的步骤和如何将项目打包部署到服务器上的指导,包括注意事项和操作提示。
腾讯云服务器的使用、服务器中使用Docker安装常见的软件、如何将一个项目发布到服务器
|
4天前
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法,并提供了详细的示例代码和运行效果。
22 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
|
7天前
|
监控 应用服务中间件 网络安全
Nightingale——部署客户端采集其他服务器状态信息
Nightingale——部署客户端采集其他服务器状态信息
17 1
Nightingale——部署客户端采集其他服务器状态信息
|
3天前
|
SQL 存储 缓存
什么?部署ClickHouse的服务器CPU利用率100%了?
什么?部署ClickHouse的服务器CPU利用率100%了?
|
4天前
|
前端开发 数据库
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置到项目中的静态资源下、图片可以在前端回显(二))
这篇文章是关于如何在SpringBoot+Vue+token的环境下实现表单和图片上传的优化篇,主要改进是将图片保存位置从磁盘指定位置改为项目中的静态资源目录,使得图片资源可以跨环境访问,并在前端正确回显。
|
5天前
|
负载均衡 前端开发 应用服务中间件
使用Nginx配置SSL以及部署前端项目
本文介绍了如何使用Nginx配置SSL证书以启用HTTPS,并展示了如何通过Nginx部署前端项目,包括配置SSL证书、设置代理和负载均衡的示例。
19 2
|
5天前
|
弹性计算 JSON 开发工具
"一键玩转阿里云ECS!Python大神揭秘:如何自动化创建镜像并跨地域复制,让你的云资源部署秒变高效达人!"
【8月更文挑战第14天】本文介绍如何使用Python与阿里云SDK自动化管理ECS镜像,包括创建镜像及跨地域复制,以优化云资源部署。首先安装`aliyun-python-sdk-ecs`并配置阿里云凭证。接着,通过Python脚本实现镜像创建与复制功能,简化日常运维工作并增强灾难恢复能力。注意权限及费用问题。
19 2
|
5天前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(17)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!
11 0
【前端学java】java基础练习缺少项目?看这篇文章就够了!(17)
|
12天前
|
缓存 前端开发 应用服务中间件
看看高手是怎么部署前端代码的
【8月更文挑战第8天】从简单的前端项目部署开始,构建dist文件夹并通过Nginx代理接口请求,以解决跨域问题。为进一步优化大型系统的性能及稳定性,需采用高级部署策略。例如,利用CDN分发静态资源并采用缓存控制减少带宽消耗,通过文件哈希值更新URL确保资源按需刷新。面对大规模部署挑战,采用非覆盖式发布方法避免样式错乱风险,并通过灰度部署逐步验证新版功能,确保服务平稳过渡。借助Nginx实现流量切分,可灵活调整新旧版本流量比例,有效降低上线风险。
24 3

热门文章

最新文章