从0创建并部署一个网页到服务器

创建一个页面

1 下载node.js 下载VScode

2 在Windows下找一个路径新建一个文件夹  例如:D:\study_project\PersonalWeb

3 VSCodee中打开文件夹

4 Windows下 管理员身份打开命令提示符,执行npm install -g @vue/cli

5 VSCode下打开终端,执行下列命令 vue create myweb (myweb是项目的名字,名字中不能包含大写字母 否则会报错)

6 然后一直是默认选项 回车即可

然后就会看到项目路径下是这样的

7 打开VSCode终端 执行下列命令:npm run serve 启动开发服务器 然后打开下面的URL就能看到界面了

部署到服务器

我本机Windows,服务器是Ubuntu系统

1 远程连接服务器  ssh 用户名@123.249.88.177

输入密码 进入到根目录下

2 下载nginx

sudo apt update

sudo apt install nginx

完成后重启sudo systemctl start nginx

3 验证是否成功,在自己的浏览器输入自己的服务器IP显示界面如下

4 将自己的项目生成一个静态页面

npm run build

然后自己项目下就会有一个dist文件夹

5 把dist上传到自己的服务器

在服务器下新建一个路径,然后在项目本机执行如下命令

scp  -r  D:\study_project\PersonalWeb\myweb\dist  root@123.249.88.177:/home/myweb

先输入本地工程的路径 再输入你的服务器的用户名@IP:/路径

然后去服务器查看文件存在

6 配置nginx代理

Nginx的配置文件一般在根目录下,vim  /ect/nginx/nginx.conf

然后增加如下配置

7 检查 nginx -t

8 重启nginx  sudo systemctl restart nginx

9 在自己的浏览器输入IP:端口即可看到是否成功

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

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

相关文章

Winform高效获取控件(Control)方法 + 源码分析

背景:风好大,睡觉有点怕,起床敲代码了 之前学的都是都是通过遍历控件(Controls),判断控件名是否相等来获取Control 其实直接通过:Controls["控件名"],就可以获得需要的控件 为什么呢…

SQL错题集3

1.薪水第二多的员工的emp_no以及其对应的薪水salary limit a,b 其中a表示查询数据的起始位置,b表示返回的数量。 (MySQL数据库中的记录是从0开始的) 注意从0开始 2.员工编号emp_no为10001其自入职以来的薪水salary涨幅值growth 聚合函数不能…

java简易制作-王者荣耀游戏

一.准备工作 首先创建一个新的Java项目命名为“王者荣耀”,并在src下创建两个包分别命名为“com.sxt"、”com.stx.beast",在相应的包中创建所需的类。 创建一个名为“img”的文件夹来储存所需的图片素材。 二.代码呈现 package com.sxt; import javax…

Spring cloud - 断路器 Resilience4J

其实文章的标题应该叫 Resilience4J,而不是Spring Cloud Resilience4J,不过由于正在对Spring cloud的一系列组件进行学习,为了统一,就这样吧。 概念区分 首先区分几个概念 Spring cloud 断路器:Spring Cloud的官网对…

关于Linux你必须知道的五件事

Linux是一种开源操作系统 (OS)。操作系统是直接管理系统硬件和资源(如 CPU、内存和存储)的软件。操作系统位于应用程序和硬件之间,并在所有软件和执行工作的物理资源之间建立连接。 俄罗斯军方计划用 Astra Linux 取代 Windows!为…

OceanBase数据库初识

文章目录 说明分布式数据库发展发展历史OceanBase和传统数据库的对比总结 OceanBase数据库产品简介应用案例 OceanBase数据库产品OceanBase数据库内核OceanBase开发者中心(ODC)产品架构OMS核心功能简介 说明 本文仅供学习和交流学习内容参考官方的培训资…

eNSP小实验(ACL和NAT)

一.ACL 实验目的:过滤流量,然后匹配规划后,判断该流量通过或拒绝 1.拓扑图 2.配置 基本ACL 其它同理配置 R1 [Huawei]sys R1 [R1]int g0/0/0 [R1-GigabitEthernet0/0/0]dis th [V200R003C00] # interface GigabitEthernet0/0/0 # return…

汽车租赁小程序源码租车小程序

汽车租赁小程序,多门店租车小程序,本套系统分为用户端,门店管理端,总管理后台三部分。门店可以加盟入驻平台。可以源码,也可以二次开发,也可以定制开发。php开发语言,前端是uniapp。用户端是小程…

智能优化算法应用:基于闪电搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于闪电搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于闪电搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.闪电搜索算法4.实验参数设定5.算法结果6.…

SpringCloud面试题——分布式事务

一:什么是分布式事务? 分布式事务是指在分布式系统中涉及到多个数据库或多个应用程序之间的事务处理,这些数据库或应用程序可能分布在不同的物理节点上,甚至可能位于不同的地理位置。在分布式事务中,需要确保所有参与者的事务操…

Docker创建镜像的方式---Dockerfile

Dockerfile可以创建自定义镜像。包括配置文件,挂载点,对外暴露的端口,设置环境变量。 Docker创建镜像的方式 1、 基于已有镜像创建:根据官方提供的镜像源,创建镜像。然后拉起容器。是一个白板智能提供基础的功能&…

Redis实现延迟队列

目录 一、什么是延时队列 二、延时队列的应用 三、举例说明 我的设计思想: 一、什么是延时队列 延时队列相比于普通队列最大的区别就体现在其延时的属性上,普通队列的元素是先进先出,按入队顺序进行处理,而延时队列中的元素在入队时会指定…

魔众文库系统v5.7.0版本文件顺序选择,短信注册支持设置密码,前端界面升级

文件顺序选择,短信注册支持设置密码,前端界面升级 [新功能] 富文本支持文档一键导入,支持Word文档(docx)、Markdown文档(md) [新功能] 财务中心→全部订单新增"业务订单ID"筛选条件…

10天玩转Python第7天:python 面向对象 全面详解与代码示例

今日内容 封装(定义类的过程) 案例(存放家具) 继承 多态 封装的补充 私有和公有权限属性的分类(实例属性, 类属性)方法的分类(实例方法, 类方法, 静态方法) 封装案例 # 定义家具类 class HouseItem: """家具类""" def __init__(self, name, a…

linux应用层编程问题--沙雕问题

1.调用沁恒 USB读取接口 读不到数据 static bool CH37XASyncReadData(int iIndex, uint32_t epindex, void *oBuffer, uint32_t *ioLength) {struct _bulkUp {uint32_t len;uint8_t epindex;uint8_t data[0];} __attribute__((packed));struct _bulkUp *bulkUp;int retval;bul…

zookeeper基础内容

文章目录 Zookeeper基础概述数据结构Zookeeper节点操作zookeeper节点操作命令数据模型 znode 结构 zookeeper java客户端ZooKeeper原生APICuratorzkClient对比总结 Zookeeper基础 概述 zookeeper(分布式协调服务) 本质:小型的文件存储系统监…

Android13适配所有文件管理权限

Android13适配所有文件管理权限 前言: 很早之前在Android11上面就适配过所有文件管理权限,这次是海外版升级到Android13,由于选择相册用的是第三方库,组内的同事没有上架Google的经验直接就提交代码,虽然功能没有问题…

3.qml 3D-Node类学习

Node类是在View3D 中的对象基础组件,用于表示3D空间中的对象,类似于Qt Quick 2D场景中的Item,介绍如下所示: 如上图可以看到,Node类的子类非常多,比如Model类(显示3D模型)、ParticleSystem3D粒子系统类、Li…

Guardrails for Amazon Bedrock 基于具体使用案例与负责任 AI 政策实现定制式安全保障(预览版)

作为负责任的人工智能(AI)战略的一部分,您现在可以使用 Guardrails for Amazon Bedrock(预览版),实施专为您的用例和负责任的人工智能政策而定制的保障措施,以此促进用户与生成式人工智能应用程…

C#爬虫1688以图搜图API接口功能的实现

背景 在1688有个功能,就是上传图片,就可以找到类似的商品。如下 网址 :https://www.1688.com/ 这时候,我们可以使用程序来代替,大批量的完成图片上传功能。 实现思路 1、找到图片上传接口 post请求,for…