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

已于 2022-11-15 08:07:24 修改
阅读量2.4k 收藏 39
点赞数 2
分类专栏： 云服务 部署 前端那些事 文章标签： 阿里云 服务器 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连接服务器时忘记密码 或如何改变实例密码

在这里插入图片描述

🤕到此所有部署就完毕了

  • 纯属个人己见，前端路还长，接受所有建议
dccose
关注
  • 2
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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
前后端分离 -- SpringBoot + Vue实战项目 部署至阿里云服务器
04-18
本项目用于部署至Linux服务器案例项目 该项目技术栈为：SpringBoot + Spring Security + Vue + ElementUI 前后端分离实现整体项目 一个简单的前后端分离项目
学生免费领取阿里云ECS云服务器并使用全过程（部署个人博客项目）
@进击的飞机琪的博客
11-07 9377
学生免费领取阿里云ECS云服务器并使用全过程（部署个人博客项目）
阿里云OSS部署前端
最新发布
Jayus001的博客
04-23 390
阿里云OSS部署前端
部署vue项目到阿里云服务器
liubangbo的专栏
10-27 5477
可能在make的时候会报2个错误，在网上搜一下就解决了。大概记得第一个错误是在MakeFile中删除-Werror，第二个错误是注释一行代码就可以了。记得vue项目包dist 一定要上传到Nginx 安装目录下的html目录，一般是/usr/local/nginx/html目录。我们试用阿里云ESC服务器(选择CentOS)，按步骤试用，稍等几分钟就会收到短信，创建实例成功。但不幸的是，打不开。4）用户名和密码填写我的在阿里云服务器设置的，一般用户名在没有修改的情况下都是root。
vue项目部署到阿里云上
gcyaozuodashen的博客
09-02 275
vue项目部署
Web项目（Vue）部署到阿里云服务器【超详细】
热门推荐
weixin_43690623的博客
01-28 2万+
超详细Vue项目部署篇 小白的部署之路 前段时间白嫖了一年的阿里云服务器，想着手上有个项目，那就顺便部署上去吧，然后就进行了为时一天的踩坑之路。将大象放进冰箱有几个步骤？打开冰箱，将大象防进去，关上冰箱。巧了，项目部署呢，也刚刚好是三步：打包项目–>配置服务器环境–>将项目放到环境中。让我们开始吧！ 一、打包Vue项目 先将项目 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可
阿里云Linux部署vue项目
H_Dsheng的博客
09-23 903
阿里云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的文件夹，这个文件夹就是你
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
最近部署一个Vue项目到阿里云ECS上，因为项目涉及一些跨域请求，所以采用了Nginx代理请求本地的node服务（利用pm2做进程管理）。node服务借助axios设置headers的referer、host转发请求，解决跨域请求问题。 先交代下...
(新手向)从零开始将springboot项目部署到云服务器（ecs）上
01-09
最近用springboot写了一个个人博客项目，正好之前趁着活动免费领取了一个阿里云的云服务器ecs，于是准备把项目部署到服务器上。对于我这种纯新手来说，部署过程可谓是踩坑无数,好在最后还是成功了。  这里跟大家...
nginx部署多个vue项目的方法示例
11-19
如何连接阿里云服务器就不在这里说了，请看我以前的文章。 首先需要的效果 http://47.97.244.83/login http://47.97.244.83/student/login 文件目录 两个项目并列在同一文件夹内。 准备好两个vue的项目 ...
Vue.js项目部署到服务器的详细步骤
12-12
我这里找基友拿的一个，做测试的话，可以买阿里云的学生机，9.9 一个月，不过不是学生的话就比较麻烦，因为涉及敏感操作都需要验证码。 编译打包 将项目打包成 dist 文件，这里我需要跨域请求一些数据，还写了一个...
vue 项目部署到阿里云服务器
qq_41121879的博客
12-28 1746
这篇博客是源于朱敏的信息可视化这门课，我和胡负责前端，应老师要求需要将前端部署到云服务器上。于是有了这篇的记录过程。 一、 win10 安装ssh服务器 Win10怎么安装ssh服务器 cmd --> ssh 二、win安装nginx服务器 Nginx Windows详细安装部署教程 安装在D:/TOOLS/下面。 测试：浏览器输入http:/localhost/8800 出现上面这个欢迎页，说明部署成功！ 三、使用npm run build命令编译项目，自动生成一个dist..
vue部署在阿里云服务器
LIangell的博客
05-07 126
第一步： 将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？
aliyuncloud的博客
07-21 1143
首先登录服务器，安装Node.js和NPM，然后克隆项目代码，安装项目依赖，构建Vue应用，并配置Web服务器。最后，重启Web服务器并访问服务器IP地址即可查看部署的Vue应用。在本文中，我们将讨论如何在阿里云服务器上成功地部署Vue应用。通过以下具体步骤和详细的论述，您将能够轻松超越其他开发者，并全面掌握在阿里云服务器上部署Vue的技巧。现在，您可以通过浏览器访问服务器的IP地址，即可查看部署的Vue应用。首先，在浏览器中输入阿里云服务器的IP地址，并使用您的登录凭据进行登录。5. 构建Vue应用。
vue项目部署到阿里云上详解（一次详细的部署）
qq_30108237的博客
05-13 4641
首先，买一台云服务器是必要的，我使用的是阿里云服务器CentOS 7.4 64位操作系统。 在整个vue-cli项目上线过程中，我遇到了很多问题。不过，最终圆满解决了，因此在这里记录一下。 遇到的问题： 云服务器连接 vue项目打包上线 nginx安装配置 本地json数据无法访问 vue路由页面无法访问 一、使用Xshell连接云服务器 1、百度下载一个Xshell+Xftp6并安装。 2、打开Xshell,建立与远程服务器的连接 注意：上图的主机就是阿里云上创建的实例的公网ip 3、配置好主机后点
Vue项目部署至阿里云服务器
wyg1973017714的博客
07-16 2100
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项目到阿里云服务器
奔跑的狮子
11-10 1582
部署Vue项目到阿里云服务器 文章目录部署Vue项目到阿里云服务器@[toc]参考视频步骤在服务器上安装宝塔给vue项目打包在宝塔上添加站点，把打包好的vue项目解压 参考视频 8分钟项目部署-黑马vue电商后台管理系统-购买服务器部署上线-搭建网站 在这里吹一波，黑马YYDS！ 步骤 1.在服务器上安装宝塔 2.给vue项目打包 3.在宝塔上添加站点，把打包好的vue项目解压 在服务器
Vue项目部署到阿里云服务器
qq_44952713的博客
11-12 619
以下仅本公司项目部署操作，暂未试其他项目，记录一下，避免忘记。 1.命令行输入：npm run build:prod ，这里prod是正式环境配置 2.在项目本地目录下找到dist文件夹，将里面的文件全部复制到服务器上就部署好了。 ...
怎么在云计算服务区上部署一个vue前端项目
05-14
部署Vue前端项目到云计算服务上通常需要以下步骤： 1. 打包Vue项目：进入Vue项目目录，执行`npm run build`，生成一个dist文件夹，里面包含了打包后的Vue项目。 2. 选择云计算服务：选择一家云计算服务商，如阿里云、腾讯云、AWS等。 3. 创建虚拟机：在云计算服务商的控制台中创建一台虚拟机，选择操作系统、机型、存储等配置。 4. 安装Web服务器：在虚拟机中安装Web服务器，如Nginx、Apache等。 5. 上传代码：将打包后的Vue项目上传到虚拟机中，可以使用FTP或者命令行工具。 6. 配置Web服务器：配置Web服务器，将访问请求转发到Vue项目的入口文件index.html，同时配置静态资源路径。 7. 启动Web服务器：启动Web服务器，访问虚拟机的公网IP地址即可访问Vue项目。 以上是基本的部署步骤，具体实现细节可能会因为云计算服务商、Web服务器等不同而有所差异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值