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

news/2024/7/10 0:54:21 标签: 服务器, 前端框架, vue, nginx

创建一个页面

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.niftyadmin.cn/n/5268635.html

相关文章

C语言学习第二十四天(预处理)

1、预处理符号 C语言设置了一些可以直接使用的预处理符号 __FILE__//进行编译的源文件 __LINE__//文件当前的行号 __DATE__//文件被编译的日期 __TIME__//文件被编译的时间 __STOC__//如果编译器遵循ANSI C 其值是1,否则未定义 一个例子: printf(&…

Docker单机部署OceanBase

文章目录 说明机器软硬件要求指导文档本次部署环境说明 OceanBase单机部署(Docker)一:拉取 OceanBase 数据库相关镜像二:启动 OceanBase 数据库实例完整启动日志展示 三:连接实例遇到报错:没有mysql客户端 …

【MISRA C 2012】Rule 5.4 宏标识符应该是不同的

1. 规则1.1 原文1.2 分类 2. 关键描述3. Example4. 代码实例 1. 规则 1.1 原文 1.2 分类 规则5.4:宏标识符应该是不同的 Required要求类规范。 2. 关键描述 该规则要求,当定义宏时,其名称与: •当前定义的其他宏的名称;和 •参数的名称。…

深拷贝和浅拷贝(js的问题)

深拷贝:修改复制对象,原始对象不会变化浅拷贝:修改复制对象,原始对象也变化 方式: 遍历赋值Object.create()JSON.parse()和JSON.stringify() 操作的对象 var obj {a: "Hello",b: {a: "world"…

本地运行大语言模型并可视化(Ollama+big-AGI方案)

目前有两种方案支持本地部署,两种方案都是基于llamacpp。其中 Ollama 目前只支持 Mac,LM Studio目前支持 Mac 和 Windows。 LM Studio:https://lmstudio.ai/ Ollama:https://ollama.ai/download 本文以 Ollama 为例 step1 首先下…

Linux 基本语句_15_Tcp并发服务器

原理&#xff1a; 利用父子进程。父进程接收客户端的连接请求&#xff0c;子进程处理客户端的数据处理操作&#xff0c;两者各施其职。最终实现能够多个客户端连接一个服务端的操作。 代码&#xff1a; 服务端代码&#xff1a; #include <stdio.h> #include <sys/…

Python基础04-数据容器

零、文章目录 Python基础04-数据容器 1、了解字符串 &#xff08;1&#xff09;字符串的定义 字符串是 Python 中最常用的数据类型。我们一般使用引号来创建字符串。创建字符串很简单&#xff0c;只要为变量分配一个值即可。<class ‘str’>即为字符串类型。一对引号…

HiveSql语法优化三 :join优化

前面提到过&#xff1a;Hive拥有多种join算法&#xff0c;包括Common Join&#xff0c;Map Join&#xff0c;Bucket Map Join&#xff0c;Sort Merge Buckt Map Join等&#xff1b;每种join算法都有对应的优化方案。 Map Join 在优化阶段&#xff0c;如果能将Common Join优化为…