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

news2024/9/20 13:38:58

创建一个页面

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.coloradmin.cn/o/1316918.html

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

相关文章

使用Audition录制电脑内部声音

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

【️Java是值传递还是引用传递?】

✅Java是值传递还是引用传递? ✅Java是值传递还是引用传递?✅典型理解 ✅增加知识仓✅Java的求值策略✅Java中的对象传递✅值传递和共享对象传递的现象冲突吗? ✅总结 ✅Java是值传递还是引用传递? ✅典型理解 编程语言中需要进行方法间的…

实战演示 H5 性能分析

W3C标准是浏览器标准,一般浏览器都支持W3C标准,它规定使用者可以通过api查询性能信息,可借用W3C协议完成自动化H5性能测试。 W3C官网:www.w3.org/TR/navigati… 使用chrome浏览器对webview进行手工查看,伴随着业务增多…

ChatGPT4 Excel 高级组合函数用法index+match完成实际需求

在Excel 函数用法中有一对组合函数使用是非常多的,那就是Index+match组合函数。 接下来我们用一个实际的需求让ChatGPT来帮我们实现一下。 我们给ChatGPT4发送一个prompt:有一个表格A2至A14为业务员B列至H列为1月至7月的销售额,请根据J2单元格的业务员与K2单元格的月份查找出…

【python】Debian安装miniconda、spyder、tushare

1. miniconda 安装 — 动手学深度学习 2.0.0 documentation中有安装Miniconda的一些说明。 Miniconda — miniconda documentation是Miniconda网站,里面也有安装说明。 Debian安装按照linux安装即可: mkdir -p ~/miniconda3 wget https://repo.anaco…

NoSQL 数据库有哪些典型应用?

前面的内容介绍了数据库读写分离和分库分表相关知识,都是针对关系型数据库的,即通常说的 RDBMS。除了关系型数据库,NoSQL 在项目开发中也有着越来越重要的作用,与此同时,NoSQL 相关的内容也是面试的常客。今天我们一起…

OSG中几何体的绘制(二)

5. 几何体操作 在本章的前言中就讲到,场景都是由基本的绘图基元构成的,基本的绘图基元构成简单的几何体,简单的几何体构成复杂的几何体,复杂的几何体最终构造成复杂的场景。当多个几何体组合时,可能存在多种降低场景渲染效率的原因…

基于linux系统的Tomcat+Mysql+Jdk环境搭建(二)jdk1.8 linux 上传到MobaXterm 工具的已有session里

【JDK安装】 1.首先下载一个JDK版本 官网地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载1.8版本,用红框标注出来了: 也许有的同学看到没有1.8版本,你可以随便下载一个linux的…

最强Pose模型RTMO开源 | 基于YOLO架构再设计,9MB+9ms性能完爆YOLO-Pose

实时多人在图像中的姿态估计面临着在速度和精度之间实现平衡的重大挑战。尽管两阶段的上下文方法在图像中人数增加时会减慢速度,但现有的单阶段方法往往无法同时实现高精度和实时性能。 本文介绍了RTMO,这是一个单阶段姿态估计框架,通过在YOL…

【十】我们都是面向spring注解开发的

spring 注解驱动开发 简介: 前面有写过spring框架的演进历程,得出一个结论就是我们都是面向spring编程的,这里讲另一个结论:我们都是面向spring注解开发的。spring框架的核心设计理念是简化java开发,而这一路的发展越…

超分辨率重建——SAN训练自己数据集及推理测试(详细图文教程)

目录 一、源码包下载二、数据集准备三、预训练权重文件四、训练环境五、训练5.1 超参数修改5.2 训练模型5.2.1 命令方式训练5.2.2 Configuration配置参数方式训练 5.3 模型保存 六、推理测试6.1 超参数修改6.2 测试6.2.1 命令方式测试6.2.2 Configuration配置参数方式测试 6.3 …

TCP报文头(首部)详解

本篇文章基于 RFC 9293: Transmission Control Protocol (TCP) 对TCP报头进行讲解,部分内容会与旧版本有些许区别。 TCP协议传输的数据单元是报文段,一个报文段由TCP首部(报文头)和TCP数据两部分组成,其中TCP首部尤其重…

node.js mongoose简述

目录 官方文档 mongoose Schema Model Query document 关系 官方文档 Mongoose v8.0.3: Getting Started mongoose Mongoose 是一个 Node.js 环境下 MongoDB 的对象建模工具。它提供了一种在应用程序中与 MongoDB 数据库进行交互的方式,使得开发者能够使用…

怎么使用会声会影?2024年最新使用会声会影的具体步骤

一听说视频剪辑我们就不由得联想到电影、电视等一些高端的视频剪辑技术,大家都觉得视频剪辑是一个非常复杂而且需要很昂贵的设备才可以完成的技术活,这对很多“门外汉”来说都可望而不可及。实际上,使用会声会影剪辑视频不仅是很多人都可以操…

哈希扩展:位图与布隆过滤器

目录 1. 位图1.1 位图引入1.2 位图概念1.3 位图的模拟实现1.4 位图相关问题1.5 位图的应用 2. 布隆过滤器2.1 布隆过滤器概念2.2 模拟实现2.3 布隆过滤器相关问题2.3.1 哈希切分 1. 位图 1.1 位图引入 给40亿个不重复的无符号整数,没排过序。给一个无符号整数&…

Java 基础学习(十二)文本I/O、日期与时间API

1 文本 I/O 1.1 字符流 1.1.1 什么是字符流 在Java中,字符流是指提供了基于字符的I/O能力的API。 Java 1.0中提供的基于字节的I/O流API只能支持8位字节流,无法妥善地处理16位Unicode字符。由于需要支持Unicode处理国际化字符,因此Java 1.…

网络安全——Iptables防DDoS攻击实验

一、实验目的要求: 二、实验设备与环境: 三、实验原理: 四、实验步骤: 五、实验现象、结果记录及整理: 六、分析讨论与思考题解答: 一、实验目的要求: 1、掌握常见DDoS攻击SYN Flood的攻击…

Toyota Programming Contest 2023#8(AtCoder Beginner Contest 333)

A - Three Threes 题目大意:给你一个整数n,将这个数n输出n次。 呃呃 B - Pentagon 题目大意:给你一个正五边形ABCDE,给你任意两条边,判断是否相等 主要问题要判断一下内边:AD,AC,…

小 cookie,大作用:探索网站中的隐私追踪器(下)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

用Flask搭建简单的web模型部署服务

目录结构如下: 分类模型web部署 classification.py import os import cv2 import numpy as np import onnxruntime from flask import Flask, render_template, request, jsonifyapp Flask(__name__)onnx_session onnxruntime.InferenceSession("mobilen…