通过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…

Golang基础-5

Go语言基础 介绍 基础 切片 切片声明 切片初始化 切片基础操作 多维切片 介绍 本文介绍Go语言中切片(slice)(切片声明、切片初始化、切片基础操作、多维切片)等相关知识。基础 切片 切片(slice)是对数组的一个连续片段的引用,切片是一个引用类型。切片是长度可变的数组,…

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

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

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

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

状态模式实战运用

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

JavaScript es6之前实现继承的方法

1.原型链继承 function Parent() {this.parentProperty true; }function Child() {this.childProperty false; }Child.prototype new Parent();var child new Child(); console.log(child.parentProperty ); // true 优点: 简单直观可以继承原型上的属性和方…

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

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

FFMPEG C++封装(二)

4 详细设计 这章是FFMPEG C封装库的详细设计。 4.1 Init 该模块初始化FFMPEG库。 4.1.1 Init定义 namespace media { namespace sdk { void MEDIASDK_EXPORT Init(); } }函数说明: Init 初始化FFMPEG库,该函数可调用多次。 4.1.2 Init实现 name…

enscan自动化主域名信息收集

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

极狐GitLab 14.4 重点功能解读,和禅道集成啦【二】

GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab :https://gitlab.cn 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署极狐GitLab。 更多关于极狐GitLab &#xff1…

如何购买阿里云服务器?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&#…

轻松解决Composer常见错误

引言: Composer作为PHP的一个重要组成部分,为PHP开发者提供了非常方便的依赖管理工具。但是,难免会在使用中遇到一些常见的错误,如连接错误、内存限制错误、版本冲突错误、锁定文件错误和类未找到错误等。这些错误可能会影响我们…

vue3 项目中引入tailwindcss

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类(class)名,然后生成相应的样式代码并写入 到一个静态 CSS 文件中。 官网:https://www.tailwindcss.cn/docs/installation 在项目中使用过…

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

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

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

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

LeetCode 20.有效的括号

给定一个只包括 ‘(’,‘)’,‘{’,‘}’,‘[’,‘]’ 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个右括号都…