阿里云服务器10分钟快速部署vue项目

已于 2022-11-15 08:07:24 修改
阅读量2.6k 收藏 41
点赞数 3
分类专栏： 云服务 部署 前端那些事 文章标签： 阿里云 服务器 vue.js
于 2022-09-13 10:09:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dccose/article/details/126820759
版权

阿里云服务器10分钟快速部署vue项目 腾讯云服务器10分钟快速部署vue项目

前置条件

  • 随意一台云服务器（实例主机）（腾讯云阿里云首次使用都会送一个月不等可以拿来练手）
    • 操作系统 选择centerOS 本篇主要围绕该操作系统，小白依然可以快速上手没必要选择windows操作系统
  • 电脑上安装 xshell 软件 去官网下载即可 用于进行远程连接用
  • 一份写好打包好的源代码 地址：后台管理项目自行下载
  • 需要注意的是 当前文章介绍了 nodejs 接口的部署 和 前端项目的部署 不需要部署接口可以跳过接口的部署

在阿里云中打开你的实例 （服务器参数）复制你的公网ip地址

  • 实例
    在这里插入图片描述
  • 公网IP地址
    在这里插入图片描述

打开 xshell 创建会话

  • 登录名为 root 默认
  • 密码为创建实例的时候你抒写的密码 忘记可以自己改 （找到重置实例密码即可）
  • 创建成功关联上后 最后显示 `[root@xiaobaga ~]# 并且会话窗口为绿色
    在这里插入图片描述

给服务器安装宝塔面板

  • 宝塔面板地址：宝塔面板 使用什么操作系统就下载对应的版本
  • 这里下载 centerOS版本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec
  • 复制粘贴到 xshell 中 右键粘贴 回车执行 等待下载完毕 碰到选项时选 y即可
    在这里插入图片描述
  • 下载完毕后 最后面会展示出访问地址 和登录名以及密码 复制保存一下
    在这里插入图片描述

访问宝塔面板

  • 如果无法访问 如上提示 在安全组中添加放行端口
  • 可以根据如下把所有端口都添加一下
    在这里插入图片描述
  • 进入前有一系列琐碎事前自行弄好就可以了 没有账号就注册即可
  • 来到主页后 会弹出 推荐配置安装 选择第一个即可 等待安装完毕即可
    在这里插入图片描述
  • 就此 基础事项都成功完成

后端 nodeJs 接口的部署 （只部署项目自行跳过接口的部署）

在宝塔面板中添加数据库

  • 在下载的项目中 vue-shop-serve\db\mydb.sql 将其导入
    在这里插入图片描述
    在这里插入图片描述

在宝塔面板中 安全 添加端口

在这里插入图片描述
在这里插入图片描述

上传 后端接口文件

  • 上传成功后 我这里将 vue-shop-serve 文件 重命名为了 api
    在这里插入图片描述

修改 文件中的ip地址和端口号

  • 端口为 8889
  • 地址为 自己的服务器ip地址
  • /www/wwwroot/api/config/default.json修改当前文件中的配置
    在这里插入图片描述
  • 同时修改 /www/wwwroot/api/app.js中的端口号 8888改为8889
    在这里插入图片描述

在商店安装 PM2管理器 并放到首页

在这里插入图片描述

  • 使用pm2管理器运行项目 但是因为 接口文件中没有 node_modules 文件 需要安装依赖
  • 因为截图在前面截的 vue-shop-serve 改为了 api 选择的时候 转变一下就好了
    在这里插入图片描述
  • 在 xshell面板中进行安装依赖
  • cd / 回到根目录
  • cd /www/wwwroot/api 来到后端接口的根目录处
  • npm i 安装依赖 （安装前先查看是否有node 分别输入 node -v 和 npm -v 显示出版本既存在 ）
  • 需要注意 如果安装了PM2后 查看 node 和 npm版本时 不显示版本号 需要重启服务
    在这里插入图片描述

至此接口部署完毕 打开项目中的 接口文档 使用测试工具检测接口是否成功启用

  • 可以使用 apifox 或 postman 软件进行测试接口
  • 接口的基准地址为 http://127.0.0.1:8888/api/private/v1/
  • 将当前接口ip地址和端口进行修改得到：http://47.101.133.111:8889/api/private/v1
  • 根据文档接口 http://47.101.133.111:8889/api/private/v1/login?username=admin&password=123456 进行登录（get）
    在这里插入图片描述

前端项目的部署

修改前端项目中的基准api接口 并进行打包

  • npm i 安装依赖
  • npm run serve 查看是否可以运行
  • vue_shop-master\src\main-prod.js 找到当前文件 将其接口改为 部署好的接口
    在这里插入图片描述
  • npm run build 进行打包项目 得到 dist文件备用

添加站点

  • 域名直接使用 公网ip地址即可
    在这里插入图片描述
  • 创建成功后 在地址栏 直接打开该域名地址 同下既创建成功
    在这里插入图片描述
  • 将当前文件中的所有文件全部删除 （有一个删不掉不用管）
    在这里插入图片描述

上传前端打包文件

  • 只要把 dist 中的所有文件拖拽到当前 ip地址文件的里面即可
    在这里插入图片描述

  • 直接访问公网ip地址 项目可以显示既成功了
    在这里插入图片描述

  • 当然 你可以简单测试一下 直接创建一个index.html 的文件 直接打开公网ip地址
    在这里插入图片描述

其他

关闭 xshell 后忘记复制地址和密码

- xshell 连接服务器后 在终端 	输入  `/etc/init.d/bt default`  得到初始用户名和密码
- 如果无法登录 密码或账号名错误 输入 `bt ` 根据指令 重置用户名和密码
- [忘记密码如何操作](https://www.bt.cn/bbs/thread-1172-1-1.html)

在这里插入图片描述

如何更换操作系统

  • 首先关闭 当前运行的服务器 停止实例
    在这里插入图片描述

xshell连接服务器时忘记密码 或如何改变实例密码

在这里插入图片描述

🤕到此所有部署就完毕了

  • 纯属个人己见，前端路还长，接受所有建议
Web项目（Vue）部署到阿里云服务器【超详细】
m0_67393039的博客
09-12 973
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
阿里云部署前端vue项目（云效代码库，流水线）
MWNGTAIQI的博客
09-07 1260
依次点击“分支”->“新建分支”，新建用于开发的分支，建议新建新分支而不直接在master分支上开发项目原因：master分支通常被视为项目的稳定版本基线，是项目“生产就绪”的代码集合，直接在主分支上进行开发会增加引入不稳定代码的风险，从而影响整个项目的稳定性和可靠性，在多个开发人员或团队同时工作时，每个人或每个团队可以在自己的分支上进行独立的开发和测试，而不会相互干扰，通过创建新的开发分支，可以在该分支上提交更改，并通过代码审查流程进行审查，审查通过后，可以将更改合并回主分支，这一过程更加清晰和可控。
VUE项目发布和部署 (阿里云)
01-07
以下是我看全栈之巅整理的，有兴趣可以看一下 这是我写好的项目（后台管理：admin，前台展示：web，服务端：server） 1. 生产环境编译 1.修改axios的baseURL const http = axios.create({ // baseURL: http://localhost:3000/admin/api baseURL: process.env.VUE_APP_API_URL || '/admin/api', }); 2.在admin的根目录添加环境变量文件 .env.development，添加 VUE_APP_API_URL = http://l
阿里云服务器部署前端项目vue3+element-plus-django
最新发布
邹九的个人博客
09-22 1367
而且请求需要访问服务器的网址，而不是本地的localhost，所以需要将localhost到服务器的地址，这样远端的浏览器访问121.40.168.141的网页时，浏览器会发送请求到服务器，这时需要指定服务器的地址，也就是http://121.40.168.141:7000/csdn/renzheng。，但是服务器的网址访问的时候就会出现问题，本人服务器的地址是121.40.168.141，和localhost不在相同的区域，此时就会出现跨域的问题。将图片上传到服务器的部署目录，像/home/admin/
部署vue项目到阿里云服务器
liubangbo的专栏
10-27 5712
可能在make的时候会报2个错误，在网上搜一下就解决了。大概记得第一个错误是在MakeFile中删除-Werror，第二个错误是注释一行代码就可以了。记得vue项目包dist 一定要上传到Nginx 安装目录下的html目录，一般是/usr/local/nginx/html目录。我们试用阿里云ESC服务器(选择CentOS)，按步骤试用，稍等几分钟就会收到短信，创建实例成功。但不幸的是，打不开。4）用户名和密码填写我的在阿里云服务器设置的，一般用户名在没有修改的情况下都是root。
vue项目部署到阿里云上
gcyaozuodashen的博客
09-02 311
vue项目部署
阿里云Linux部署vue项目
H_Dsheng的博客
09-23 1036
阿里云Linux部署vue项目 阿里云Linux部署vue项目阿里云Linux部署vue项目1、安装Nginx2、把vue项目打包3、配置Nginx 1、安装Nginx 安装Nginx的方法有很多种，我是直接在宝塔面板上面软件商店安装的Nginx。 ps：宝塔面板安装看这里：https://www.bt.cn/bbs/thread-19376-1-1.html 2、把vue项目打包 将你所需要发布的vue项目打包。 打包命令：npm run build 打包成功后会有一个dist的文件夹，这个文件夹就是你
前后端分离 -- SpringBoot + Vue实战项目 部署至阿里云服务器
04-18
本项目用于部署至Linux服务器案例项目 该项目技术栈为：SpringBoot + Spring Security + Vue + ElementUI 前后端分离实现整体项目 一个简单的前后端分离项目
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
Vue项目部署到阿里云ECS涉及的关键步骤包括配置Nginx代理、使用PM2管理和启动Node服务以及确保正确处理跨域请求。以下是对这些知识点的详细说明： 1. **Nginx代理**： - Nginx是一个高性能的HTTP和反向代理服务器...
vue 项目部署到阿里云服务器
qq_41121879的博客
12-28 1809
这篇博客是源于朱敏的信息可视化这门课，我和胡负责前端，应老师要求需要将前端部署到云服务器上。于是有了这篇的记录过程。 一、 win10 安装ssh服务器 Win10怎么安装ssh服务器 cmd --> ssh 二、win安装nginx服务器 Nginx Windows详细安装部署教程 安装在D:/TOOLS/下面。 测试：浏览器输入http:/localhost/8800 出现上面这个欢迎页，说明部署成功！ 三、使用npm run build命令编译项目，自动生成一个dist..
Vue项目部署至阿里云服务器
wyg1973017714的博客
07-16 2150
Vue-cli版本 @vue/cli 4.2.3 项目结构 打包前准备 首先修改vue项目中router的模式，该模式默认为hash，当我们访问项目的网址时会自动在我们的网址中加上’/#/’，也就是说访问路径为：‘localhost:8080/#/home’，我们这里需要改为history，这样访问路径会变成正常的访问路径：‘localhost:8080/home’。 将router/index.js文件中的router中修改为如下即可。 const router = new VueRouter({
如何在阿里云服务器上部署Vue？
aliyuncloud的博客
07-21 1295
首先登录服务器，安装Node.js和NPM，然后克隆项目代码，安装项目依赖，构建Vue应用，并配置Web服务器。最后，重启Web服务器并访问服务器IP地址即可查看部署的Vue应用。在本文中，我们将讨论如何在阿里云服务器上成功地部署Vue应用。通过以下具体步骤和详细的论述，您将能够轻松超越其他开发者，并全面掌握在阿里云服务器上部署Vue的技巧。现在，您可以通过浏览器访问服务器的IP地址，即可查看部署的Vue应用。首先，在浏览器中输入阿里云服务器的IP地址，并使用您的登录凭据进行登录。5. 构建Vue应用。
阿里云服务器上部署vue+spring boot项目
m0_47739253的博客
04-08 983
一个简单网站的上线流程。
vue部署在阿里云服务器
LIangell的博客
05-07 162
第一步： 将vue项目打包成rar文件，在项目所在文件夹中打开git bash 使用命令scp -r vue项目路径/draw_map.rar root@服务器ip地址:/usr/local 将vue项目包传给服务器。 第二步： 在服务器中cd /usr/local&ls 查看项目包是否存在 存在使用unrar x draw_map.rar解压文件 第三步： cd draw_map进入已解压的vue项目中 如果node的版本不一致，需要删除项目打包的文件 使用命令： rm -rf node_modu
vue项目部署到阿里云上详解（一次详细的部署）
qq_30108237的博客
05-13 4755
首先，买一台云服务器是必要的，我使用的是阿里云服务器CentOS 7.4 64位操作系统。 在整个vue-cli项目上线过程中，我遇到了很多问题。不过，最终圆满解决了，因此在这里记录一下。 遇到的问题： 云服务器连接 vue项目打包上线 nginx安装配置 本地json数据无法访问 vue路由页面无法访问 一、使用Xshell连接云服务器 1、百度下载一个Xshell+Xftp6并安装。 2、打开Xshell,建立与远程服务器的连接 注意：上图的主机就是阿里云上创建的实例的公网ip 3、配置好主机后点
【阿里云】——部署Vue项目到阿里云服务器
奔跑的狮子
11-10 1721
部署Vue项目到阿里云服务器 文章目录部署Vue项目到阿里云服务器@[toc]参考视频步骤在服务器上安装宝塔给vue项目打包在宝塔上添加站点，把打包好的vue项目解压 参考视频 8分钟项目部署-黑马vue电商后台管理系统-购买服务器部署上线-搭建网站 在这里吹一波，黑马YYDS！ 步骤 1.在服务器上安装宝塔 2.给vue项目打包 3.在宝塔上添加站点，把打包好的vue项目解压 在服务器
阿里云云服务器部署 Vue+Express+MySQL 项目详细步骤
weixin_44014654的博客
04-28 1450
阿里云-上云就上阿里云 (aliyun.com) 一、连接 （1）修改已经购买的服务器密码：控制台–侧边栏云服务器ECS–实例–管理–实例详情–重置实例密码。 （2）法一：阿里云浏览器窗口远程连接 （3）法二：远程桌面连接（window 自带），输入公网ip，用户名，密码等，注意网络问题（例如用校园网可能会连接失败）。 二、部署项目 1、配置环境与安装工具 跟在自己家一样。以 Vue+Express+Mysql 的项目为例，需要安装 NodeJS、MySQL 项目环境，安装Git 来拉取项目文件（或
如何快速搭建自己的阿里云服务器（宝塔）并且部署springboot+vue项目（全网最全）
热门推荐
Java&Develop的博客
01-14 1万+
对于新手或者学生党来说，有时候就想租一个云服务器来玩玩或者练练手，duck不必花那么多钱去租个服务器。这些云服务厂商对学生和新手还是相当友好的。下面将教你如何快速搭建自己的阿里云服务器，完成云服务器的部署。
Vue项目部署到阿里云服务器
qq_44952713的博客
11-12 643
以下仅本公司项目部署操作，暂未试其他项目，记录一下，避免忘记。 1.命令行输入：npm run build:prod ，这里prod是正式环境配置 2.在项目本地目录下找到dist文件夹，将里面的文件全部复制到服务器上就部署好了。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值