Nginx部署前端静态网站详细教学(一步步操作)

news2025/1/18 19:04:46

前言

从零开始使用Xshell、Xftp、Nginx 简单部署静态网站,需准备云服务器(阿里云、腾讯云、华为云等都可)

一.下载安装Xshell和Xftp

  XShell 用于命令行操作服务器,Xftp 用于对服务器的文件上传和下载

  官方下载地址:NetSarang Homepage CN - NetSarang Website

 在页面底部选择免费版

 填入正确姓名邮箱,收到邮件后即可下载免费软件,安装的话一直next就ok了。

二.新建会话连接服务器

步骤:  打开Xshell新建会话链接 --> 输入服务器名称(可自定义) --> 输入主机 ip 地址(服务器公网 ip)--> 端口号  --> 其他内容默认  --> 点击确认

 

 

 

输入命令检测是否连接成功:

cd /
ll
或
ping baidu.com
都可以访问,即连接成功 !

如图 :

三.Nginx服务器

Nginx官网:

①安装yum依赖

yum install yum-utils

②添加yum源文件

cd /etc/yum.repos.d/
# 添加nginx的yum源码
vim nginx.repo

# 或 直接新建 nginx.repo 文件
vim /etc/yum.repos.d/nginx.repo

# 按下键盘中 “i” 键 进入编辑状态

③添加配置信息到 nginx.repo 文件中

[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

保存退出 esc

:wq

④安装 Nginx

yum install -y nginx
# yum install nginx
# 如果使用yum install xxxx,会找到安装包之后,询问你Is this OK[y/d/N],需要你手动进行选择。
# 但是如果加上参数-y,就会自动选择y,不需要你再手动选择!

⑤查看 Nginx 的版本号

nginx -v
# 显示nginx的版本号和编译信息

⑥查看安装的所有 Nginx 包

yum list | grep nginx

⑦查看 Nginx 安装相关的文件位置信息

whereis nginx

Nginx 目录结构

# Nginx终端管理理命令
/usr/sbin/
# 启动 Nginx
/usr/sbin/nginx

# Nginx 配置
/etc/nginx
/etc/nginx/nginx.conf
/etc/nginx/conf.d
/etc/nginx/conf.d/default.conf

# Nginx模块⽬录
/usr/lib64/nginx

# 默认站点目录
/usr/share/nginx

四.Nginx 静态网站部署

①直接进入 Nginx 的默认站点静态文件目录 /usr/share/nginx/html 将自己的项目文件上传上来即可完成基础的测试部署,作为 Nginx 部署的初体验

# 查看nginx的文件位置
whereis nginx
# 进入nginx 默认站点静态文件目录
cd /usr/share/nginx/
ll
cd html
ll

② 登录链接 Xftp

 ③上传项目源文件

④上传网站源文件后,在浏览器中输入服务器 ip 即可访问 !

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

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

相关文章

你评论,我赠书~【哈士奇赠书 - 16期】〖Vue.js 快速入门实战〗等你来拿

推荐: Python全栈白宝书专栏,免费阶段订阅数量4300,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利:加入社区的小伙伴们,除了可以获取博主所有付费专栏的阅读权限之外,还有机会加入 星荐官共赢计划…

html网页调用后端python代码方法

当我们利用html代码制作网页时,可以用以下方法进行python代码的调用: 1.简单的python代码例如输出‘hello world’时,可以选择直接在网页写入python代码的方式调用,这时候我们就需要了解Pyscript了。以下是在网页里直接运行简易python语段的…

AJAX中的跨域(CORS) 问题 (更新于2023.02.04)

目录​​​​​​​ 预检请求 实例讲解 2023.02.04 更新 此文章在介绍跨域加载的同时,也解决了在使用axios.post()时如下跨域加载失败问题: from origin null has been blocked by CORS policy: Response to preflight request doesnt pass access c…

element-ui实现图片上传功能(前台部分)

文章目录前言一、 template 部分二、script部分1、导入token2、在data中注册以下3、method中的方法4、style前言 最近做的项目中需要实现图片上传功能,一开始也不懂,经过一段时间的学习后,终于实现了图片上传功能。我将分为前台与后台两部分…

vue 基于axios封装request接口请求——request.js文件

目录 了解几个Content-type类型 第一种:application/json;charsetUTF-8 第二种:multipart/form-data 第三种: application/x-www-form-urlencoded 第一步新建request.js文件 第二步新建services/apiUrl文件 第三步新建services/index.…

【前端】深入浅出缓存原理

缓存的基本原理 对于前端来说,缓存主要分为浏览器缓存(比如 localStorage、sessionStorage、cookie等等)以及http缓存,也是本文主要讲述的。 当然叫法也不一样,比如客户端缓存大概包括浏览器缓存和http缓存 所谓htt…

手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】

前端的那些基本标签🍓🍓 直角三角形🍓🍓文件扩展名🍓🍓分隔符🍓🍓单向绑定🍓🍓创建数组🍓🍓判断版本🍓🍓什么是…

四、nginx静态文件的配置

1. 根据上节内容的提示,我们知道如何进行nginx的信号控制和命令行控制了。 2. 这节主要是学习nginx的静态文件、缓存、静态文件压缩等相关内容。 一、 配置并访问nginx静态文件 1.1 root配置nginx静态文件地址 在nginx.conf 配置文件中默认使用root配置了nginx静态…

vue项目使用svg图片

(svg-sprite-loader以及vue2-svg-icon的使用) 第一种方式: 1、安装svg-sprite-loader npm install svg-sprite-loader --save-dev 2、webpack 配置(build/webpack.base.conf.js) { test: /\.svg$/, loader: svg-spr…

小程序表单校验uni-forms正确使用方式及避坑指南

小程序表单校验uni-forms正确使用方式及避坑指南一、前言二、成果展示三、uni-forms即时校验四、uni-forms自定义校验规则五、uni-forms异步校验六、完整示例源码七、最后,点个赞一、前言 小程序上使用表单理应是很常用,也很必须的功能,因为…

【微信小程序】自定义组件

组件的创建与引用 1.1、创建组件 (1)在项目的根目录中,鼠标右键,创建 components > test 文件夹 (2)在新建的 components > test 文件夹中,鼠标右键,点击“新建 Component” …

通过JavaScript、css、H5 实现简单的tab栏的切换和复用

目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 一、效果展示 二、实现的大致原理 1.我们先通过css 和h5布局得到最基本的tab栏样式(有代码参考) 2.在获得样式,给我们所需要点击的目标设…

yolov5部署+微信小程序前端展示

分为yolov5项目部署和微信小程序两部分,先介绍微信小程序前端展示flask后端,之后介绍项目部署这部分。 一、先上效果图 1. 点击选择图片,调用摄像头选择图片 2.选择图片之后,点击开始检测,然后返回结果 ​​​​​​…

CTF----Web真零基础入门

目录 前置知识导图: ​TCP/IP体系结构(IP和端口): IP是什么:是计算机在互联网上的唯一标识(坐标,代号),用于在互联网中寻找计算机。 内网(局域网&#xf…

JSONP解决跨域问题

一、什么是同源 概念:如果两个页面的协议、域名和端口都相同,则这两个页面具有相同的源。 二、什么是同源策略 概念:是浏览器提供的一个安全功能。 三、什么是跨域 概念:同源指的是两个URL的协议、域名、端口号一致&#xff0c…

前端开发调式必备技能F12开发者工具之Elements(元素)面板,详细图解带流程【第一部分】

目录 一、进入浏览器开发工具的几种方式 二、Elements(元素)面板 左侧区域 右侧区域 计算样式 事件监听器 大家好!我是爷爷的茶七里香,这个名字有没有让你想起周董的歌捏?好了,废话不多说,开始今…

项目实训记录(十二)——el-table-column根据条件修改字体颜色

目录 一、干了什么? 二、问题和解决方法 1. el-table-column根据条件修改字体颜色 2.问题 总结 一、干了什么? 本周要完成数据去重工作和前端的完善。 清理工作 主要是来删除用户插入的重复数据。由管理员决定表是否允许重复数据。如果用户上传的表不允…

vue3 自定义全局loading组件 (PC和移动端都非常适用)

前言 在开发的过程中,点击提交按钮,或者是一些其它场景总会遇到loading加载框,PC的一些ui库也没有这样的加载框,无法满足业务需求,因此可以自己自定义一个,实现过程如下。 效果图(loading样式…

个人博客小程序

文章目录1.前言2.首页博客数据展示3.用data中的数据渲染博客展示4.使用云数据库创建集合blogs5.读取数据库中的数据6.创建添加博客页面1.前言 这篇文章详细的介绍了个人博客小程序的云开发流程,包括博客展示页面,添加博客页面的创建,以及云函…

pm2基本使用

1.pm2的基本介绍 pm2是node的进程管理器,利用它可以简化node任务的管理,且内置了许多功能,常用于后台脚本管理。 pm2特性 自带热部署 - - - 当源文件更新 线上项目也会自动重启后台运行 - - - 不会占用实时窗口 会在后台运行服务信息查看 - - - 查看运行中程序的…