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

本文涉及的产品
云服务器ECS,u1 2核4GB 1个月
云服务器 ECS,u1 4核8GB 1个月
云服务器 ECS,u1 4核16GB 1个月
简介: 前端项目如何部署到云服务器

前提

假设已经购买了云服务器,其内网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
复制代码

输入密码


相关实践学习
ECS云服务器新手上路
本实验会自动创建一台ECS实例。首先,远程登陆ECS实例,并部署应用。然后,登陆管理控制台,并对这台ECS实例进行管理操作。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
2天前
|
前端开发 应用服务中间件
前端项目部署问题总结
【7月更文挑战第13天】
10 1
若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
|
9天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
5天前
|
前端开发 JavaScript 安全
前端技术栈都有那些,需要学会啥才可以上手写项目?
【7月更文挑战第9天】 前端技术栈包括HTML/CSS/JS基础,熟悉Vue.js/React/Angular等框架,掌握Git、Webpack等工具,理解HTTP协议及安全概念。使用Node.js和编辑器提升效率,从基础到框架层层深入,实践项目以巩固知识,持续学习应对技术更新。
12 0
|
9天前
|
前端开发
若依部署,部署常见流程之先部署网页的后端系统,让自己的前端能够看到内容,先部署后端,让前端在本地跑起来-----吃饱了撑死了大佬建议,正确的部署流程
若依部署,部署常见流程之先部署网页的后端系统,让自己的前端能够看到内容,先部署后端,让前端在本地跑起来-----吃饱了撑死了大佬建议,正确的部署流程
|
9天前
|
前端开发 测试技术 API
前端必备的【项目知识】
前端必备的【项目知识】
13 0
|
10天前
|
前端开发 JavaScript 应用服务中间件
windows server + iis 部署若伊前端vue项目
5,配置url重写规则(重写后端请求) 注:如果没有Application Request Routing Cachefourcloudbdueclaim和URL重写,则是第二部的那两个插件没装上 打开iis,点击计算机->点击Application Request Routing Cache -> 打开功能
36 0
|
10天前
|
开发框架 前端开发 JavaScript
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
|
10天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
10天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加