通过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的网页。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

es6 Class基本语法和继承

es6 Class基本语法 class的基本语法: ES6 的class只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已 传统用构造函数生成实例 function Point(x, y) {th…

基于单片机锂电池电量检测数码管显示系统设计

**单片机设计介绍,基于单片机锂电池电量检测数码管显示系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机锂电池电量检测数码管显示系统设计的主要目标是实时、准确地检测锂电池的电量,并…

Java中变量a = 3中的3是存储在栈还是堆?

1、栈区(stack) 由编译器自动分配释放,存放函数的参数值,局部变量的值等。 2、堆区(heap) 是一个可动态申请的内存空间(其记录空闲内存空间的链表由操作系统维护),在j…

状态模式实战运用

目录 前言 UML plantuml 类图 实战代码 Form State Client 前言 通常一个完整的业务流程中,会经历多个阶段,每个阶段即一个业务状态,不同状态下对应这不同的业务处理逻辑。 无脑堆砌 if else 做判断然后选择对应的业务处理其实也能…

STM32使用USART发送数据包指令点亮板载LED灯

电路连接: 连接显示屏模块,显示屏的SCL在B10,SDA在B11。 程序目的: 发送LED_ON指令打开板载LED灯,发送LED_OFF关闭板载LED灯,与上一个博客不同,这个实际上是实现串口收发文本数据包。 …

enscan自动化主域名信息收集

enscan下载 Releases wgpsec/ENScan_GO (github.com) 能查的分类 实操: 首先打开linux 的虚拟机、 然后把下面这个粘贴到虚拟机中 解压后打开命令行 初始化 ./enscan-0.0.16-linux-amd64 -v 命令参数如下 oppo信息收集 运行下面代码时 先去配置文件把coo…

如何购买阿里云服务器?2024年阿里云服务器购买流程分享

很多新手用户不知道阿里云服务器购买的流程,不清楚该如何选购云服务器配置才能既满足需求又不会掉“坑”里,为此笔者整理了2024年购买阿里云服务器的完整流程,分为通过云服务器ECS产品页下单购买和通过阿里云活动购买云服务器两种最常见的购买…

速锐得解码广汽智能数字技术车型埃安Y纯电动CAN数据DBC控制策略

随着电动化、智能化、信息化、数字化、网联化、共享化技术的不断应用与汽车行业出行趋势加深,为进一步巩固关键技术优势以及稳供控本、提升盈利能力,整车厂加速推进新能源产业链垂直整合。广汽埃安就是最为杰出的代表,他们不仅布局了芯片&…

大话设计模式之迪米特法则

迪米特法则,也称为最少知识原则(Law of Demeter),是面向对象设计中的一个重要原则,其核心思想是降低耦合度、减少对象之间的依赖关系,从而使系统更加灵活、易于维护和扩展。 根据迪米特法则,一…

DataX-Oracle新增writeMode支持update

目录 前言 第一步下载源码 第二步修改源码 1、Oraclewriter 2、WriterUtil 2.1、修改getWriteTemplate方法 2.2、新增onMergeIntoDoString与getStrings方法 3、CommonRdbmsWriter 3.1、修改startWriteWithConnection 3.2、修改doBatchInsert 3.3、修改fillPreparedStatem…

Web Components使用(一)

在使用Web Components之前,我们先看看上一篇文章Web Components简介,其中提到了相关的接口、属性和方法。 正是这些接口、属性和方法才实现了Web Components的主要技术:Custom elements(自定义元素)、Shadow DOM&#…

C#手术麻醉信息系统全套商业源码,自主版权,支持二次开发 医院手麻系统源码

手术麻醉信息系统是HIS产品的中的一个组成部分,主要应用于医院的麻醉科,属于电子病历类产品。医院麻醉监护的功能覆盖整个手术与麻醉的全过程,包括手术申请与排班、审批、安排、术前、术中和术后的信息管理提供支持。 手术麻醉信息系统可与EM…

MySQL 数据库的日志管理、备份与恢复

一. 数据库备份 1.数据备份的重要性 备份的主要目的是灾难恢复。 在生产环境中,数据的安全性至关重要。 任何数据的丢失都可能产生严重的后果。 造成数据丢失的原因: 程序错误人为,操作错误,运算错误,磁盘故障灾难(如火灾、地震&#xff0…

Docker部署MinIO对象存储服务

1. 拉取MinIO镜像 # 下载镜像 docker pull minio/minio#查看镜像 docker images2. 创建目录 # 文件存储目录 mkdir -p /opt/minio/data# 配置文件 mkdir -p /opt/minio/config# 日志文件 mkdir -p /opt/minio/logs3. 创建Minio容器并运行 docker run \ -p 9000:9000 \ -p 90…

CSS(一)---【CSS简介、导入方式、八种选择器、优先级】

零.前言 本系列适用于零基础小白,亦或是初级前端工程师提升使用。 知识点较为详细,如果追求非常详细,请移步官方网站或搬运网站。 1.CSS简介 CSS全称:“Cascading Style Sheets”,中文名:“层叠样式表”…

Codeforces Round 937 (Div. 4)(D~G)

D - Product of Binary Decimals 题意: 思路:观察到n的范围很小,先求出所有可能的二进制十位数,然后dp把所有可能的值求出来。注意不能用求因子的方法来求解,因为这些二进制十位数不一定是素数,先除某个数…

车道线检测项目 | 基于lanenet实现的实时车道线检测

项目应用场景 面向自动驾驶场景的车道线检测场景,项目的特点是能够达到实时的车道线检测 项目效果: 项目细节 > 具体参见项目 README.md (1) 安装依赖 pip3 install -r requirements.txt (2) 测试图片 python tools/test_lanenet.py --weights_pat…

|行业洞察·香氛|《小红书2023香水香氛营销宝典-71页》

报告内容的详细解读: 行业格局 预计到2025年,香水市场规模将超过300亿,小红书成为香水种草的重要平台。从2018年到2025年,市场规模持续增长,年增速保持在20%左右。香水市场的热度在节日节点尤为明显,如情…

以XX医院为例的医疗建筑能效管理系统【建筑能耗 供电可靠 】

一、行业背景 二、行业特点 1.供电可靠性要求高:医院配电系统复杂,门诊、急救、手术室、ICU/CCU、血液透析等场合特一级和一级负荷比较多,一旦发生故障会造成严重影响,对配电可靠性要求极高。 2.能耗水平高:医院能耗…

排序大乱炖

目录 一:插入排序 1.1直接插入排序 1.2希尔排序 二:选择排序 2.1选择排序 2.2堆排序 三:交换排序 3.1冒泡排序 3.2快速排序 3.2.1Hoare版本 3.2.2双指针法 3.2.3非递归 一:插入排序 1.1直接插入排序 直接插入排序…