从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:端口即可看到是否成功

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

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

相关文章

线程终止,线程的相关方法,线程状态图以及线程的同步机制。

首先我们知道了什么是线程,以及线程的实现方法,接下来我们来了解一下继承Thread类和Runnable接口的区别,其实本质上是没有区别的,因为Thread也实现了Runnable的接口,唯一区别就是使用Runnable接口,可以实现…

关联规则 Apriori算法原理

Apriori算法 算法概述 Apriori算法利用频繁项集生成关联规则。它基于频繁项集的子集也必须是频繁项集的概念频繁项集是支持值大于阈值 (support) 的项集 Apriori算法就是基于一个先验如果某个项集是频繁的,那么它的所有子集也是频繁的 算法流程 输入: 数据集合D…

【笔试强化】Day 4

文章目录 一、单选1.2.3.4.5.6.7. 二、不定项选择1.2.3. 三、编程1. 计算糖果题解:代码: 2. 进制转换题解:代码: 一、单选 1. 正确答案:D队列先进先出 A:栈有关 B:错 C:错 2. 正确…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《考虑灵活性资源传输精细化建模的配电网优化运行》

这个标题表达的是关于配电网优化运行的一个概念,其中考虑了灵活性资源传输的精细化建模。让我们逐个解读关键词: 考虑灵活性资源传输:这指的是在配电网优化运行中考虑到不同类型的灵活性资源的传输。灵活性资源包括可再生能源、储能系统、柔性…

爬虫工作量由小到大的思维转变---<第十一章 Scrapy之sqlalchemy模版和改造(番外)>

前言: 正常的pymysql当然问题不大,但是我个人还是建议:sqlalchemy! 因为他更能让我们把精力放在表单设计上,而不执着于代码本身了. (-----版权所有。未经作者书面同意,不得转载或用于任何商业用途!----) 正文: 先提供一个基础模版: 表图: 创建表的sql: CREA…

crmeb v5新增一个功能的完整示例记录

首先,需求 工作中的二开需求是这样的,修改首页的装修,并新增回收报价的功能 开始动手 第一步,我们要到后面的管理界面,去装修中修改首面的展示 首页的页面配置好之后,就要在 前端的展示程序中 配置相…

【专栏目录】

摘要 本专栏是讲解如何改进RT-DETR的专栏。改进方法采用了最新的论文提到的方法。改进的方法包括:增加注意力机制、更换卷积、更换block、更换backbone、更换head、更换优化器等;每篇文章提供了一种到N种改进方法。 评测用的数据集是我自己标注的数据集…

如何使用ycsb工具对mongodb进行性能测试过程

测试环境: linux系统:Centos 7.2 ,版本:Red Hat 4.8.5-44) YCSB简介 ycsb是一款性能测试工具,用Java写的,并且什么都可以压,像是mongodb,redis,mysql,hbase,等…

某60内网渗透之frp实战指南2

内网渗透 文章目录 内网渗透frp实战指南2实验目的实验环境实验工具实验原理实验内容frp实战指南2 实验步骤(1)确定基本信息。(2)查看frp工具的基本用法(3)服务端frp的配置(4)客户端frp的配置(5)使用frp服务 frp实战指南2 实验目的 让学员通过该系统的练习主要掌握&#xff1a…

Python基础06-异常

零、文章目录 Python基础06-异常 1、异常的基本概念 (1)异常是什么 当检测到一个错误时,解释器就无法继续执行了,反而出现了一些错误的提示,这就是所谓的"异常"。 (2)异常演示 …

【NSX-T】9. 搭建NSX-T环境 —— 使用 OSPF 配置 Tier-0 网关

目录 Lab 说明9.1 创建上行链路网段9.2 创建 Tier-0 网关(1)设置 Interface 信息(2)禁用 BGP(3)启用和配置 OSPF(4)查看 OSPF Neighbors(5)为 OSPF 配置路由重…

基于BWA,Bowtie2,samtools、checkm等工具计算宏基因组学序列分析中Contigs与Genes在样品中的丰度,多种计算方式和脚本对比

计算contigs和genes相对丰度可以提供有关微生物群落结构和功能的信息。以下是计算这两个指标的意义: 1. Contigs的相对丰度:contigs是利用基因组测序技术获得的碎片序列,通过计算contigs的相对丰度可以了解微生物群落中不同菌种的相对丰度。…

使用Audition录制电脑内部声音

在电脑上播放的媒体文件,包括视频和声音,很多是可以播放却无法保存的。例如一些网页播放的视频,或者在线播放的音乐。 视频的话,可以使用工具来截图,抓取GIF或录屏。 声音的话,也可以使用工具进行录制。这里…

Oracle EBS PAC“定期成本分配处理程序”报错:30004不存在为成本类型、成本组和法人主体定义的帐户

Oracle EBS版本: RDBMS : 12.1.0.2.0 Oracle Applications : 12.2.6 问题症状: 中文环境: 30004不存在为成本类型、成本组和法人主体定义的帐户。 CSTPALPC.dyn_proc_call : Error Calling Package 30004不存在为成本类型、成本组和法人主…

c++ websocket 协议分析与实现

前言 网上有很多第三方库,nopoll,uwebsockets,libwebsockets,都喜欢回调或太复杂,个人只需要在后端用,所以手动写个; 1:环境 ubuntu18 g(支持c11即可) 第三方库:jsoncpp,openssl 2:安装 jsoncpp 读取json 配置文件 用 自动安装 网…

最新50万字312道Java经典面试题52道场景题总结(附答案PDF)

最近有很多粉丝问我,有什么方法能够快速提升自己,通过阿里、腾讯、字节跳动、京东等互联网大厂的面试,我觉得短时间提升自己最快的手段就是背面试题;花了3个月的时间将市面上所有的面试题整理总结成了一份50万字的300道Java高频面…

国际教育-S1试讲讲稿

习题题目 答案 用到的概念: 概率之和等于1 E ( x ) ∑ i 1 4 x i P i E(x)\sum_{i1}^4x_iP_i E(x)∑i14​xi​Pi​ E ( x 2 ) ∑ i 1 4 x i 2 P i E(x^2)\sum_{i1}^4x_i^2P_i E(x2)∑i14​xi2​Pi​ V a r ( X ) Var(X) Var(X) ∑ i 1 4 ( x i − x ‾ ) 2…

自定义时间选择器

自定义时间选择器 文章目录 自定义时间选择器第一章 效果演示第01节 效果图第02节 主要文件 第二章 案例代码第01节 核心文件 WheelPicker第02节 实体类 WheelBean第03节 接口类 IWheelPicker第04节 原子时间类 DateTimePickerView第05节 原子时间类 PickerYear第06节 原子时间…

nginx的location与rewrite

目录 一.location 二.rewrite rewrite跳转实现: 语法格式:rewrite [flag]; flag标记说明: 三.基于域名跳转 四.基于ip跳转 五.基于旧域名跳转到新域名后面加目录 六.基于参数匹配的跳转 可以同过全局变量来匹配: 基于目…

linux常见错误

1.E45: ‘readonly‘ option is set (add ! to override) 首先使用以下命令从Vim编辑器中出来::qa!(强制退出) 接下来,使用sudo vim filename和更高版本::wq 2.Bash script – "/bin/bash^M: bad interpreter: No such file or direc…