通过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.hqwc.cn/news/575840.html

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

相关文章

PS从入门到精通视频各类教程整理全集,包含素材、作业等

PS从入门到精通视频各类教程整理全集,包含素材、作业等 最新PS以及插件合集,可在我以往文章中找到 由于阿里云盘有分享次受限制和文件大小限制,今天先分享到这里,后续持续更新 【Photoshop 教程】史上最容易听懂的PS...在最后四…

Java八股文(JVM)

Java八股文のJVM JVM JVM 什么是Java虚拟机(JVM)? Java虚拟机是一个运行Java字节码的虚拟机。 它负责将Java程序翻译成机器代码并执行。 JVM的主要组成部分是什么? JVM包括以下组件: ● 类加载器(ClassLoa…

Day53:WEB攻防-XSS跨站SVGPDFFlashMXSSUXSS配合上传文件添加脚本

目录 MXSS UXSS:Universal Cross-Site Scripting HTML&SVG&PDF&SWF-XSS&上传&反编译(有几率碰到) SVG-XSS PDF-XSS Python生成XSS Flash-XSS 知识点: 1、XSS跨站-MXSS&UXSS 2、XSS跨站-SVG制作&配合上传 3、XSS跨站-…

怎样去保证 Redis 缓存与数据库双写一致性?

解决方案 那么我们这里列出来所有策略,并且讨论他们优劣性。 先更新数据库,后更新缓存先更新数据库,后删除缓存先更新缓存,后更新数据库先删除缓存,后更新数据库 先更新数据库,后更新缓存 这种方法是不推…

vue 元素拖动,复制,已复制元素可移动,快捷方便,已解决

注意:使用当前组件时,请先了解组件代码逻辑 下方组件根据自己的需求来更改响应的元素id,调整代码实现逻辑,这里不过多解释 import Vue from "vue";/*** 拖拽*/ Vue.directive("Drag", (el) > {const move…

云能耗管理系统在某高校建筑系统平台的开发与应用

摘要:依据本项目依托某学院的电能计量管理系统、给水计量监管系统以及供热计量管理系统等基础平台,制订了高等学校建筑能耗综合管理系统平台应用的总体框架和方案,该系统可以对校园建筑的各种用能情况进行实时监测、统计能耗、进行能效分析&a…

如何将几个长度相同的列表并列组合在一起(附:zip函数使用出错原因:巨坑~)

Python中列表对象使用很方便,用Python编程时,经常会遇到将多个长度相同的列表是针对某一组特定对象的,如何能方便的把这些列表组合起来一起使用呢?ZIP()函数可以方便的解决这个问题。 一、将几个长度相同的列表并列组合 例如&am…

Siemens S7-1500TCPU 运动机构系统功能简介

目录 引言: 1.0 术语定义 2.0 基本知识 2.1 运动系统工艺对象 2.2 坐标系与标架 3.0 运动机构系统类型 3.1 直角坐标型 3.2 轮腿型 3.3 平面关节型 3.4 关节型 3.5 并联型 3.6 圆柱坐标型 3.7 三轴型 4.0 运动系统的运动 4.1 运动类型 4.1.1 线性运动…

若依 3.8.7版本springboot前后端分离 整合mabatis plus

1.去掉mybatis 这一步我没有操作&#xff0c;看别人的博客有说不去掉可能冲突&#xff0c;也可能不冲突&#xff0c;我试下来就没去掉如需要去除&#xff0c;到总的pom.xml中properties标签下的<mybatis-spring-boot.version>x.x.x</mybatis-spring-boot.version>…

flutter生成二维码并截图保存到图库

引入库&#xff1a;flutter_screenutil、image_gallery_saver、qr_flutter弹窗布局 import dart:async; import dart:typed_data; import package/generated/l10n.dart; import package:jade/configs/PathConfig.dart; import package:jade/utils/ImageWaterMarkUtil.dart; im…

k8s局域网通过operator部署rabbitmq

参考&#xff1a;Installing RabbitMQ Cluster Operator in a Kubernetes Cluster | RabbitMQ 1、下载cluster-operator.yml wget https://github.com/rabbitmq/cluster-operator/releases/download/v2.7.0/cluster-operator.yml 2、拉取对应的镜像&#xff0c;这里的版本是根…

【Java 多线程】从源码出发,剖析Threadlocal的数据结构

文章目录 exampleset(T value)createMap(t, value);set(ThreadLocal<?> key, Object value)ThreadLocalMap和Thread的关系 全貌 ThreadLocal是个很重要的多线程类&#xff0c;里面数据结构的设计很有意思&#xff0c;很巧妙。但是我们平时使用它的时候常常容易对它的使用…