通过WSL在阿里云上部署Vue项目

参考:

阿里云上搭建网站-CSDN博客

云服务器重装

关闭当前运行实例

更换操作系统,还有其他的进入方式。

选择ubuntu系统(和WSL使用相同的系统)。

设置用户和密码。发送短信验证码。

新系统更新。秒速干净的新系统设置完成。 这样就不需要害怕随意实验各种命令的风险了。

WSL登录操作阿里云

#远程登录
ssh ecs-user@47.120.66.77
#重装阿里云系统后需要更改WSL的设置
ssh-keygen -f "/home/arthur/.ssh/known_hosts" -R "47.120.66.77"
#退出远程登录
exit

#WSL 操作 安装FileZilla
sudo apt-get install filezilla
#运行filezilla,图形界面,选择远程用户网址端口22密码,链接。本地选择上传,服务器段选择下载。
filezilla






截屏如下:

密码输入后结果:

Vue打包与Nginx部署

打包

Vue 打包 npm run build. 生成 dist文件夹。

使用filezilla将dist文件夹上传到 /home/

截图如下:

nginx部署

#WSL远程后操作:
sudo apt update
sudo apt upgrade

#安装Nginx,启动nginx
sudo apt install nginx
sudo systemctl start nginx

#浏览器登录网址,可以显示欢迎界面

设置Vue相关端口

生成vue.conf文件如下:文件需要再 /etc/nginx/conf.d/ 目录下。

server {
	# Web运行端口
	listen 5173;
	# 设置域名,localhost代表本机IP地址
	server_name 47.120.66.77;
	# root代表Vue打包后的dist文件夹
	# index.html代表Vue程序运行文件
	location / { 
			root /home/ecs-user/dist;
			index index.html;
	}
}

重新启动nginx。 

sudo systemctl restart nginx

访问47.120.66.77:5173

显示 403错误。

调整过程 ToDo

将 Vue打包文件的dist目录转移到 /home文件夹。

更改  /etc/nginx/conf.d/vue.conf 文件。 location root 目录删除 /ecs-user/

重新启动nginx,浏览器输入 47.120.66.77:5173 显示成功。

系统状态:

dist文件夹在Home目录下

vue.conf文件内容

浏览器显示:

修改 vue.conf中的root和dist目录所在的位置。

home下没问题, home/arthur/下没问题, home/ecsuser/下没问题。 

结论:nginx在寻找root路径是不接受 “-”作为目录。

另外:listen 定义了vue使用的接口。如改为80,则默认47.120.66.77即为vue的网页。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/497358.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Ansible-1

Ansible是一款自动化运维、批量管理服务器的工具,批量系统配置、程序部署、运行命令等功能。基于Python开发,基于ssh进行管理,不需要在被管理端安装任何软件。Ansible在管理远程主机的时候,只有是通过各种模块进行操作的。 需要关…

华润电力2024届校招人才测评通知润择认知能力测评考什么?

华润电力2024届校招人才测评通知润择认知能力测评考什么? 第一部分,认知测评润择-认知能力测评 您好! 本次测评包含逻辑推理、数字推理、语言理解三大类型的问卷。共计58题。 测评限时60分钟。其中逻辑推理、数字推理、语言推理分别限时20分钟。 如逾时…

Dubbo管理平台安装部署

访问dubbo-admin访问报404 源码自行到githup下载,在idea打开,然后在控制台使用命令打包,然后拖拽到tomcat的webapps目录 #打包命令mvn package -Dmaven.skip.testtrue 修改tomcat端口 修改dubbo-admin 的zookeeper地址

【黑马头条】-day04自媒体文章审核-阿里云接口-敏感词分析DFA-图像识别OCR-异步调用MQ

文章目录 day4学习内容自媒体文章自动审核今日内容 1 自媒体文章自动审核1.1 审核流程1.2 内容安全第三方接口1.3 引入阿里云内容安全接口1.3.1 添加依赖1.3.2 导入aliyun模块1.3.3 注入Bean测试 2 app端文章保存接口2.1 表结构说明2.2 分布式id2.2.1 分布式id-技术选型2.2.2 雪…

uniApp使用XR-Frame创建3D场景(6)播放模型动画

上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用 这篇我们讲解播放模型动画 先看源码 <xr-scene render-system"alpha:true" bind:ready"handleReady"> <xr-node visible"{{sec6}}"><xr-light type"ambient&qu…

uniapp vue-cli项目配置devServer和outPutDir

上一次说了使用vue-cli创建uni-app项目&#xff0c;然后使用第三方工具开发打包&#xff0c;利用jekins发布等。 这一次我想解决以下问题&#xff1a; 1我想配置devServer供开发环境使用&#xff0c;这样也可以解决开发环境的跨域问题 2以前我的每个版本信息都配置在package…

Pycharm服务器配置python解释器并结合内网穿透实现公网远程开发

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Excel:使用VLOOKUP函数,抓取指定数据,后一个列

Excel:使用VLOOKUP函数&#xff0c;抓取指定数据&#xff0c;后一个列 我们有这样一个数据源 要是实现这个页面的赋值 就是对应关系映射 使用 VLOOKUP(A2,Sheet2!$A$2:$B$9,2,FALSE)第一个参数是需要匹配的单元格。 第二个参数是数据源&#xff0c;我这里数据源用的是shee…

没学数模电可以玩单片机吗?

我们首先来看一下数电模电在单片机中的应用。数电知识在单片机中主要解决各种数字信号的处理、运算&#xff0c;如数制转换、数据运算等。模电知识在单片机中主要解决各种模拟信号的处理问题&#xff0c;如采集光照强度、声音的分贝、温度等模拟信号。而数电、模电的相互转换就…

单片机之串口通信

目录 串口介绍 通信的基本概念 并行通信和串行通信 同步通信和异步通信 串行异步通信方式 串行同步通信方式 通信协议 单片机常见通信接口 串行通信三种模式 串口参数 传输速度 ​串口的连接 电平标准 串行口的组成 串口数据缓冲寄存器 串行口控制寄存器 串口…

【IntelliJ IDEA】运行测试报错解决方案(附图)

IntelliJ IDEA 版本 2023.3.4 (Ultimate Edition) 测试报错信息 命令行过长。 通过 JAR 清单或通过类路径文件缩短命令行&#xff0c;然后重新运行 解决方案 修改运行配置&#xff0c;里面如果没有缩短命令行&#xff0c;需要再修改选项里面勾选缩短命令行让其显示&#x…

python基础 | 核心库:PIL

1、读取图像信息 查看图像信息 读取同一文件夹下的文件 可加 ./可不加 rom PIL import Image img Image.open(image.jpg) # 打开图像文件(注意:是去掉文件头的纯数据) print(img.format) # 图像格式(如BMP PNG JPEG 等) print(img.size) # 图像大小(…

灵动翻译音频文件字幕提取及翻译;剪映视频添加字幕

参考&#xff1a;视频音频下载工具 https://tuberipper.com/21/save/mp3 1、灵动翻译音频文件字幕提取及翻译 灵动翻译可以直接chorme浏览器插件安装&#xff1a; 点击使用&#xff0c;可以上传音频文件 上传后自动翻译&#xff0c;然后点击译文即可翻译成中文&#xff0c;…

【VMware Workstation】公司所有主机和虚拟机ip互通,以及虚拟机目录迁移

文章目录 1、场景2、环境3、实战3.1、所有主机和虚拟机ip互通Stage 1 : 【虚拟机】设置为桥接模式Stage 2 : 【虚拟机】设置ipStage 3 : 【路由器】ARP 静态绑定MACStage 3-1 ping 路由器 ipStage 3-2 【静态绑定】虚拟机查看mac地址Stage 3-3 【静态绑定】路由器ARP 静态绑定 …

【QT+QGIS跨平台编译】040:【geos_c+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、geos_c介绍二、文件下载三、文件分析四、pro文件五、编译实践一、geos_c介绍 GEOS_C(GEOS C++接口)是GEOS库的C语言版本,它提供了一套丰富的API,允许开发者在C++程序中执行复杂的几何形状处理和空间关系分析。GEOS_C是基于JTS(Java Topolog…

【MySQL】MySQL5.6---windows版本安装(附安装包)

期待您的关注 mysql5.6点击此处下载 提取码&#xff1a;gckb 我将mysql5.6-windows版本的解压包放到了上方的连接当中&#xff0c;如若不想使用我提供的安装包大家还可以在官方网站自行下载。 官方地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 首先检查本地有没…

macOS 13 Ventura (苹果最新系统) v13.6.6正式版

macOS 13 Ventura是苹果电脑的全新操作系统&#xff0c;它为用户带来了众多引人注目的新功能和改进。该系统加强了FaceTime和视频通话的体验&#xff0c;同时优化了邮件、Safari浏览器和日历等内置应用程序&#xff0c;使其更加流畅、快速和安全。特别值得一提的是&#xff0c;…

量化交易软件开发定制的步骤

量化交易软件的定制开发是一个复杂而精细的过程&#xff0c;需要经过一系列步骤来确保最终交付的软件符合客户的需求并具有高度的可靠性和效率。以下是量化交易软件开发定制的主要步骤&#xff1a; 1. 需求分析与规划 在开始开发之前&#xff0c;首先需要与客户深入沟通&…

2.4 比较检验 机器学习

目录 常见比较检验方法 总述 2.4.1 假设检验 2.4.2 交叉验证T检验 2.4.3 McNemar 检验 接我们的上一篇《性能度量》&#xff0c;那么我们在某种度量下取得评估结果后&#xff0c;是否可以直接比较以评判优劣呢&#xff1f;实际上是不可以的。因为我们第一&#xff0c;测试…

MySQL创建表:练习题

练习题&#xff1a; 创建一个名为"students"的数据库&#xff0c;并切换到该数据库。 在"students"数据库中创建一个名为"grades"的表&#xff0c;包含以下字段&#xff1a; id: 整数类型 name: 字符串类型&#xff0c;学生姓名 subject: 字符串…