前端将项目部署到服务器(Nginx)的完整步骤(超级详细、保姆级)

本文详细介绍了在Linux服务器上安装Nginx的步骤,包括准备环境(如Xshell和Xftp的使用)、安装依赖、下载、编译和配置Nginx,以及通过Xshell连接服务器、上传静态资源和重启服务的过程。

目录

一、准备环境

 二、安装Xshell

Xshell下载

 2.1  XShell初始化界面

2.2 点击“新建”,新建会话

2.3  填写会话信息

2.4 填写服务器的用户名和密码,之后点击“确定”

2.5 选中会话,点击“连接”

2.6 此时已经成功的的连接上了服务器,可以进行正常的命令操作

三、安装Nginx

3.1 下载nginx压缩包;点我下载nginx

3.2 Xshell连接nginx,在2.6 步骤中执行命令行查看nginx进程是否启动 ps -ef | grep nginx 

四、安装VMware

4.1 镜像文件的下载

4.2 在VMware中配置镜像文件

4.3 点击自定义(高级)​编辑

4.4 接下来直接下一步即可,固态类型,选择 BIOS 即可。

4.5 这里根据物理机的硬性要求,自定义设置

4.6 分配运行内存 

4.7 设置网络

 4.8 接下来直接下一步即可,配磁盘空间,选择单个文件初期方便管理。

4.9 点击自定义硬件 

4.10 选择win10的镜像文件

 4.11 安装完成之后,点击开始此虚拟机进入安装win10

 4.12 接下来就是一些列的安装步骤 :

 五、打包部署Vue

5.1 连接服务器

5.2 创建

 5.3 打包

5.4 解压

5.5 修改一下nginx配置

5.6 重启

5.7 更新包


一、准备环境

1、服务器或者虚拟机(后端已经搭建好的,这里就不讲述如何搭建服务器了)
2、Xshell 和 Xftp --> 存放静态文件和操作服务器
3、Windows 系统
Xshell:是一个强大的安全终端模拟软件,可以在 Windows 界面下用来访问远端不同系统下的服务器。(作用就是用来连接远程服务器的)
Xftp:是一个功能强大的 SFTP、FTP 文件传输软件。(作用是存放静态文件和上传静态资源)

 二、安装Xshell

Xshell下载

这里给大家提供两种 Xshell 下载方式。

(1)方式一:从网盘下载 Xshell ,直接解压后就可以使用

本地网盘下载链接:夸克网盘分享

(2)方式二:直接在官网下载免费版,安装很简单,只需要选择【安装路径】,或一路下一步即可安装成功。

Xshell 官网免费版下载:家庭/学校免费 - NetSarang Website

 2.1  XShell初始化界面

2.2 点击“新建”,新建会话

2.3  填写会话信息
  •  填写一个便于标识的名称
  • 填写服务器的公网 IP
  • 点击用户身份验证

2.4 填写服务器的用户名和密码,之后点击“确定”

2.5 选中会话,点击“连接”

2.6 此时已经成功的的连接上了服务器,可以进行正常的命令操作

使用 xshell 连接服务器时,出现了“ WARNING ! The remote SSH server rejected X11 forwarding request. ”,意思是“远程 SSH 服务器拒绝 X11 转发请求。”

三、安装Nginx

使用 Xshell 连接服务器,既然想要在服务器上面放静态资源,像 HTML ,js 等,就需要安装静态资源服务器。静态资源服务器有 Apache 和 Xshell 连接,这里我们选用 nginx 。

3.1 下载 nginx 压缩包;
点我下载nginx

这里就省略安装 nginx 步骤,网上很多教程的。

...

3.2  Xshell 连接 nginx ,在2.6 步骤中执行命令行查看 nginx 进程是否启动 ps -ef | grep nginx 

四、安装 VMware

下载链接:

https://pan.baidu.com/s/16pc84r354xHLfd3n_Jo2QA

提取码:7777

4.1 镜像文件的下载

请提前准备 Windows 10 ISO 镜像文件

4.2 在 VMware 中配置镜像文件

打开 VMware 软件,点击创建新的虚拟机

4.3 点击自定义(高级)
4.4 接下来直接下一步即可,固态类型,选择 BIOS 即可。
4.5 这里根据物理机的硬性要求,自定义设置

4.6 分配运行内存 

4.7 设置网络

 4.8 接下来直接下一步即可,配磁盘空间,选择单个文件初期方便管理。

4.9 点击自定义硬件 

4.10 选择 win 10 的镜像文件

 4.11 安装完成之后,点击开始此虚拟机进入安装 win 10

 4.12 接下来就是一些列的安装步骤 :

下一步即可 - 修改语言 -  - 重启虚拟机,完成 VMware Tools 的安装!

 五、打包部署 Vue

5.1 连接服务器

开启虚拟器连接

连接 Xshell 服务器

5.2 创建

在指定路径创建一个名为 Vue 的目录,在 Xshell 执行 mkdir -p /server/wwwroot/vue

再执行 cd /server/wwwroot/vue 用于在命令行界面中更改当前工作目录。

 5.3 打包

把打好的包 dist-prod(要 .zip 格式) 丢进去

5.4 解压

执行 unzip dist-prod.zip 进行解压,之后执行 ll 

5.5 修改一下 nginx 配置

 创建执行 cd /server/nginx/conf ,然后执行  ll 

执行 cd /server/.nginx/nginx-80/conf ,然后执行  ll 

 

再执行 sz nginx.conf 保存起来,进行修改配置;

再执行 cd /server/.nginx/nginx-80/conf/.vhost ,把修改好的 nginx.conf 配置丢进去,执行  ll 

最后执行 service nginxd-80 reload 

然后就可以直接访问了。 

service nginxd-80 reload: 是用来重新加载 Nginx 服务配置的命令。

nginxd-80: 这表示具体的服务名称,通常这个名称是 Nginx 服务的一个变体,可能是为了表示它在监听端口 80(HTTP)的配置服务。

reload:这个参数的意思是重新加载服务的配置文件,而不停止正在运行的服务。这允许你应用配置更改(例如 virtual host 配置)而不会导致服务中断。

conf: 这个目录一般用于存放配置文件。

.vhost: 这个目录通常用于存放虚拟主机的配置文件。

5.6 重启

如果出现这样的情况下,可以执行 reboot 重启。

 

5.7 更新包

更新新的包的时候,先删除之前的包,执行  rm -rf /server/wwwroot/vue/dist-prod* ,然后把新的包丢进去,再解压 unzip dist-prod.zip ,就更新成功了。

第一次部署前端的项目,如那些步骤出错了,可以提出来哈,互相学习。对你有帮助的话,麻烦点个赞呗! 

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

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

相关文章

LeetCode 3280. 将日期转换为二进制表示

在这个问题中,我们需要将一个公历日期(格式为 yyyy-mm-dd)转换为其二进制表示。具体来说,我们需要将年、月、日分别转换为二进制字符串,并按照 year-month-day 的格式组合这些字符串。 解题思路 提取年、月、日&#…

Vue2+OpenLayers给2个标点Feature分别添加独立的点击事件(提供Gitee源码)

前言:之前开发都是将所有的点位存放在一个图层上面,并统一赋予它们相同的点击事件,如果其中某些点的点击事件不一样呢,这种问题如何解决呢,本篇博客就是解决这个通点。 目录 一、案例截图 二、安装OpenLayers库 三…

【Unity】unity3D 调用LoadSceneAsync 场景切换后比较暗 部门材质丢失

解决方法:两个场景使用同样灯光 现象 直接进入第二个场景是可以正常显示 调用LoadSceneAsync来切换后,第二个场景出现比较暗的情况 解决方法:两个场景使用同样灯光,在loading 的场景中加入灯光。 Light—Directional Light 如果…

【大模型系列篇】数字人音唇同步模型——腾讯开源MuseTalk

之前有一期我们体验了阿里开源的半身数字人项目EchoMimicV2,感兴趣的小伙伴可跳转至《AI半身数字人开箱体验——开源项目EchoMimicV2》,今天带大家来体验腾讯开源的数字人音唇同步模型MuseTalk。 MuseTalk 是一个实时高品质音频驱动的唇形同步模型&#…

海云安开发者安全智能助手D10荣膺 “ AI标杆产品 ” 称号,首席科学家齐大伟博士入选2024年度 “ 十大杰出青年 ”

2024年12月27日,粤港澳大湾区AI领袖峰会在深圳成功举办,大会表彰了在人工智能技术创新、应用实践和产业发展等方面取得优异成绩的企业和个人,深圳海云安网络安全技术有限公司开发者安全智能助手D10荣膺“AI标杆产品”称号。同时,公…

Go基础之环境搭建

文章目录 1 Go 1.1 简介 1.1.1 定义1.1.2 特点用途 1.2 环境配置 1.2.1 下载安装1.2.2 环境配置 1.2.2.1 添加环境变量1.2.2.2 各个环境变量理解 1.2.3 验证环境变量 1.3 包管理工具 Go Modules 1.3.1 开启使用1.3.2 添加依赖包1.3.3 配置国内包源 1.3.3.1 通过 go env 配置1.…

基于 STM32 的多功能时间管理器项目

引言 在快节奏的生活中,时间管理显得尤为重要。本项目旨在通过 STM32 开发一个多功能时间管理器,功能包括计时器、闹钟和日历。用户可以方便地设置不同的提醒和计时任务,以更好地管理日常生活和工作。 项目名称 多功能时间管理器 环境准备 …

Windows上安装和配置Tabby终端工具并实现远程ssh连接内网服务器

文章目录 前言1. Tabby下载安装2. Tabby相关配置3. Tabby简单操作4. ssh连接Linux4.1 ubuntu系统安装ssh4.2 Tabby远程ssh连接ubuntu 5. 安装内网穿透工具5.1 创建公网地址5.2 使用公网地址远程ssh连接 6. 配置固定公网地址 前言 今天我要给大家分享一个非常实用且强大的开源跨…

国产Docker可视化面板Dpanel的安装与功能解析

国产Docker可视化面板Dpanel的安装及功能介绍 Docker 可视化面板系统,提供完善的 docker 管理功能。 支持查看基本信息、运行状态统计、网络统计、磁盘统计、用量统计等功能 ​​ ​​ 容器管理: ​​ 创建/修改容器 ​​ 支持基本配置、环境变量、…

平滑算法 效果比较

目录 高斯平滑 效果对比 移动平均效果比较: 高斯平滑 效果对比 右边两个参数是1.5 2 代码: smooth_demo.py import numpy as np import cv2 from scipy.ndimage import gaussian_filter1ddef gaussian_smooth_array(arr, sigma):smoothed_arr = gaussian_filter1d(arr, s…

蓝桥杯_B组_省赛_2022(用作博主自己学习)

题目链接算法11.九进制转十进制 - 蓝桥云课 进制转换 21.顺子日期 - 蓝桥云课 时间与日期 31.刷题统计 - 蓝桥云课 时间与日期 41.修剪灌木 - 蓝桥云课 思维 51.X 进制减法 - 蓝桥云课 贪心 61.统计子矩阵 - 蓝桥云课 二维前缀和 71.积木画 - 蓝桥云课 动态规划 82.扫雷 - 蓝桥…

Leetcode 2140. 解决智力问题 动态规划

原题链接&#xff1a;Leetcode 2140. 解决智力问题 class Solution { public:long long mostPoints(vector<vector<int>>& questions) {int n questions.size();vector<long long> dp(n, 0);for (int i n - 1; i > 0; i--) {int a questions[i][0]…

JavaScript-正则表达式方法(RegExp)

RegExp 对象用于将文本与一个模式匹配。 有两种方法可以创建一个 RegExp 对象&#xff1a;一种是字面量&#xff0c;另一种是构造函数。 字面量由斜杠 (/) 包围而不是引号包围。 构造函数的字符串参数由引号而不是斜杠包围。 new RegExp(pattern[, flags])一.符集合 1.选择…

网安——计算机网络基础

一、计算机网络概述 1、Internet网相关概念及发展 网络&#xff08;Network&#xff09;有若干结点&#xff08;Node&#xff09;和连接这些结点的链路&#xff08;link&#xff09;所组成&#xff0c;在网络中的结点可以是计算机、集线器、交换机或路由器等多个网络还可以通…

React第二十二章(useDebugValue)

useDebugValue useDebugValue 是一个专为开发者调试自定义 Hook 而设计的 React Hook。它允许你在 React 开发者工具中为自定义 Hook 添加自定义的调试值。 用法 const debugValue useDebugValue(value)参数说明 入参 value: 要在 React DevTools 中显示的值formatter?:…

Facebook 隐私风波:互联网时代数据安全警钟

在社交媒体飞速发展的今天&#xff0c;个人数据的隐私保护已成为全球关注的焦点。作为全球最大的社交平台之一&#xff0c;Facebook面临的隐私问题&#xff0c;尤其是数据泄露事件&#xff0c;频繁引发公众的广泛讨论。从用户信息被滥用到数据泄漏&#xff0c;Facebook的隐私挑…

HTML5 网站模板

HTML5 网站模板 参考 HTML5 Website Templates

Web前端对于登陆注册界面的实现

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>请注册登陆</title> </head> <body&…

Linux初识:【shell命令以及运行原理】【Linux权限的概念与权限管理】

目录 一.shell命令以及运行原理 二.Linux权限的概念与权限管理 2.1Linux权限的概念 sudo普通用户提权 2.2Linux权限管理 2.2.1文件访问者的分类&#xff08;人&#xff09; 2.2.2文件类型和访问权限&#xff08;事物属性&#xff09; 2.2.3文件权限值的表示方法 字符…

UML系列之Rational Rose笔记七:状态图

一、新建状态图 依旧是新建statechart diagram&#xff1b; 二、工作台介绍 接着就是一个状态的开始&#xff1a;开始黑点依旧可以从左边进行拖动放置&#xff1a; 这就是状态的开始&#xff0c;和活动图泳道图是一样的&#xff1b;只能有一个开始&#xff0c;但是可以有多个…